/* Spectra: the arrival's first screen (2026-11-05, client brief): the live site's hero, rebuilt. The stacked lockup,
   then a wide video screen curved like a cinema screen seen from its centre, with "India's First / Multi-Sensory Museum"
   over it, then Book now and the cue to /visit/. Replaces the old dark lockup + ball pit on the landing (that scene
   still lives in css/finale.css + js/finale.js for /404). Video wiring: js/finale-video.js.

   The curve, the way the live site draws it: the screen is a plain rectangle, and two black ellipses (114.9% of the
   screen's width, 1263.942:104.006, the live SVG's own numbers) bite into its top and bottom edges. The screen clips
   them (overflow:hidden), so nothing spills sideways and nothing covers the lockup. border-radius:50% gives the
   browser's own anti-aliased ellipse edge at any width, no masks to rasterise. --fv-bite is how much of each
   ellipse's height sits inside the screen: 26% on desktop (corners stay square, the middle dips ~2.4% of the width,
   as on the live page), deeper on a phone so the bow still reads on a 358px screen. */

.fv{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;background:#000;color:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  --fv-w:min(1100px, 100%, calc((100svh - var(--head) - 360px) * 2.439));
  padding:calc(var(--head) + var(--sat) + 4px) calc(var(--gut) + var(--sar)) calc(18px + var(--sab)) calc(var(--gut) + var(--sal))}
/* the bottom dock (css/nav-dock.css) floats over the last 74px: keep the cue clear of it */
html.nav-dock .fv{padding-bottom:calc(84px + var(--sab))}

.fv-logo{display:block;width:clamp(108px,11.2vw,164px);height:auto;margin:0 0 clamp(12px,2.2vh,22px)}

.fv-screen{--fv-bite:26%;position:relative;width:var(--fv-w);aspect-ratio:1100/451;overflow:hidden;background:#0d0b16;
  display:grid;place-items:center;contain:paint;container-type:inline-size}
.fv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* a soft dark vignette, heavier at the rim, plus a light veil under the type */
.fv-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 78% at 50% 50%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.26) 55%,rgba(0,0,0,.62) 100%)}
.fv-arc{position:absolute;left:50%;width:114.9%;aspect-ratio:1263.942/104.006;background:#000;border-radius:50%;pointer-events:none;z-index:2}
.fv-arc-t{bottom:100%;transform:translate(-50%,var(--fv-bite))}
.fv-arc-b{top:100%;transform:translate(-50%,calc(var(--fv-bite) * -1))}

.fv-h{position:relative;z-index:1;margin:0;padding:0 6%;text-align:center;font-family:var(--sans);font-weight:600;
  font-size:6.6cqw;line-height:1.02;letter-spacing:-.012em;color:#fff;text-wrap:balance;
  text-shadow:0 1px 18px rgba(0,0,0,.18)}
.fv-h1,.fv-h2{display:block}
.fv-h2{display:inline-block;padding-bottom:.08em;   /* room for the y's tail inside the clipped box */
  background:linear-gradient(90deg,#fd6024 0%,#fca71a 22%,#fee7b6 46%,#fdf3e4 62%,#ece6dc 80%,#d2ccc3 100%);   /* council 2026-11-08 C17: warm end, no pink/violet */
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  filter:drop-shadow(0 1px 14px rgba(0,0,0,.28))}   /* the pale middle of the ramp still holds over the bright ball-pit shot */

.fv-strip{display:flex;justify-content:center;margin-top:clamp(18px,3.2vh,32px)}
.fv .fs-cta{min-height:48px;padding:0 28px;font-size:16px}
.fv .fn-cue{margin-top:clamp(10px,2.2vh,22px)}
.fv.is-live .fn-cue i{animation-play-state:running}

/* the plain page: a section like any other, not a forced full screen */
html:not(.fall) .fv{min-height:0;padding-top:clamp(64px,10vh,110px);border-top:1px solid var(--line);--fv-w:min(1100px,100%)}

@media (max-width:720px){
  /* council 2026-11-08 A2: a rounded 3:2 screen with a gentler bite (was 342/300 at 50%, which read as a square cushion) */
  .fv{--fv-w:min(100%, calc((100svh - var(--head) - 300px) * 1.5))}
  .fv-screen{--fv-bite:30%;aspect-ratio:3/2;border-radius:16px}
  .fv-h{font-size:10.6cqw;padding:0 5%;line-height:1.04}
  .fv-strip{width:100%}
  .fv .fs-cta{width:100%;min-height:52px}
  html:not(.fall) .fv{--fv-w:100%}
}
/* phone landscape: a wide, short screen, the lockup and the cue step aside */
@media (max-height:500px) and (orientation:landscape){
  .fv{--fv-w:min(100%, calc((100svh - var(--head) - 120px) * 2.439))}
  .fv-screen{--fv-bite:26%;aspect-ratio:1100/451}
  .fv-logo,.fv .fn-cue{display:none}
  .fv-strip{width:auto;margin-top:12px}
  .fv .fs-cta{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .fv .fn-cue i{animation:none}
}