/* 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 a two-column orientation
   block: a 24-hour light ring on the left (opening hours as a lit arc, a "now" marker, a last-slot tick,
   the brand ramp glowing across the open hours) and a real map of Thaltej/Science City Road on the right:
   a static image built from real OpenStreetMap road data (see tools/build_visit_map.py) under an inline
   SVG overlay carrying the real routed paths and pins. Tapping a transport button draws an animated route,
   real road geometry from the OSRM router, from that point to the pin. Everything else (facts, wear white, groups, book, the eight
   rooms) 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:1200px;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:118%;font-weight:800;
  font-size:clamp(24px,4vw,46px);line-height:1.14;letter-spacing:-.005em;max-width:29ch;
  font-variant-numeric:tabular-nums;min-height:4.6em}
@media (min-width:900px){ .pv-live{min-height:3.5em} }

/* ---------- stacked plain sections: wear white, groups, book ---------- */
.pv-block{max-width:1200px;margin:0 auto;padding:clamp(32px,5.5vh,56px) calc(var(--gut) + var(--sar)) clamp(32px,5.5vh,56px) 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:clamp(22px,2.4vw,30px);font-weight:300;line-height:1.3;color:var(--soft);max-width:22ch;position:relative;transition:color .5s var(--ease)}
.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:125%;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) ---------- */
.sfoot .sf-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}

/* ---------- 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). ---------- */
[data-magnet]{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
[data-magnet]:active{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.97)}

@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 11 PM, 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:1200px;margin:0 auto;padding:clamp(28px,5vh,52px) calc(var(--gut) + var(--sar)) clamp(32px,5.5vh,60px) calc(var(--gut) + var(--sal));display:grid;gap:18px}
.pv-line{position:relative;height:118px;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:84px;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:.2em;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 long exposure map (option B's, in this page's type and tokens) ---------- */
:root{--pv-car:#f3c98a;--pv-air:#a9c8ff;--pv-metro:#7fe3f2}
.pv-way{border-top:1px solid var(--line)}
.pv-way-inner{max-width:1200px;margin:0 auto;padding:clamp(40px,7vh,80px) calc(var(--gut) + var(--sar)) clamp(40px,7vh,80px) 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:clamp(32px,4.6vw,64px);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-legend{display:flex;flex-wrap:wrap;gap:4px 28px;margin-bottom:16px}
.pv-chip{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;font:400 16px var(--sans);transition:color .15s var(--ease)}
.pv-chip i{width:26px;height:3px;background:var(--c);opacity:.35;transition:opacity .15s var(--ease),box-shadow .3s var(--ease),width .3s var(--ease)}
@media (hover:hover){.pv-chip:hover{color:var(--soft)}} @media (hover:hover){.pv-chip:hover i{width:36px}}
.pv-chip[aria-pressed="true"]{color:var(--ink)} .pv-chip[aria-pressed="true"] i{opacity:1;box-shadow:0 0 12px var(--c)}
.pv-chip:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pv-map{position:relative;overflow:hidden;background:#040406;border:1px solid var(--line)}
.pv-map svg{display:block;width:100%;height:auto}
.pv-map .bm-street{stroke:#15171d;stroke-width:.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pv-map .bm-park{fill:#08140d;stroke:none}
.pv-map .bm-water{fill:#04070e;stroke:#0f1726;stroke-width:.8}
.pv-map .bm-river{fill:none;stroke:#0a1120;stroke-width:1.4}
.pv-map .r3{stroke:#20232c;stroke-width:.9;fill:none}
.pv-map .r2{stroke:#2e323d;stroke-width:1.3;fill:none}
.pv-map .r1{stroke:#4d5361;stroke-width:2.2;fill:none}
.pv-map .bm-area{fill:#4a4f5c;font-size:10px;letter-spacing:.2em;pointer-events:none}
.pv-map .bm-area.t1{font-size:13px;fill:#5b6170}
.pv-map .bm-area.t3{fill:#2f3d5c;font-size:11px;letter-spacing:.3em}
.pv-map .mb{stroke:#3a8ba1;stroke-width:2.4;fill:none;stroke-dasharray:1 5;stroke-linecap:round}
.pv-map .mr{stroke:#6e2d3f;stroke-width:2;fill:none;stroke-dasharray:1 5;stroke-linecap:round}
.pv-map .rw{stroke:#3a3f4c;stroke-width:5;fill:none}
.pv-map .trail{fill:none;stroke:var(--c);stroke-linecap:round;stroke-linejoin:round}
.pv-map .trail.glow{stroke-width:9;opacity:.35;filter:url(#pvBlur)}
.pv-map .trail.core{stroke-width:2.6}
.pv-map .trail.ghost{opacity:.2}
.pv-map .trail.metroline{stroke-dasharray:2 6;opacity:.55}
.pv-map .trail.metroline.glow{opacity:.25}
.pv-map .spark{fill:#fff;filter:drop-shadow(0 0 5px #fff)}
.pv-map text{font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:11px;letter-spacing:.12em;fill:var(--dim);text-transform:uppercase}
.pv-map .pinlabel{fill:var(--ink);font-size:13px}
.pv-map .bloom{transition:r .8s var(--ease),opacity .8s var(--ease)}
.pv-credit{position:absolute;left:14px;bottom:10px;margin:0;font-family:var(--mono);font-size:10.5px;color:#5d606b}
.pv-route{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:clamp(28px,4vw,44px);align-items:start}
.pv-legs{list-style:none;margin:0;padding:0;counter-reset:leg}
.pv-legs li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding-block:18px;border-top:1px solid var(--line);counter-increment:leg}
.pv-legs li::before{content:counter(leg);font-size:34px;font-weight:300;line-height:.9;color:var(--c,var(--dim))}
.pv-legs b{display:block;font-weight:400;font-size:18px;color:var(--ink)}
.pv-legs span{display:block;color:var(--soft);line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .pv-legs li{animation:pv-leg .5s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
}
@keyframes pv-leg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.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(--mono);font-stretch:62%;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:.3em}
.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,.pv-route{grid-template-columns:1fr} }
@media (max-width:700px){ .pv-map{margin-inline:calc((var(--gut) + var(--sal)) * -1);border-inline:0} }

/* ---------- 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} }

/* ---- route animation (tools/build_routes.py geometry, camera in visit.js). --k = camera zoom, keeps strokes constant on screen ---- */
.pv-map .trail.glow{stroke-width:calc(9px * var(--k,1));opacity:.35;filter:url(#pvRouteGlow)}
.pv-map .trail.core{stroke-width:calc(2.6px * var(--k,1))}
.pv-map .trail.spine.glow{stroke-width:calc(10px * var(--k,1));opacity:.3}
.pv-map .trail.spine.core{stroke-width:calc(2px * var(--k,1));opacity:.75}
.pv-map .trail.mline.glow{stroke-width:calc(10px * var(--k,1));opacity:.4}
.pv-map .trail.mline.core{stroke-width:calc(2.8px * var(--k,1))}
.pv-map .trail.autoleg.glow{stroke-width:calc(7px * var(--k,1));opacity:.22}
.pv-map .trail.autoleg.core{stroke-width:calc(2.4px * var(--k,1));stroke-linecap:butt}
.pv-map .trail.comet{stroke:#fff;stroke-width:calc(2px * var(--k,1));filter:none}
.pv-map .stn{fill:#05060a;stroke:var(--c);transition:opacity .4s var(--ease)}
.pv-map .rlabel{fill:var(--soft);transition:opacity .5s var(--ease)}
.pv-map .spark{filter:none}
/* zoomed in, the base map's lines soften instead of ballooning (base values kept: r1 2.2, r2 1.3, r3 .9, metro dots 2.4) */
.pv-map .r1{stroke-width:calc(2.2px * (.35 + .65 * var(--k,1)))}
.pv-map .r2{stroke-width:calc(1.3px * (.35 + .65 * var(--k,1)))}
.pv-map .r3{stroke-width:calc(.9px * (.35 + .65 * var(--k,1)))}
.pv-map .mb{stroke-width:calc(2.4px * var(--k,1));stroke-dasharray:calc(1px * var(--k,1)) calc(5px * var(--k,1))}
.pv-map .mr{stroke-width:calc(2px * var(--k,1));stroke-dasharray:calc(1px * var(--k,1)) calc(5px * var(--k,1))}
/* phone: the credit moves under the map so it never sits on a label when the camera zooms in */
@media (max-width:700px){ .pv-credit{position:static;padding:8px calc(var(--gut) + var(--sal)) 0;background:#000} }

/* keep the map clean: each option shows only its own lines (Kirtan 2026-09-30) */
.pv-map .metro-base,.pv-map .air-base{transition:opacity .5s var(--ease)}
.pv-map[data-mode="airport"] .metro-base{opacity:0}
.pv-map[data-mode="gam"] .air-base,.pv-map[data-mode="gam"] .mr,.pv-map[data-mode="gam"] .metro-base{opacity:0}
.pv-map .rstop{fill:var(--pv-metro);font-weight:800;paint-order:stroke;stroke:#040406;stroke-width:.3em;stroke-linejoin:round}
.pv-map .rstn{fill:var(--ink);font-weight:700;paint-order:stroke;stroke:#040406;stroke-width:.3em;stroke-linejoin:round}
.pv-map .rstop-sub{fill:var(--ink);font-weight:700;letter-spacing:.14em;paint-order:stroke;stroke:#040406;stroke-width:.3em;stroke-linejoin:round}

/* directions control: top-right of the map, and the pin itself is a link to the same place */
.pv-dir{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;background:rgba(0,0,0,.72);color:var(--ink);border:1px solid #3a3a3e;text-decoration:none;font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s var(--ease),background .15s var(--ease)}
.pv-map .pv-dir svg{width:16px;height:16px;flex:none;transform:rotate(18deg);transition:transform .25s var(--ease)}
.pv-dir:active{background:rgba(40,40,44,.85)}
.pv-dir:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.pv-dir:hover{border-color:var(--ink);background:#000}.pv-dir:hover svg{transform:rotate(0)}}
.pv-map .pin-link{cursor:pointer;outline:none}
.pv-map .pin-link:focus-visible .pin-dot{stroke:#fff;stroke-width:2;stroke-opacity:.9}
@media (hover:hover){.pv-map .pin-link:hover .pinlabel{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:700px){.pv-dir{top:10px;right:10px}}