/* ============================================================
   Albora · Footer spotlight + sunrise
   - Desktop (hover): the cursor turns into a warm sunset-toned
     glow when hovering the <footer>. Glow stays *contained*
     within the footer container (overflow: hidden).
   - Mobile / no-hover: the same glow appears statically at the
     bottom of the footer and animates in like a sunrise the
     first time the footer enters the viewport.
   - Footer logo (when present) is recolored to a near-bg tint,
     so it is a soft ghost at rest and an opaque eclipse over
     the warm spotlight.
   - Adapts to footer luminance:
     · .is-dark  → screen blend (warm light over a night sky).
     · .is-light → multiply blend (warm dye over white paper).
   - Skipped entirely on prefers-reduced-motion (logo stays).
   ============================================================ */

/* ---------- Containment for the spotlight ---------- */
footer.has-footer-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The footer's actual content sits ABOVE the spotlight so the
   wordmark behaves as an opaque eclipse on top of the warm light:
   the glow passes BEHIND the logo, the logo blocks it, and the
   wordmark shape becomes a sharp dark silhouette cut out of the
   illuminated bg — the moon blocking the sun. */
footer.has-footer-spotlight > *:not(.footer-spotlight) {
  position: relative;
  z-index: 1;
}

/* ---------- Logo recolored to match footer background ----------
   The original <img> is replaced (by JS) with this <div>, which
   uses the SVG as a mask and tints the shape with the footer's
   computed background color. Result: invisible at rest, becomes a
   crisp silhouette when the warm glow lights up the surrounding bg.
   The original SVG (Albora wordmark) is 118 x 29. */
.footer-logo-mask {
  width: 100%;
  aspect-ratio: 118 / 29;
  /* Tinted *just barely* lighter than the footer bg → always
     perceptible as a soft ghost silhouette, never as a hard logo. */
  background-color: var(--footer-logo-color, var(--footer-bg, #0A0A0A));
  -webkit-mask-image: var(--footer-logo-url);
          mask-image: var(--footer-logo-url);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* ---------- Spotlight base (shared by hover & sunrise modes) ---------- */
.footer-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  will-change: transform, opacity;
}

.footer-spotlight.is-visible {
  opacity: 1;
}

/* GLOW · warm sunset palette (coral → orange → peach), strong
   radial blur. Blend mode is set per footer mode below so the
   same gradient either lifts a dark bg (screen) or stains a
   light bg (multiply). */
.footer-spotlight::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 720px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(
    circle at center,
    rgba(232, 90, 70, 0.95) 0%,
    rgba(252, 130, 80, 0.78) 12%,
    rgba(252, 163, 83, 0.55) 28%,
    rgba(252, 163, 83, 0.32) 48%,
    rgba(252, 140, 75, 0.12) 72%,
    rgba(252, 140, 75, 0) 100%
  );
  filter: blur(32px);
}

/* Dark footer · screen blend lifts the night with warm light. */
footer.has-footer-spotlight.is-dark .footer-spotlight::before {
  mix-blend-mode: screen;
}

/* Light footer · multiply blend stains the white with warm dye.
   The same coral palette turns into a peach-coral wash on white,
   producing the "sunset filtered through paper" feel. */
footer.has-footer-spotlight.is-light .footer-spotlight::before {
  mix-blend-mode: multiply;
}

/* NOISE · procedural fractal noise tinted warm,
   softly masked to a circle to texture only the glow area.
   Blend mode + opacity are set per footer mode below. */
.footer-spotlight::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.82  0 0 0 0 0.65  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
          mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}

/* Dark footer · overlay over a near-black bg punches the noise
   through as bright warm grain. */
footer.has-footer-spotlight.is-dark .footer-spotlight::after {
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* Light footer · overlay disappears against white (formula collapses
   to white). Multiply with reduced opacity gives a faint warm grain
   that reads on paper without overwhelming the bg. */
footer.has-footer-spotlight.is-light .footer-spotlight::after {
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* ============================================================
   MODE A · Desktop hover (cursor follower, JS-driven transform)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html.footer-spotlight-active footer.has-footer-spotlight,
  html.footer-spotlight-active footer.has-footer-spotlight * {
    cursor: none !important;
  }
}

/* ============================================================
   MODE B · Mobile / no-hover (ambient sunrise, CSS-driven)
   The spotlight is positioned statically at the bottom-center
   of the footer. When .is-rising is added (by IntersectionObserver),
   a one-shot keyframe animation fades + translates it in like dawn.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .footer-spotlight.is-sunrise {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 120px);
    opacity: 0;
    transition: none;
  }

  .footer-spotlight.is-sunrise.is-rising {
    animation: footer-sunrise 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* On small screens the 720px gradient overflows the viewport,
     which actually feels right (atmospheric). Slightly reduce
     the noise opacity so the rise stays soft. */
  .footer-spotlight.is-sunrise::after {
    opacity: 0.45;
  }
}

@keyframes footer-sunrise {
  0% {
    opacity: 0;
    transform: translate(-50%, 120px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   Reduced motion · disable the entire effect (logo stays as is).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .footer-spotlight {
    display: none !important;
  }
  html.footer-spotlight-active footer,
  html.footer-spotlight-active footer * {
    cursor: auto;
  }
}