/* Spectra: Plan your visit. Reads css/site.css for tokens, fonts, header, focus ring and the Book/CTA button.
   Concept: the page opens with the live line (the real clock in Ahmedabad), then the day line (the opening hours as
   one string of light), then "Getting here": three illustrated scenes played by scroll (the plane lands at SVPI, the
   Blue Line pulls into Thaltej Gam, a cab takes the last 2 km to Spectra), scenes in visit/trip-assets/, played by
   visit/js/trip.js. Everything else (wear white, groups, dinner) follows as plain stacked sections.
   Book itself also lives in the fixed header, see css/site.css .book. */

#main{padding-top:calc(var(--head) + var(--sat) + 8px)}

/* ---------- hero: kicker h1, the big live sentence ---------- */
.pv-hero{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,5.5vh,56px) calc(var(--gut) + var(--sar)) clamp(28px,5vh,48px) calc(var(--gut) + var(--sal))}
.pv-kicker{margin:0 0 clamp(14px,2.4vh,22px);color:var(--soft)}

.pv-live{margin:0;color:var(--ink);font-family:var(--serif);font-stretch:var(--wide);font-weight:800;
  font-size:var(--fs-1);line-height:1.08;letter-spacing:-.005em;max-width:20ch;
  font-variant-numeric:tabular-nums;min-height:4.4em}   /* up to four lines on a phone (Hurry, the last slot is at ...) */
@media (min-width:900px){ .pv-live{min-height:2.2em} }

/* ---------- stacked plain sections: wear white, groups, book ---------- */
.pv-block{max-width:var(--wrap);margin:0 auto;padding:var(--sec-y) calc(var(--gut) + var(--sar)) var(--sec-y) calc(var(--gut) + var(--sal));border-top:1px solid var(--line)}
.pv-h{margin:0 0 clamp(14px,2.4vh,22px);color:var(--soft)}
.pv-line2{margin:0;font-size:17px;line-height:1.5;max-width:38ch;color:var(--soft)}
.pv-line2 a{text-decoration:underline;text-decoration-color:rgba(252,252,252,.45);text-underline-offset:3px;color:var(--ink)}
@media (hover:hover){.pv-line2 a:hover{text-decoration-color:currentColor}}
.pv-fine{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--soft);max-width:44ch}

/* wear white: hovering projects the rooms' colour behind the line, like light on white cloth */
.pv-wear{position:relative;isolation:isolate;overflow:hidden}
.pv-wear-l{margin:0;font-size:var(--fs-2);font-weight:300;line-height:1.1;letter-spacing:-.02em;color:var(--soft);position:relative;transition:color .5s var(--ease)}
@media (min-width:760px){.pv-wear-l{white-space:nowrap}}
/* "white." is a white shirt under a projector: on first view one band of the room's light passes across the word and it
   settles white again; hovering the block lets the light keep drifting across it. */
.pv-white{color:var(--ink);font-weight:400;background:linear-gradient(100deg,#fcfcfc 0 38%,#3045e0 44%,#9c92f2 47%,#cf99d3 50%,#fce3a3 53%,#fe9a04 56%,#fcfcfc 62% 100%);
  background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pv-wear.on .pv-white{animation:pv-beam 2.6s cubic-bezier(.45,.05,.25,1) .3s both}
@media (hover:hover){.pv-wear:hover .pv-white{animation:pv-beam 5.5s ease-in-out infinite alternate}}
@keyframes pv-beam{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pv-white{animation:none!important;background:none;-webkit-text-fill-color:currentColor}}
.pv-wear::before{content:"";position:absolute;inset:-60% -20%;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(38% 60% at 18% 30%, rgba(251,26,8,.5), transparent 70%),
    radial-gradient(34% 55% at 78% 24%, rgba(254,154,4,.45), transparent 70%),
    radial-gradient(40% 60% at 62% 78%, rgba(207,153,211,.45), transparent 72%),
    radial-gradient(36% 58% at 12% 82%, rgba(48,69,224,.45), transparent 70%);
  background-size:180% 180%;filter:blur(46px) saturate(1.1);
  transition:opacity .55s var(--ease)}
@media (hover:hover){
  .pv-wear:hover::before{opacity:.6;animation:pv-project 7s var(--ease) infinite}
  .pv-wear:hover .pv-wear-l{color:var(--ink)}
}
@keyframes pv-project{
  0%{background-position:0% 20%, 100% 0%, 60% 100%, 0% 100%}
  50%{background-position:30% 70%, 70% 60%, 20% 40%, 60% 20%}
  100%{background-position:0% 20%, 100% 0%, 60% 100%, 0% 100%}
}

.pv-bigbook{margin-top:20px;min-height:56px;padding:0 32px;font-size:18px}

/* ---------- the eight rooms: a quiet admission-board list, no cards, no numbers ---------- */
.pv-roomlist{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.pv-roomlist li{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,1.45fr);gap:10px 32px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--line)}
.pv-roomlist h3{margin:0;font-family:var(--serif);font-stretch:var(--wide);text-transform:uppercase;font-weight:800;
  font-size:clamp(20px,2.1vw,28px);line-height:1.05;letter-spacing:.005em;color:var(--ink)}
.pv-roomlist p{margin:0;font-size:17px;line-height:1.5;color:var(--soft);max-width:46ch}

/* ---------- footer (same component as the landing page) ---------- */

/* ---------- magnetic Book / CTA: visit/js/visit.js eases --mx/--my toward the cursor within a small radius.
   Off entirely on touch or reduced motion (js/visit.js never sets the properties there, so this is a no-op). ---------- */
/* 2026-10-06: magnet removed (Kirtan: Book now must not move with the cursor). No element carries data-magnet any more. */

@media (max-width:720px){
  .pv-roomlist li{grid-template-columns:1fr;gap:6px;padding:18px 0}
}

/* ---------- 2026-09-30: the day line (from option B, made to move) ----------
   One string of light, 11 AM to the 9:30 PM last slot, in the brand ramp. The hours already gone sit dimmed; a pulse of light
   runs from "now" toward close. Hover (or drag on a phone) and the string lifts toward you like a plucked wire,
   a needle reads the time under your finger, and the line below says what arriving then means. Leave and it
   wobbles back to rest. Drawn on a canvas by js/visit.js; the text line carries all the facts for screen readers. */
.pv-day{border-top:1px solid var(--line)}
.pv-day-inner{max-width:var(--wrap);margin:0 auto;padding:var(--sec-y) calc(var(--gut) + var(--sar)) var(--sec-y) calc(var(--gut) + var(--sal));display:grid;gap:18px}
.pv-line{position:relative;height:148px;touch-action:pan-y pinch-zoom;cursor:crosshair;-webkit-user-select:none;user-select:none}
.pv-line canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pv-ticks{position:absolute;left:0;right:0;top:114px;height:20px;pointer-events:none}
.pv-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--dim);transition:color .2s var(--ease),transform .35s var(--ease)}
.pv-ticks span:first-child{transform:none}
.pv-ticks span:last-child{transform:translateX(-100%)}
.pv-ticks span.is-near{color:var(--ink)}
.pv-tip{position:absolute;top:0;left:0;transform:translate(-50%,0);padding:4px 9px;background:var(--ink);color:#000;
  font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:12px;letter-spacing:.06em;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.pv-line.is-hot .pv-tip{opacity:1}
.pv-state{margin:0;font-size:clamp(18px,1.9vw,24px);line-height:1.35;min-height:2.7em}
.pv-state b{font-weight:400;color:var(--ink)}
.pv-state span:not(.pv-dot){color:var(--soft)}
.pv-dot{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:#9fe0a8;vertical-align:.07em;margin-right:.55em}
.pv-state b{margin-right:.3em}
.pv-day.is-shut .pv-dot{background:var(--dim)}
@media (prefers-reduced-motion:no-preference){ .pv-day:not(.is-shut) .pv-dot{animation:pv-dot 2.4s var(--ease) infinite} }
@keyframes pv-dot{0%{box-shadow:0 0 0 0 rgba(159,224,168,.5)}80%,100%{box-shadow:0 0 0 9px rgba(159,224,168,0)}}
/* the last hour before the last slot: the dot warms to amber and breathes faster, the last tick glows. Calm, not an alarm. */
/* the quarter hour before opening: the dot brightens and breathes a little quicker */
.pv-day.is-soon .pv-dot{background:#b9f0c0}
@media (prefers-reduced-motion:no-preference){ .pv-day.is-soon .pv-dot{animation:pv-dot 1.7s var(--ease) infinite} }
.pv-day.is-hurry .pv-dot{background:#fe9a04}
@media (prefers-reduced-motion:no-preference){ .pv-day.is-hurry .pv-dot{animation:pv-dot-h 1.3s var(--ease) infinite} }
@keyframes pv-dot-h{0%{box-shadow:0 0 0 0 rgba(254,154,4,.55)}80%,100%{box-shadow:0 0 0 10px rgba(254,154,4,0)}}
.pv-day.is-hurry .pv-ticks span:last-child{color:#fe9a04;text-shadow:0 0 14px rgba(254,154,4,.55)}

/* ---------- getting here: the heading, then the journey (below), then the address and Google Maps ---------- */
.pv-way{border-top:1px solid var(--line)}
.pv-way-inner{max-width:var(--wrap);margin:0 auto;padding:var(--sec-y) calc(var(--gut) + var(--sar)) var(--sec-y) calc(var(--gut) + var(--sal))}
.pv-shead{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,22px);justify-items:start;margin-bottom:clamp(28px,4.5vw,52px)}
.pv-way-h{margin:0;font-weight:300;font-size:var(--fs-2);line-height:1.05;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.pv-lead{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--soft);max-width:44ch}
.pv-arrive{display:grid;gap:22px}
.pv-arrive dl{margin:0;display:grid}
.pv-arrive dl>div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding-block:14px;border-top:1px solid var(--line)}
.pv-arrive dt{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--dim);padding-top:.15em}
.pv-arrive dd{margin:0;color:var(--soft);line-height:1.5}
.pv-gmaps{justify-self:start;min-height:44px;padding:0 22px;font-size:14px}
@media (max-width:860px){ .pv-shead{grid-template-columns:1fr} }

/* ---------- the eight rooms: hover a name and the room itself peeks out beside the cursor ---------- */
.pv-rooms{position:relative}
.pv-roomlist li{transition:padding-left .35s var(--ease)}
.pv-roomlist h3{transition:color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pv-roomlist li:hover{padding-left:14px}
  .pv-roomlist li:hover h3{color:var(--rc,var(--ink))}
}
.pv-peek{position:fixed;left:0;top:0;width:260px;aspect-ratio:4/3;pointer-events:none;z-index:40;overflow:hidden;
  opacity:0;transform:translate3d(var(--px,0),var(--py,0),0) scale(.9) rotate(var(--pr,0deg));transition:opacity .25s var(--ease),transform .12s linear;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pv-peek.is-on{opacity:1;transform:translate3d(var(--px,0),var(--py,0),0) scale(1) rotate(var(--pr,0deg))}
.pv-peek img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){ .pv-peek{display:none} }

/* groups block: the question, one line, the Groups button, then call/write in small type, over a faint spectrum glow.
   (the "Still deciding?" column was removed 2026-11-06; on desktop the block is two columns of its own, below.) */
.pv-grp{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(48px,9vh,96px);padding-bottom:clamp(48px,9vh,96px)}
.pv-grp::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;top:-4%;width:min(680px,92%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(48,69,224,.22),rgba(252,227,163,.08) 45%,rgba(0,0,0,0));filter:blur(20px)}
.pv-grp-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,8vh,72px) clamp(40px,7vw,112px);margin-top:clamp(18px,3vh,28px)}
.pv-grp-big{margin:0;max-width:14ch;font-family:var(--sans);font-weight:300;font-size:var(--fs-2);line-height:1.04;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pv-grp-p{margin:clamp(18px,3vh,26px) 0 0;max-width:40ch;color:var(--soft);font-size:clamp(17px,1.5vw,19px);line-height:1.5}
.pv-grp-cta{margin-top:clamp(24px,4vh,36px)}
.pv-grp-c{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;color:var(--soft);font-size:16px}
.pv-grp-cta + .pv-grp-c{margin-top:clamp(22px,3.6vh,32px)}
/* desktop: with the "Still deciding?" column gone, the block is balanced as two columns of its own:
   the question on the left (as before), and the line, the Groups button and call/write on the right, top-aligned with it.
   The spanning question's extra height goes to the last (1fr) row, so the right column stays tight. */
@media (min-width:900px){
  .pv-grp-a{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(40px,7vw,112px);align-items:start}
  .pv-grp-big{grid-column:1;grid-row:1 / -1}
  .pv-grp-p,.pv-grp-cta,.pv-grp-c{grid-column:2}
  .pv-grp-p{margin-top:.55em}
  .pv-grp-cta{justify-self:start}
}
.pv-grp-ck{flex:0 0 4.2em;color:var(--dim);font-size:14px}
.pv-grp-or{color:var(--dim)}
.pv-grp-c a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.35);text-underline-offset:4px}
@media (hover:hover){.pv-grp-c a:hover{text-decoration-color:currentColor}}
.pv-grp .pv-fine{margin-top:clamp(40px,7vh,64px)}

/* ---------- getting here: the journey (2026-11-05; one continuous world since late evening) ----------
   One world, one camera (visit/js/journey.js, layers styled in css/journey.css): the airport, the city, the viaduct,
   Thaltej Gam, the street and Spectra, laid end to end and travelled by scroll.
   Default (no script, reduced motion): three stills along the journey (trip-assets/journey/still-*.webp) with their text.
   journey.js adds .is-scrub when motion is fine: the section becomes a tall track and the stage pins.
   Caption: upper left on desktop, under the picture on phones. */
.pv-way-end{padding-top:clamp(28px,5vh,56px)}
.pv-trip{max-width:var(--wrap);margin:0 auto;padding:0 calc(var(--gut) + var(--sar)) 0 calc(var(--gut) + var(--sal))}
.pv-trip-view{display:none}
.pv-trip-legs{list-style:none;margin:0;padding:0;counter-reset:leg;display:grid;gap:clamp(36px,5vw,48px) clamp(20px,2.4vw,32px)}
@media (min-width:900px){ .pv-trip-legs{grid-template-columns:repeat(3,minmax(0,1fr))} .tl-end{grid-column:1 / -1} }
.tl{display:grid;align-content:start;gap:18px}
.tl:not(.tl-end){counter-increment:leg}
.tl-pic{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:#05060a}
@media (max-width:719px){ .tl-pic{aspect-ratio:4 / 3} }
.tl-txt{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding-top:16px;border-top:1px solid var(--line)}
.tl-txt::before{content:counter(leg);grid-row:span 2;font-size:34px;font-weight:300;line-height:.9;color:var(--c,var(--dim))}
.tl-end .tl-txt::before{content:""}
.tl b{display:block;font-weight:400;font-size:clamp(18px,1.6vw,21px);line-height:1.3;color:var(--ink);text-wrap:balance}
.tl-txt>span{display:block;color:var(--soft);line-height:1.5;max-width:38ch}
.tl-dir{padding:13px 0;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:4px;white-space:nowrap}
@media (hover:hover){.tl-dir:hover{text-decoration-color:currentColor}}
.tl-dir:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pv-trip-bar{display:none}

/* scrubbed: a tall track, a pinned stage, the scenes stacked, one caption at a time */
.pv-trip.is-scrub{max-width:none;padding:0;height:480svh}
@media (max-width:719px){ .pv-trip.is-scrub{height:420svh} }
.is-scrub .pv-trip-stage{position:sticky;top:0;height:100svh;overflow:hidden;contain:paint}
.is-scrub .pv-trip-view{display:block;position:absolute;inset:0;overflow:hidden;background:#05060a}
@media (max-width:719px){
  /* phones: a picture about 4:5 under the header (shows ~750 of the scenes' 1600 units, enough for the plane), caption below */
  .is-scrub .pv-trip-view{inset:auto 0 auto 0;top:calc(var(--head) + var(--sat));height:min(52svh,118vw)}
}
/* desktop: a soft shade in the caption corner, so the text never sits on a bright light */
@media (min-width:720px){
  .pv-trip-view::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 0% 0%,rgba(3,4,8,.62),rgba(3,4,8,0) 70%)}
}
.is-scrub .tl-pic{display:none}
.is-scrub .pv-trip-legs{display:block;position:absolute;left:0;right:0;top:calc(var(--head) + var(--sat) + clamp(28px,5vh,56px));max-width:var(--wrap);margin:0 auto;pointer-events:none}
.is-scrub .tl{position:absolute;top:0;left:calc(var(--gut) + var(--sal));right:calc(var(--gut) + var(--sar));max-width:32rem;opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.is-scrub .tl.is-on{opacity:1;transform:none;pointer-events:auto;transition:opacity .55s var(--ease) .08s,transform .7s var(--ease) .08s}
/* hidden captions stay in the accessibility tree (all four legs read out); only the link is taken out of the tab order */
.is-scrub .tl:not(.is-on) .tl-dir{visibility:hidden}
.is-scrub .tl-txt{border-top:0;padding-top:0}
.is-scrub .tl b{font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.01em;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.is-scrub .tl-txt>span{font-size:clamp(16px,1.35vw,18px);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.is-scrub .pv-trip-bar{display:block;position:absolute;top:calc(var(--head) + var(--sat) + clamp(8px,2vh,22px));left:max(calc(var(--gut) + var(--sal)),calc((100% - 1200px) / 2 + var(--gut)));width:120px;height:1px;background:rgba(252,252,252,.18)}
.pv-trip-bar i{position:absolute;inset:0;background:var(--spectrum);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:719px){
  .is-scrub .pv-trip-legs{top:auto;bottom:calc(var(--sab) + 92px);height:0}
  .is-scrub .tl{top:auto;bottom:0}
  .is-scrub .pv-trip-bar{top:calc(var(--head) + var(--sat) + min(52svh,118vw) + 14px)}
}