/* ==========================================================================
   MAHARASHTRA WEDDING — Hero section  (PHASE 1: STATIC STRUCTURE ONLY)
   --------------------------------------------------------------------------
   No animation, no transitions, no transforms driven by scroll, no JS.
   This file lays out the composition and nothing else.

   The layout follows hero-section-ui.png (1440 x 3808). Every size and gap
   below is the measured value from that reference, written as a fraction of
   --dw (the design width), so the proportions hold at any viewport while the
   page itself stays in normal document flow — it is not a fixed canvas being
   scaled, and the section's height comes from its content.

   Measured off the reference (px at 1440 wide -> fraction of width):

     mantra   40 -> .0278      garland    37 -> .026     ganpati img  672 -> .4666
     heading  62 -> .0431      divider   420 -> .292     khidaki      108 -> .075
     message  37 -> .0257      swastik   148 -> .1028    damru        317 -> .22
     name     84 -> .058       closed    124 -> .086     invitation  1022 -> .71
     parents  34 -> .0236      bloom      42 -> .029     mandal            1.55

     top band     0 .. 746   (orange courtyard; brown ground begins at 746)
     ganpati content  1000 ..1507      Aditya 1714, sub 1854
     swastik      1986 ..2134          Sneha  2228, sub 2368
     damru        2114 ..2325          mandal peak 2593
     closed       2716 ..3161          opened 3232 ..3738
   ========================================================================== */

@font-face {
  font-family: "Gafiya";
  src: url("Gafiya-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

.wedding-hero {
  /* The content column. Up to 820px (the reference's own design width) it is
     simply the whole viewport, so phones and tablets get the composition
     exactly as drawn. Past that it grows gently with the screen — enough to
     fill a desktop frame, never enough to turn the heading into a
     landing-page headline. The backgrounds stay full-bleed regardless:
     full-width background + controlled central content. */
  --dw: min(100vw, max(820px, 62vw));

  /* The reference is drawn for a wide poster, so on a phone its own fractions
     come out too small to read. Only the words are stepped up. */
  --ts: 1;

  /* second-bg-hero-section's gable rises 123px of its 1435px width, so its
     shoulders sit this far below its peak at any size. The courtyard has to
     stay visible behind them — otherwise the transparent corners show flat
     brown and the join reads as two rectangles instead of a floor. */
  --gable-rise: 8.57vw;
  /* how far the courtyard runs on behind it: comfortably past the shoulders,
     so its own bottom edge is always hidden under opaque artwork */
  --gable-overlap: 20vw;

  /* the invitation's rendered width, shared by the caps and the parchment so
     the three pieces reconstruct invitationcard-opened.png exactly */
  --inv-w: calc(var(--dw) * 0.71);

  /* How far the mandal is pushed BELOW the finale's floor. Removing the
     hanging card shortened that box and let the arch ride up into the couple's
     names; the first fix padded the box back out, but padding also shoved the
     invitation down and left a screen of dead brown above it — very visible on
     a phone. Dropping the arch instead buys the same clearance and costs no
     space. It overshoots the section, which simply clips it. */
  --mandal-drop: calc(var(--dw) * 0.226);

  --gold: #f0c179;
  --cream: #fdf1e2;
  --brown: #663722;
  --mandal: #592e1a;

  /* How far the hero rides UP over the end of chapter 1. The two are the same
     courtyard, so rather than cutting from one to the other they are overlapped
     by a screen and dissolved — see scripts/wedding-hero.js. Chapter 1's own
     files are untouched: this is the hero moving, not the opening. */
  --enter: 100vh;

  position: relative;
  z-index: 1;                      /* paints over chapter 1 during the dissolve */
  width: 100%;
  background: var(--brown);
  color: var(--cream);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;                /* decorations may sit past the edges */
}

/* The overlap is applied ONLY once the dissolve is actually running. The hero
   is opaque, so without the fade it would simply sit on top of chapter 1's last
   screen and hide the end of the journey — which is exactly what would happen
   with JS off, or with reduced motion, where the fade never runs. The script
   sets data-join on <html> when it wires the dissolve up. */
[data-join="on"] .wedding-hero {
  margin-top: calc(var(--enter) * -1);

  /* A FEATHERED LEADING EDGE. Riding up over chapter 1 with a hard top edge,
     the hero announced itself as a second picture sliding in — a visible
     horizontal line travelling up the courtyard, which is what made the join
     read as two stacked images rather than one becoming the other. The top of
     the section is masked off and the mask is retracted to nothing as the join
     completes, so the arriving courtyard has no edge at all. --feather is
     driven by scripts/wedding-hero.js and ends at 0, leaving no mask behind. */
  --feather: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000 var(--feather));
  mask-image: linear-gradient(to bottom, transparent 0px, #000 var(--feather));
}

/* the centred column everything is measured against */
.hero-wrap {
  position: relative;
  width: var(--dw);
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================================
   PART 1 — the Wada intro, on the courtyard
   ========================================================================== */

.hero-top {
  position: relative;
  /* the reference's band is 1440 x 746 -> aspect 1.93, so full-bleed it is
     51.8vw tall; the cap stops it running away on an ultrawide monitor */
  min-height: min(51.8vw, 88vh);
  display: flex;
  align-items: center;
  padding: calc(var(--dw) * 0.069) 0 calc(var(--dw) * 0.060);
}

/* Full-bleed courtyard behind the intro. It runs on past the bottom of the
   band by the gable's rise, so the second background's transparent shoulders
   reveal courtyard floor and the two connect as one continuous perspective. */
.hero-top__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--gable-overlap) * -1);
  z-index: 0;
}

.hero-top__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
}

/* marigold garlands hung down the outer edges of the intro */
.hero-garland {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--dw) * 0.026);
  z-index: 2;
  overflow: hidden;
}

.hero-garland img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;                /* a repeating garland strip, 36 x 635 */
}

.hero-garland--l { left: calc(50% - var(--dw) * 0.46); }
.hero-garland--r { left: calc(50% + var(--dw) * 0.434); }

.hero-top .hero-wrap { z-index: 3; }

.hero-mantra {
  margin: 0;
  font-size: calc(var(--dw) * 0.0278 * var(--ts));
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(52, 15, 3, 0.5);
}

.hero-title {
  margin: calc(var(--dw) * 0.061) 0 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--dw) * 0.0431 * var(--ts));
  line-height: 1.19;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff7ec;
  text-shadow: 0 2px 14px rgba(52, 15, 3, 0.5);
}

.hero-divider {
  display: block;
  width: calc(var(--dw) * 0.292);
  height: auto;
  margin: calc(var(--dw) * 0.034) auto 0;
}

.hero-message {
  margin: calc(var(--dw) * 0.036) auto 0;
  max-width: calc(var(--dw) * 0.52);
  font-size: calc(var(--dw) * 0.0257 * var(--ts));
  line-height: 1.42;
  text-shadow: 0 2px 12px rgba(52, 15, 3, 0.5);
}

/* ==========================================================================
   PARTS 2-4 — the ceremonial ground
   ========================================================================== */

.hero-body {
  position: relative;
  /* No background of its own at the top: the gable artwork is the ground, and
     a flat fill here would cover the courtyard showing through its shoulders.
     The fill picks up below the shoulders as a safety net. */
}

/* the gable that carries the courtyard over into the ceremonial ground */
.hero-body__gable {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-body__gable img {
  display: block;
  width: 100%;
  height: auto;
  /* second-bg-hero-section.png is 1436 x 3062 — exactly the reference's brown
     region at 1440 wide — so it is used at its own aspect, full width. Its top
     edge IS the perspective join with the courtyard floor above. */
}

/* ---- Ganpati, with the Wada's niches set into the wall ------------------ */

.hero-shrine {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--dw) * 0.163);
}

/* Ganpati and the khidaki are scaled up ~29% from the reference's own
   fractions (.4666 and .075), by request: --dw stops growing at 62vw, so on a
   wide monitor the reference proportions left the shrine reading small against
   the frame. ganpati.png carries transparent padding — his drawn content is
   .3167/.4666 = 68% of the box — so the number that matters visually is the
   .407 of --dw below, not the .60. */
.hero-ganpati {
  display: block;
  width: calc(var(--dw) * 0.60);     /* his drawn content is .407 */
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero-khidaki {
  position: absolute;
  display: block;
  width: calc(var(--dw) * 0.097);
  height: auto;
  z-index: 1;
  opacity: 0.62;
  filter: brightness(0.46) saturate(0.4);
}




.hero-khidaki--l1 { left: 19.4%; top: calc(var(--dw) * 0.246); }
.hero-khidaki--r1 { left: 74.2%; top: calc(var(--dw) * 0.246); }
.hero-khidaki--l2 { left: 14.6%; top: calc(var(--dw) * 0.397); }
.hero-khidaki--r2 { left: 80.0%; top: calc(var(--dw) * 0.397); }

/* ---- the couple --------------------------------------------------------- */

.hero-couple {
  position: relative;
  z-index: 2;
}

.hero-name {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--dw) * 0.058 * var(--ts));
  line-height: 1;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.015em;
}

.hero-sub {
  margin: calc(var(--dw) * 0.040) 0 0;
  font-size: calc(var(--dw) * 0.0236 * var(--ts));
  line-height: 1.25;
}

.hero-name--groom { margin-top: calc(var(--dw) * 0.101); }
.hero-name--bride { margin-top: calc(var(--dw) * 0.065); }

/* the swastik, with a damru either side */
.hero-music {
  position: relative;
  margin-top: calc(var(--dw) * 0.066);
}

.hero-swastik {
  display: block;
  width: calc(var(--dw) * 0.1028);
  height: auto;
  margin: 0 auto;
}

.hero-damru {
  position: absolute;
  top: calc(var(--dw) * -0.074);
  width: calc(var(--dw) * 0.33);
  height: auto;
  z-index: 1;
}

.hero-damru--l { left: calc(50% - 50vw - var(--dw) * 0.075); }
.hero-damru--r { right: calc(50% - 50vw - var(--dw) * 0.075); transform: scaleX(-1); }

/* ---- scattered marigolds, at the reference's own positions -------------- */

.hero-bloom {
  position: absolute;
  display: block;
  width: calc(var(--dw) * 0.029);
  height: auto;
  z-index: 2;
}

/* ==========================================================================
   PART 4 — the mandal and the invitation
   ========================================================================== */

.hero-finale {
  position: relative;
  /* 0.216 is the reference's own gap; 0.30 leaves the invitation breathing
     room where the hanging card used to be, without holding open the card's
     whole height. The arch's clearance is bought by --mandal-drop instead. */
  padding: calc(var(--dw) * 0.30) 0 calc(var(--dw) * 0.049);
}

.hero-mandal {
  position: absolute;
  left: 50%;
  bottom: calc(var(--mandal-drop) * -1);
  width: calc(var(--dw) * 1.55);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.hero-mandal img {
  display: block;
  width: 100%;
  height: auto;
}

/* Below its shoulders the mandal is solid to both edges and to the foot of
   the section. This carries that colour out past the frame so the ground
   never shows as a lighter band beside or under it. (Measured: the silhouette
   reaches full width at 39.5% of the artwork's height.) */
.hero-mandal::after {
  content: "";
  position: absolute;
  left: -60vw;
  right: -60vw;
  top: 39.5%;
  bottom: 0;
  z-index: -1;
  background: var(--mandal);
}

/* The invitation. It is built from three pieces of the one artwork —
   a roller cap at each end (the outer 9.5%) and the parchment between (81%) —
   so that widening the middle slides the caps apart and uncovers parchment at
   the same time. At rest they reconstruct invitationcard-opened.png exactly. */
.hero-invitation {
  position: relative;
  z-index: 2;
  width: var(--inv-w);
  aspect-ratio: 1019 / 523;
  margin: calc(var(--dw) * 0.049) auto 0;
}

.hero-unroll {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: calc(var(--inv-w) * 0.81);
  transform: translateX(-50%);
}

.hero-parch {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image: url("../invitationcard-opened.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--inv-w) 100%;
}

.hero-cap {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(var(--inv-w) * 0.095);
  background-image: url("../invitationcard-opened.png");
  background-repeat: no-repeat;
  background-size: var(--inv-w) 100%;
}

.hero-cap--l { right: 100%; background-position: left center; }
.hero-cap--r { left: 100%; background-position: right center; }

/* the date, printed on the parchment */
.hero-invitation__text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--inv-w) * 0.74);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #5a2410;
}

.hero-date,
.hero-time {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--dw) * 0.045);
  line-height: 1.3;
  white-space: nowrap;
}

.hero-invitation__rule {
  display: block;
  width: calc(var(--inv-w) * 0.34);
  height: auto;
  margin: calc(var(--dw) * 0.008) auto;
  opacity: 0.8;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptops and tablets: the words need a little more presence than the
   reference's fractions give them at this width. */
@media (max-width: 900px) {
  .wedding-hero { --ts: 1.18; }
}

/* Phones: step the type up and pull the side decorations inward, exactly as
   the design language allows. Nothing is reordered or removed. */
@media (max-width: 620px) {
  .wedding-hero { --ts: 1.45; }

  .hero-garland--l { left: calc(50% - var(--dw) * 0.47); }
  .hero-garland--r { left: calc(50% + var(--dw) * 0.444); }

  .hero-damru { width: calc(var(--dw) * 0.30); }
  .hero-damru--l { left: calc(50% - 50vw - var(--dw) * 0.085); }
  .hero-damru--r { right: calc(50% - 50vw - var(--dw) * 0.085); }

  .hero-message { max-width: calc(var(--dw) * 0.8); }
  .wedding-hero { --inv-w: calc(var(--dw) * 0.92); }
  /* the parchment grows on a phone, so the date grows with it */
  .hero-date,
  .hero-time { font-size: calc(var(--dw) * 0.058); }
  .hero-mandal { width: calc(var(--dw) * 1.9); }
  /* the arch is wider on a phone, so it reaches higher and needs a bigger drop */
  .wedding-hero { --mandal-drop: calc(var(--dw) * 0.276); }
  .hero-finale { padding-top: calc(var(--dw) * 0.34); }
}

@media (max-width: 430px) {
  .wedding-hero { --ts: 1.6; }
}

/* ==========================================================================
   AMBIENT — the flowing flowers
   --------------------------------------------------------------------------
   A dedicated layer, built by scripts/wedding-hero.js. It sits above the
   courtyard, the ceremonial ground and the mandal (all z-index 0) and below
   the garlands, the khidaki, Ganpati, the names and the invitation (z-index
   2-3), so a drifting flower can never come between the reader and anything
   that matters. It is inert to the pointer, and it is clipped to the section
   so a flower that leaves one edge is already invisible before it is moved
   back to the other.

   The static `.hero-bloom` marigolds are NOT removed — they are only made
   invisible once this layer exists. With JS off, or reduced motion on, the
   approved composition stands exactly as it was.
   ========================================================================== */

.flowing-flowers-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.flowing-flowers-layer .ff {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  /* the same width as the static marigolds: depth is read from speed and
     opacity, not from size, so the asset never looks rescaled */
  width: calc(var(--dw) * 0.029);
  height: auto;
  transform-origin: 50% 50%;
}

/* Promoted to their own layers only while their section is near the screen.
   Kept on permanently, the site's ~170 flowers were ~170 composited layers the
   browser had to commit on every frame of every scroll — the opening's included —
   whether or not a single one was in view. */
.flowing-flowers-layer.is-live .ff { will-change: transform; }

/* the static marigolds, stood down once the ambient layer has taken over
   (visibility, not display — the layer measures their positions) */
.wedding-hero[data-ambient="on"] .hero-bloom { visibility: hidden; }