/* hero.css — day/night hero: layer geometry, HTML text overlays, scene crossfade,
 * and the scene toggle. Positions come baked inline (percentages of the 2160x4654
 * hero box) from build/build.cjs; this file only styles. */

/* ---- hero container ------------------------------------------------------ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2160 / 4654;
  overflow: hidden;
  isolation: isolate;
  background: #0a0f2e; /* fallback while art decodes (preloader covers this) */
  container-type: inline-size; /* enables cqw type sizing against hero width */
}

/* ---- scenes --------------------------------------------------------------
 * Both scenes are painted onto their own compositor layer (translateZ) from load,
 * so the crossfade is a pure GPU opacity blend with NO first-paint rasterization
 * stall. Night sits beneath and stays fully rendered; the morning layer on top fades
 * out to reveal it (visually identical to a night fade-in, but the always-warm layer
 * is the one behind — so the first toggle is instant). */
.scene {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.scene--night {
  z-index: 1;
  opacity: 1;
}
.scene--morning {
  z-index: 2;
  opacity: 1;
  transition: opacity var(--toggle-dur) var(--toggle-ease);
}
html.is-night .scene--morning {
  opacity: 0;
}

/* the inactive scene is inert to pointer + (after the fade) hidden from a11y/selection */
.scene[data-inert] {
  pointer-events: none;
}
.scene[data-inert] .hero-text {
  visibility: hidden;
}

/* promote opacity only during an active toggle (on the layer that animates) */
.hero.is-toggling .scene--morning {
  will-change: opacity;
}

/* ---- image layers -------------------------------------------------------- */
.ly {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ly--base {
  z-index: 0;
}

/* over-hero shared flowers, above both scenes */
.hero-flowers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-flowers .ly {
  /* z-index set inline (1..3) */
}

/* ---- text overlays ------------------------------------------------------- */
.hero-text {
  position: absolute;
  inset: 0;
  z-index: 20; /* above the scene's cutouts */
  pointer-events: none;
}

/* multi-line centred paragraph (invite / blessing) */
.para {
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  max-width: 96cqw;
  text-align: center;
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--fs);
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.para .ln {
  display: block;
  min-height: var(--lh);
  line-height: var(--lh);
  white-space: nowrap;
}
.para b {
  font-weight: 700;
}

/* single-line benediction */
.mantra {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* couple-name script */
.cname {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Pinyon Script", "Segoe Script", cursive;
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1;
  white-space: nowrap;
}

/* ---- per-scene colour ---------------------------------------------------- */
.hero-text--morning .para,
.hero-text--morning .mantra {
  color: var(--ink-slate);
}
.hero-text--morning .cname {
  color: var(--gold-brown);
}

.hero-text--night .para {
  color: var(--ink-white);
}
/* night names carry the PSD's luminous gold sheen (Layer-40 glow was not shipped),
   reproduced as a warm vertical gradient + a subtle glow. */
.hero-text--night .cname {
  background: linear-gradient(
    180deg,
    var(--night-name-hi) 0%,
    #ddccb9 46%,
    var(--night-name-lo) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 1px rgba(4, 7, 30, 0.55))
    drop-shadow(0 0 7px rgba(232, 214, 184, 0.14));
}

/* ---- scene toggle button ------------------------------------------------- */
.scene-toggle {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  /* hug the top-right of the centred column: 14px inside its right edge on desktop,
     14px from the viewport edge once the column fills the screen (mobile). */
  right: max(14px, calc(50vw - var(--column-max) / 2 + 14px));
  z-index: 900; /* above content, below the preloader */
  display: grid;
  place-items: center;
  width: 40px;  /* visual size; ::before extends the hit target to 48px */
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 16, 26, 0.28); /* translucent — text behind stays legible */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f2e4cf;
  cursor: pointer;
  transition: background 0.3s var(--ui-ease), border-color 0.3s var(--ui-ease),
    transform 0.15s var(--ui-ease);
}
/* invisible hit-area extender: 40px visual chip, 48px effective tap target */
.scene-toggle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
.scene-toggle:hover {
  background: rgba(18, 16, 26, 0.5);
}
.scene-toggle:active {
  transform: scale(0.94);
}
.scene-toggle:focus-visible {
  outline: 2px solid #f6ead2;
  outline-offset: 3px;
}

/* idle-dim: .is-dim fades the chip to 45% over --chip-dim-dur. The base state has NO
   opacity transition, so removing the class (or the hover/focus overrides below)
   restores full opacity INSTANTLY. Dim is opacity-only — it never affects hit
   testing or the toggle's response. */
.scene-toggle.is-dim {
  opacity: 0.45;
  transition: background 0.3s var(--ui-ease), border-color 0.3s var(--ui-ease),
    transform 0.15s var(--ui-ease), opacity var(--chip-dim-dur) ease;
}
.scene-toggle.is-dim:hover,
.scene-toggle.is-dim:focus-visible,
.scene-toggle.is-dim:active {
  opacity: 1;
  transition: background 0.3s var(--ui-ease), border-color 0.3s var(--ui-ease),
    transform 0.15s var(--ui-ease); /* no opacity transition = instant restore */
}

.scene-toggle__chip {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.scene-toggle__icon {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  /* crisp icon over the translucent fill, readable on the bright sunrise sky */
  filter: drop-shadow(0 1px 1.5px rgba(10, 8, 20, 0.55));
  transition: opacity 0.3s var(--ui-ease), transform 0.3s var(--ui-ease);
}
.scene-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-40deg) scale(0.6);
}
.scene-toggle__icon--moon {
  opacity: 1;
}
html.is-night .scene-toggle {
  color: #f4e6c9;
  background: rgba(12, 14, 34, 0.5);
  border-color: rgba(244, 230, 201, 0.35);
}
html.is-night .scene-toggle__icon--moon {
  opacity: 0;
  transform: rotate(40deg) scale(0.6);
}
html.is-night .scene-toggle__icon--sun {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scene-toggle,
  .scene-toggle__icon {
    transition-duration: 0.001ms;
  }
}