/* ============================================================
   SECTION 1 — OPENING HERO

   The temple artwork is the primary canvas: it runs edge to edge at
   the full viewport width and is never boxed, centred or shrunk into
   a narrower container.

     desktop / laptop  ->  herosectemple-pc   1536 x 1024  (3:2)
     mobile            ->  herosectemple-mob  1440 x 1886  (~0.76:1)

   HEIGHT
   The artwork wants to be `width / aspect` tall. On a wide screen that
   is taller than the viewport, so the section is allowed to trim it —
   but only down to --art-floor, and only from the empty sky above the
   finial and the paving below the plinth. The temple itself is never
   touched, and the artwork is never distorted.

     min-height  --art-floor    the most we will ever trim
     flex-grow   free space     take whatever height is going
     max-height  --art-natural  never scale past 1:1

   On a phone the portrait artwork is shorter than the space available,
   so none of this engages: it renders at its natural size, flush to the
   bottom, and its own cream sky carries on into the page paper.
   ============================================================ */

.hero {
  /* Type + emblem. min() keeps them sane on short viewports. */
  --display: clamp(2.6rem, min(12.6vw, 9.5svh), 4.4rem);
  --ganpati: clamp(36px, min(9vw, 6.5svh), 52px);

  --art-aspect: 0.7635;                     /* herosectemple-mob */
  --art-natural: calc(100vw / var(--art-aspect));
  --art-floor: calc(82vw / var(--art-aspect));
  --art-focus: 50% 50%;                     /* nothing to trim on a phone */

  /* How far the paper wash carries down over the top edge of the artwork. */
  --wash: 20%;

  /* Watercolour focus-in. Gentler on phones, where fill rate is scarcer. */
  --soften: 4px;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--paper);
}

@media (min-width: 901px) {
  .hero {
    --display: clamp(3rem, min(5.4vw, 9.6svh), 6rem);
    --ganpati: clamp(42px, min(3.6vw, 6svh), 58px);

    --art-aspect: 1.5;                      /* herosectemple-pc */
    /* 39% of any trim comes off the top, which keeps the golden finial
       (8.6% down) and the temple plinth (86% down) safely inside. */
    --art-focus: 50% 39%;

    --wash: 9%;
    --soften: 6px;
  }
}

/* A whisper of paper grain across the whole section. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layer 2 — the temple artwork, full bleed --------------------------- */

.hero__art {
  position: relative;
  z-index: 1;
  flex: 1 1 var(--art-floor);
  width: 100%;
  min-height: var(--art-floor);
  max-height: var(--art-natural);
  /* Contains the reveal's scale + blur so no soft edge ever creeps onto the
     paper. Ganpati lives in .hero__head, a sibling, and is untouched by it. */
  overflow: hidden;
}

.hero__art picture {
  display: block;
  height: 100%;
}

.hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--art-focus);
}

/* The paper wash: the top edge of the artwork dissolves into the page paper,
   so the two read as one painted sheet rather than a picture dropped onto a
   page. Short and gentle — it must never veil the temple itself. */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--wash);
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    var(--paper) 0%,
    rgba(252, 243, 220, 0.86) 22%,
    rgba(252, 243, 220, 0.45) 52%,
    rgba(252, 243, 220, 0) 100%
  );
}

/* ---- Layer 2b — mountain mist ------------------------------------------- *
   Soft bands of haze lying across the ridgeline. Inside .hero__art, so the
   paper wash (::after) still paints over their top edge and they never
   reach the sky. White on cream sky is invisible; they only read where
   they cross the green mountains, which is exactly where mist belongs.

   They arrive after the watercolour has dried, and drift in
   hero-animations.js. Without the motion layer they simply rest. */

.hero__haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease 1.8s;
}

body.is-revealing .hero__haze,
body.is-settled .hero__haze {
  opacity: 1;
}

.hero__mist {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 251, 242, 0.9), rgba(255, 251, 242, 0));
  filter: blur(18px);
}

.hero__mist--1 { top: 22%; left: -30%; width: 90%; height: 16%; opacity: 0.55; }
.hero__mist--2 { top: 35%; left: 30%;  width: 80%; height: 12%; opacity: 0.45; }
.hero__mist--3 { top: 47%; left: -10%; width: 70%; height: 10%; opacity: 0.32; }
.hero__mist--4 { top: 28%; left: 58%;  width: 75%; height: 14%; opacity: 0.4; }

/* Fill rate is scarcer on a phone: two bands carry it. */
@media (max-width: 900px) {
  .hero__mist--3,
  .hero__mist--4 {
    display: none;
  }
}

/* ---- Layer 3 — soft divine light ---------------------------------------- */

.hero__glow {
  position: absolute;
  z-index: 2;
  inset: -12% 0 auto 0;
  height: 78%;
  opacity: 0.28;
  pointer-events: none;
  background-image: radial-gradient(
    58% 54% at 50% 20%,
    rgba(255, 243, 212, 0.9) 0%,
    rgba(255, 237, 198, 0.42) 44%,
    rgba(255, 237, 198, 0) 74%
  );
}

/* ---- Layers 4 + 5 — Ganpati and typography ------------------------------ */

.hero__head {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.3svh, 15px);
  padding: clamp(12px, 3.2svh, 34px) clamp(18px, 6vw, 48px) clamp(2px, 0.8vh, 10px);
  text-align: center;
}

/* Ganpati Bappa sits on his own layer with his own bounding box. Nothing
   here clips, masks, splits or crops him — only the whole element ever
   moves, and only by opacity, scale and a few pixels of translate. */
.hero__ganpati {
  width: var(--ganpati);
  height: auto;
  opacity: 0.95;
  overflow: visible;
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink-navy);
  line-height: 0.94;
  font-size: var(--display);
}

.hero__name {
  display: block;
  font-size: 1em;
  letter-spacing: 0.004em;
  padding: 0.04em 0.12em 0.12em;
  margin-bottom: -0.08em;
}

.hero__joiner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.235em;
  letter-spacing: 0.14em;
  color: var(--ink-navy-soft);
  padding: 0.45em 0.2em 0.5em;
  margin: -0.1em 0 -0.15em;
}

.hero__joiner i {
  display: block;
  width: 0.85em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin: 0 0.5em;
}

/* ============================================================
   THE OPENING — a modern, cinematic, devotional reveal

   Choreography, from the moment the sequence starts:

     0.00s  the parchment sheet is already resting; a soft warm
            light begins to gather
     0.35s  Ganpati Bappa gently appears, complete and whole
     0.85s  the light blooms, then eases back
     0.95s  the watercolour temple emerges and comes into focus
     1.65s  Aarav        1.80s  weds        1.92s  Ananya
     ~2.9s  still

   Only three things ever animate, one animation each, so the
   compositor is never asked to rebuild a layer mid-flight. Every
   animation resolves to the element's natural state, so the finished
   hero is exactly the layout defined above.
   ============================================================ */

body.is-idle .hero__glow,
body.is-idle .hero__ganpati,
body.is-idle .hero__name,
body.is-idle .hero__joiner {
  opacity: 0;
}

body.is-idle .hero__art img {
  opacity: 0;
  filter: blur(var(--soften));
}

body.is-revealing .hero__glow {
  animation: divineLight 2.6s var(--ease-settle) 0s both;
}

body.is-revealing .hero__ganpati {
  animation: ganpatiReveal 0.95s var(--ease-ink) 0.35s both;
}

body.is-revealing .hero__art img {
  animation: artReveal 1.35s var(--ease-settle) 0.95s both;
}

body.is-revealing .hero__name--groom {
  animation: inkReveal 0.9s var(--ease-ink) 1.65s both;
}

body.is-revealing .hero__joiner {
  animation: inkReveal 0.85s var(--ease-ink) 1.8s both;
}

body.is-revealing .hero__name--bride {
  animation: inkReveal 0.9s var(--ease-ink) 1.92s both;
}

/* Stage 1 + 3 — the light gathers, blooms, and eases back to a haze. */
@keyframes divineLight {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  38% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.28;
    transform: none;
  }
}

/* Stage 2 — Ganpati Bappa, whole, gently arriving. */
@keyframes ganpatiReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 0.95;
    transform: none;
  }
}

/* Stage 4 — the watercolour emerges and dries into the paper. One element,
   one animation: opacity, scale and focus resolve together. */
@keyframes artReveal {
  from {
    opacity: 0;
    transform: scale(1.03);
    filter: blur(var(--soften));
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* Stage 5 — the names arrive on the sheet. */
@keyframes inkReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.988);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Reduced motion — go straight to the finished invitation ------------ */

@media (prefers-reduced-motion: reduce) {
  body.is-idle .hero__name,
  body.is-idle .hero__joiner {
    opacity: 1;
  }

  body.is-idle .hero__ganpati {
    opacity: 0.95;
  }

  body.is-idle .hero__glow {
    opacity: 0.28;
  }

  body.is-idle .hero__art img {
    opacity: 1;
    filter: none;
  }

  body.is-revealing .hero__glow,
  body.is-revealing .hero__ganpati,
  body.is-revealing .hero__art img,
  body.is-revealing .hero__name,
  body.is-revealing .hero__joiner {
    animation: none;
  }
}