/**
 * Alma — cinematic black hole: soft CSS glow + canvas particles (Creations embed + Gallery full page).
 */

.alma-bh {
  position: relative;
  /* Transparent so masked edges blend into the page (#000), not a solid square tile */
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  /* Feather entire stack into background — no hard rectangular clip */
  -webkit-mask-image: radial-gradient(
    ellipse 96% 94% at 50% 50%,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.55) 82%,
    rgba(0, 0, 0, 0.12) 94%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 96% 94% at 50% 50%,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.55) 82%,
    rgba(0, 0, 0, 0.12) 94%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Full viewport stage (Gallery) — gentler edge falloff toward screen corners */
.alma-bh--page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-mask-image: radial-gradient(
    ellipse 98% 96% at 50% 50%,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, 0.5) 86%,
    rgba(0, 0, 0, 0.1) 96%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 98% 96% at 50% 50%,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, 0.5) 86%,
    rgba(0, 0, 0, 0.1) 96%,
    transparent 100%
  );
}

/* Compact strip under Creations — stronger corner fade so it melts into the orbit area */
.alma-bh--embed {
  width: min(100%, 19rem);
  height: clamp(6.75rem, 19vh, 10rem);
  margin: 0 auto;
  border-radius: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 72% 88% at 50% 44%,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.55) 62%,
    rgba(0, 0, 0, 0.18) 78%,
    rgba(0, 0, 0, 0.04) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 72% 88% at 50% 44%,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.55) 62%,
    rgba(0, 0, 0, 0.18) 78%,
    rgba(0, 0, 0, 0.04) 92%,
    transparent 100%
  );
}

/* Soft outer heat — deep red → orange / yellow, very blurred */
.alma-bh__glow {
  position: absolute;
  inset: -35% -45% -25% -45%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 48% at 50% 50%, rgba(120, 25, 30, 0.45) 0%, transparent 58%),
    radial-gradient(ellipse 42% 40% at 45% 48%, rgba(255, 90, 35, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 38% 36% at 58% 52%, rgba(255, 200, 70, 0.12) 0%, transparent 52%);
  filter: blur(42px) hue-rotate(0deg);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation:
    alma-bh-glow-breathe 9s ease-in-out infinite,
    alma-bh-glow-hue 48s ease-in-out infinite;
}

.alma-bh--embed .alma-bh__glow {
  inset: -40% -50% -30% -50%;
  filter: blur(28px) hue-rotate(0deg);
  opacity: 0.7;
  animation:
    alma-bh-glow-breathe 8s ease-in-out infinite,
    alma-bh-glow-hue-embed 38s ease-in-out infinite;
}

.alma-bh__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Dark focus — not a hard disc; feathered pure black center */
.alma-bh__void {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 52% 52% at 50% 50%,
    #000000 0%,
    #000000 14%,
    rgba(0, 0, 0, 0.92) 26%,
    rgba(0, 0, 0, 0.55) 48%,
    transparent 72%
  );
}

.alma-bh--embed .alma-bh__void {
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000000 0%,
    #000000 18%,
    rgba(0, 0, 0, 0.88) 32%,
    rgba(0, 0, 0, 0.45) 52%,
    transparent 76%
  );
}

/* Gallery copy */
.alma-bh__copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: max(5rem, calc(env(safe-area-inset-top) + 4rem)) 1.5rem max(6rem, calc(env(safe-area-inset-bottom) + 5rem));
  text-align: center;
  pointer-events: none;
}

.alma-bh__line {
  font-size: clamp(0.52rem, 1vw, 0.62rem);
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 230, 200, 0.42);
  text-shadow: 0 0 40px rgba(255, 120, 50, 0.2);
}

.alma-bh__status {
  font-size: clamp(0.88rem, 2.4vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.55;
  max-width: 26ch;
  color: rgba(255, 235, 215, 0.72);
  text-shadow: 0 0 32px rgba(255, 100, 40, 0.15), 0 2px 20px rgba(0, 0, 0, 0.95);
}

.alma-bh__hint {
  font-size: clamp(0.62rem, 1.25vw, 0.74rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255, 180, 130, 0.38);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

/* Creations HUD on embed */
.alma-bh__hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0.55rem;
  gap: 0.2rem;
  pointer-events: none;
}

.alma-bh__hud-title {
  font-size: clamp(0.42rem, 0.82vw, 0.5rem);
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 220, 190, 0.5);
  text-shadow: 0 0 20px rgba(255, 100, 40, 0.25), 0 2px 10px rgba(0, 0, 0, 0.95);
}

.alma-bh__hud-sub {
  font-size: clamp(0.34rem, 0.68vw, 0.4rem);
  letter-spacing: 0.14em;
  color: rgba(255, 170, 120, 0.35);
}

@keyframes alma-bh-glow-breathe {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(1);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.03);
  }
}

/* Slow hue wander — stays in ember / gold / blood-orange range, never blows white */
@keyframes alma-bh-glow-hue {
  0%,
  100% {
    filter: blur(42px) hue-rotate(-8deg);
  }
  33% {
    filter: blur(42px) hue-rotate(6deg);
  }
  66% {
    filter: blur(42px) hue-rotate(14deg);
  }
}

@keyframes alma-bh-glow-hue-embed {
  0%,
  100% {
    filter: blur(28px) hue-rotate(-6deg);
  }
  50% {
    filter: blur(28px) hue-rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alma-bh__glow {
    animation: none;
    filter: blur(42px);
    opacity: 0.74;
  }

  .alma-bh--embed .alma-bh__glow {
    filter: blur(28px);
    opacity: 0.68;
  }
}