/* ==========================================================================
   sections.css — the nine sections, in Figma order, at the mobile layout.
   Wider layouts are in responsive.css. Node ids reference frame 3300:14024.
   ========================================================================== */

/* ==========================================================================
   HERO — region 0 … 1436.7
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(74px, 5.830vw, 101px);   /* clears the overlaid nav */
}

/* Fills the hero at every width. It has to sit behind the whole stack, not
   just the top of it — the skyline's luminosity blend needs a backdrop the
   full height or it falls back to its raw sandstone colours. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  isolation: isolate;
  /* fades into the page's starfield instead of ending on a hard edge */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* bg 1 — 3300:14028, the damask ground */
/* image 35 — 3300:14029, starfield screened over the damask */
.hero__stars { mix-blend-mode: screen; }

/* Three.js atmospheric layer. Sits above the backdrop, below the artwork, and
   never takes the pointer. Added by js/three-scene.js. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__atmosphere.is-ready { opacity: 1; }
.hero__atmosphere canvas { width: 100%; height: 100%; display: block; }

/* 3320:16542 — y 187, 508 x 343 export (alpha restored) */
.hero__title {
  position: relative;
  width: clamp(200px, 29.40vw, 508px);
  margin: clamp(16px, 2.430vw, 42px) auto 0;
}
.hero__title img { width: 100%; height: auto; }

/* Group 102 — x -14.6, y 522.2, 1771.8 x 1199.
   No z-index here on purpose: it would open a stacking context and cut the
   skyline's blend off from the hero backdrop. */
.hero__artists {
  position: relative;
  aspect-ratio: 1771.8 / 1199;
}
.hero__artists img { position: absolute; height: auto; }
.hero__group { left: 0; top: 0; width: 99.88%; }        /* 3311:16538 */

/* Cutout (19) 1 — full-colour sandstone art that Figma renders as a
   desaturated blue-grey silhouette taking the navy's hue. */
.hero__skyline {
  left: 0.03%;
  top: 19.29%;
  width: 99.97%;
  mix-blend-mode: luminosity;
}

.hero__roses { position: relative; z-index: var(--z-raised); margin-top: -14%; }  /* 3300:16521 */
.hero__roses img { width: 100%; height: auto; }

/* Scroll cue, sitting on the hero's bottom edge. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vw, 34px);
  z-index: var(--z-raised);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(226, 226, 226, .65);
  pointer-events: none;
}
.hero__cue-line {
  width: 1px;
  height: clamp(28px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(226, 226, 226, .7), transparent);
}

/* ==========================================================================
   INTRO — 3300:16503 — region 1436.7 … 2045.6
   pill at +0, copy at +115, then 263.9 of air
   ========================================================================== */
.intro {
  position: relative;
  z-index: 6;
  padding: 0 var(--gutter) clamp(70px, 15.272vw, 263.9px);
}

.intro__decor { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
/* The busts are a wide-screen flourish; on phones they only crowd the copy. */
.intro__statue { display: none; position: absolute; height: auto; }
.intro__statue--l { left: 3.27%;  top: 24.6%; width: 15.09%; }   /* 3300:16422 */
.intro__statue--r { left: 95.52%; top: 8.0%;  width: 13.66%; }   /* 3300:16419 */

.cta-row {                              /* 3300:16504 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.intro__copy {
  width: 100%;
  max-width: 1133.2px;
  margin: clamp(22px, 2.604vw, 45px) auto 0;
  display: grid;
  gap: var(--spacing-sm);
}
.intro__copy .lede { max-width: 1012px; margin-inline: auto; }

/* ==========================================================================
   REELS — 3300:16515 — region 2045.6 … 3094.9
   heading at +0, stage at +124, then 98.5 of air
   ========================================================================== */
.reels {
  position: relative;
  padding: 0 var(--gutter) clamp(40px, 5.700vw, 98.5px);
}

/* Group 87 sits at y 1949.9 (above this section) and Group 86 at y 2421.7 */
.reels__floral {
  position: absolute;
  left: 0; right: 0;
  aspect-ratio: 1728 / 505;
  pointer-events: none;
  opacity: .9;
  z-index: 0;
}
.reels__floral--top { top: clamp(-56px, -5.538vw, 0px); background: url("../assets/images/floral-strip-a.png") center / 100% 100% no-repeat; }
.reels__floral--bot { top: clamp(150px, 21.765vw, 376px); background: url("../assets/images/floral-strip-b.png") center / 100% 100% no-repeat; }

.reels .h-section { position: relative; z-index: var(--z-content); }

.reels__stage {                         /* Group 108 — 915.9 x 826.8 */
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 916px;
  margin: clamp(24px, 2.894vw, 50px) auto 0;
  aspect-ratio: 915.9 / 826.8;
  display: grid;
  place-items: center;
}

.reel {
  position: absolute;
  border-radius: clamp(14px, 1.5vw, 26px);
  overflow: hidden;
}
.reel img { width: 100%; height: 100%; object-fit: cover; }

.reel--main {                           /* 3351:25 — 465.1 x 826.8 */
  z-index: 3;
  width: 50.78%;
  aspect-ratio: 465.1 / 826.8;
  background: #000;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
}

.reel--side { width: 58.18%; aspect-ratio: 532.9 / 796.6; opacity: .85; }
.reel--l { z-index: 1; left: 0;  transform-origin: bottom right; }
.reel--r { z-index: 2; right: 0; transform-origin: bottom left; }
/* The resting rake. GSAP animates --reel-x / --reel-rot around it so the
   scroll-driven spread and the Figma pose stay in one expression. */
.reel--l { transform: rotate(calc(-5deg + var(--reel-rot, 0deg))) translateX(calc(-6% + var(--reel-x, 0px))) scale(.94); }
.reel--r { transform: rotate(calc(5deg - var(--reel-rot, 0deg)))  translateX(calc(6% - var(--reel-x, 0px)))  scale(.94); }

/* ==========================================================================
   PASSES — 3300:16264 — region 3094.9 … 4384.5
   panel at +134 (h 904), then 251.6 of air
   ========================================================================== */
.passes {
  position: relative;
  padding: clamp(40px, 7.755vw, 134px) var(--gutter) clamp(90px, 14.560vw, 251.6px);
}

.passes__dholak {                       /* 3351:4 / 3351:5, clipped exports */
  position: absolute;
  bottom: clamp(20px, 4.5vw, 78px);
  width: 18%;                           /* 311 / 1728 */
  height: auto;
  pointer-events: none;
  z-index: 3;
}
.passes__dholak--l { left: 0; }
.passes__dholak--r { right: 0; }

.passes__star { position: absolute; height: auto; pointer-events: none; }
.passes__star--a { top: 0;                           left: 89.53%; width: 6.91%; }  /* Group 46 */
.passes__star--b { top: clamp(40px, 8.241vw, 142px); left: 8.03%;  width: 5.09%; }  /* Group 47 */
.passes__star--c { top: clamp(22px, 4.300vw, 74px);  left: 8.80%;  width: 2.59%; }  /* Group 48 */

.passes__panel {                        /* 3300:16265 — 1386 x 904 */
  position: relative;
  z-index: var(--z-content);
  width: var(--w-pass);
  max-width: 1386px;
  margin-inline: auto;
  padding: var(--spacing-md) clamp(16px, 5.556vw, 96px) 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-bg-card) 6.27%, var(--color-bg-card-0) 67.14%);
}

/* The stroke fades out with the panel's gradient instead of closing off at the
   bottom, which is how it reads on the Figma canvas. */
.passes__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: clamp(2px, 0.231vw, 4px) solid var(--color-accent);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 72%);
}

.tickets {
  margin-top: clamp(20px, 2.743vw, 47.4px);
  display: grid;
  gap: clamp(18px, 1.539vw, 26.6px);
  grid-template-columns: 1fr;
}

.passes__note {
  margin-top: clamp(26px, 8.400vw, 145px);
  padding-bottom: clamp(0px, 0.5vw, 8px);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: var(--text-note);
  line-height: 1.563;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--color-text);
}

/* ==========================================================================
   DIFFERENT — 3300:14069 — region 4384.5 … 5525
   arch at +0 (1931.4 x 1085.8 at x -106.7); headline at +359
   ========================================================================== */
.different { position: relative; padding-bottom: clamp(50px, 9.144vw, 158px); }

/* The node is 1931.4 wide at x -106.7, but the export already comes back
   clipped to the 1728 frame, so it sits flush. */
.different__arch {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: var(--z-decor);
}

.halo { position: absolute; height: auto; pointer-events: none; z-index: var(--z-decor); }
.halo--l { left: 2.52%;  top: clamp(166px, 27.81vw, 481px); width: 34.68%; }   /* 3300:14072 */
.halo--r { left: 97.48%; top: clamp(160px, 26.81vw, 463px); width: 36.74%; }   /* 3300:15149 */

.glint {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: var(--z-content);
  transform: scaleX(-1);
}
.glint--a { left: 32.74%; top: clamp(150px, 25.22vw, 436px); width: 3.20%; }
.glint--b { left: 72.41%; top: clamp(156px, 26.11vw, 451px); width: 3.20%; }
.glint--c { left: 44.62%; top: clamp(158px, 26.45vw, 457px); width: 1.17%; }

/* On phones the arch is a short ornamental band, so the copy clears it. From
   1024px it is tall enough to frame the copy inside it (Figma: headline +359). */
.different__inner {
  position: relative;
  z-index: var(--z-content);
  padding-inline: var(--gutter);
  padding-top: calc(100vw * 0.6285 * 0.92);   /* arch is 1086/1728 = 0.6285 of width */
}

.ringed {                               /* 3300:16253 / 16254 ellipses */
  position: relative;
  width: 100%;
  max-width: 990px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: clamp(24px, 3.009vw, 52px) 0;
}
.ringed__text { position: relative; z-index: var(--z-content); max-width: 604px; }
.ringed__ell {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* --ring-rot is the Figma rake; --ring-spin is what GSAP scrubs. */
  transform: translate(-50%, -50%) rotate(calc(var(--ring-rot) + var(--ring-spin, 0deg)));
}
.ringed__ell--a { --ring-rot: -3.7deg; }
.ringed__ell--b { --ring-rot: 5.31deg; }

.different__sub {
  position: relative;
  z-index: var(--z-content);
  margin-top: clamp(24px, 3.5vw, 60px);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: var(--text-display);
  letter-spacing: -0.4px;
  line-height: var(--leading-display);
  text-align: center;
  color: var(--color-text);
}

.triad {
  width: 100%;
  max-width: 1448px;
  margin: clamp(28px, 4.022vw, 69.5px) auto 0;
  display: grid;
  gap: clamp(28px, 2.5vw, 44px);
  grid-template-columns: 1fr;
}
.triad li { position: relative; text-align: center; }
.triad h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wdth" 100;
  font-weight: 700;
  font-size: var(--text-triad);
  line-height: var(--leading-triad);
  letter-spacing: -0.2px;
  color: #fff;
}
.triad p {
  margin-top: clamp(8px, 0.903vw, 15.6px);
  font-family: var(--font-body);
  font-variation-settings: "opsz" 28;
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  letter-spacing: -0.2px;
  color: #fff;
  max-width: 447px;
  margin-inline: auto;
}

/* ==========================================================================
   LINE-UP — 3300:16334 — region 5525 … 7528.3
   strip at +0, manjira at +141.4, heading at +533, rail at +783
   ========================================================================== */
 /* flow-root contains .lineup__manjira's 141.4px top margin. Without it that
   margin collapses out through the section, dragging the section box — and
   the decorative strip pinned to its top edge — 176px below the Figma
   position. Containing it moves the strip back up without shifting the
   manjira or anything below, since the margin simply moves inside the box. */
.lineup {
  position: relative;
  display: flow-root;
  padding-bottom: clamp(120px, 39.844vw, 688.5px);
}

.lineup__strip {                        /* Group 104 — clipped export */
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 1728 / 409;
  background: url("../assets/images/decor-strip-brings.png") center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: .9;
  z-index: 0;
}

.lineup__manjira {                      /* 3351:2 — 638.3 x 434.9 at y +141.4 */
  position: relative;
  z-index: var(--z-content);
  width: clamp(190px, 36.94vw, 638.3px);
  height: auto;
  margin: clamp(40px, 8.183vw, 141.4px) auto 0;
}

.lineup__head {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 1133px;
  margin: 20px auto 0;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--spacing-sm);
}

/* Below 1024 the rail is a native scroll-snap carousel; from 1024 up
   js/artists.js pins the section and scrubs the track horizontally. */
.rail {
  position: relative;
  z-index: var(--z-content);
  margin-top: clamp(26px, 5.093vw, 88px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2.569vw, 44.4px);    /* 455.6 pitch − 411.2 ring */
  padding-inline: clamp(var(--gutter), 5.787vw, 100px);
  width: max-content;
}

/* Pinned mode: the browser must stop scrolling the rail so GSAP owns x. */
.rail.is-pinned {
  overflow: hidden;
  scroll-snap-type: none;
  margin-top: 0;
}
.rail.is-pinned .rail__track { will-change: transform; }

/* Progress read-out for the pinned rail. */
.rail-progress {
  display: none;
  width: clamp(120px, 14vw, 240px);
  height: 2px;
  margin: clamp(20px, 2.5vw, 40px) auto 0;
  background: var(--color-hairline);
}
.rail-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--color-accent);
}

/* ==========================================================================
   GALLERY — 3300:16426 — region 7528.3 … 9437.6
   panel 1574 x 1909.3, padding 42, grid at +193
   ========================================================================== */
.gallery { position: relative; padding: 0 var(--gutter) clamp(0px, 6.366vw, 110px); }

.gallery__statue { position: absolute; height: auto; pointer-events: none; z-index: var(--z-decor); }
.gallery__statue--l { left: 0;  top: clamp(-186px, -18.627vw, 0px); width: 22.04%; }  /* 3300:16421 */
.gallery__statue--r { right: 0; top: clamp(-216px, -21.626vw, 0px); width: 19.26%; }  /* 3300:16418 */

.gallery__panel {
  position: relative;
  z-index: var(--z-content);
  width: var(--w-gallery);
  max-width: 1574px;
  margin-inline: auto;
  padding: clamp(20px, 2.431vw, 42px);
  border: 1px dashed var(--color-hairline-lt);
  border-radius: clamp(16px, 1.74vw, 30px);
  background: rgba(4, 13, 45, .34);
  backdrop-filter: blur(2px);
}

.grid {
  margin-top: clamp(20px, 4.456vw, 77px);
  display: grid;
  gap: clamp(14px, 1.615vw, 27.9px);
  grid-template-columns: 1fr;
}
.grid__col { display: grid; gap: clamp(14px, 1.615vw, 27.9px); align-content: start; }

/* ==========================================================================
   FAQ — 3300:16437 — region 9437.6 … 11232.6
   matkas at +0, heading at +298.2, panel at +399.2, then 475.8 of air
   ========================================================================== */
.faq {
  position: relative;
  padding: clamp(90px, 17.257vw, 298.2px) var(--gutter) clamp(120px, 27.535vw, 475.8px);
}

.faq__matka {                           /* Group 107 — clipped export */
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 1728 / 299;
  background: url("../assets/images/matka-pair.png") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: var(--z-decor);
}

.faq .h-section { position: relative; z-index: var(--z-content); }

.faq__panel {                           /* 3300:16440 — 1286 x 920 */
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 1286px;
  margin: clamp(20px, 1.563vw, 27px) auto 0;
  padding: var(--spacing-md);
  background: var(--color-bg-panel);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   FOOTER — 3300:16478 — 1728 x 335.6
   ========================================================================== */
.footer {
  position: relative;
  background: var(--color-bg-deep);
  padding: clamp(26px, 2.584vw, 44.65px) var(--gutter) clamp(20px, 2vw, 34px);
}

.footer__top { display: grid; gap: clamp(26px, 2.5vw, 44px); justify-items: center; }
.footer__logo img { width: clamp(120px, 10vw, 172.8px); height: auto; }

/* "Get your sponsored title" is too wide to sit three-up on a phone. */
.footer__cols {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-foot);
}
.footer__cols h2 {
  font-family: var(--font-body);
  font-variation-settings: "opsz" 24;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.2;
}
.footer__cols ul { margin-top: clamp(12px, 1.377vw, 23.8px); display: grid; gap: clamp(6px, 0.551vw, 9.5px); }
.footer__cols a { font-weight: 400; opacity: .92; }
.footer__cols a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom { margin-top: clamp(24px, 4vw, 66px); display: grid; gap: 16px; justify-items: center; }

.footer__copy {
  font-family: var(--font-body);
  font-variation-settings: "opsz" 20;
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.188;
  text-align: center;
  color: var(--color-text-foot);
}