/* Site 1: the drive is the site. Full-screen animation, information as pop-ups. */
.section-view{display:contents}
html,body{min-height:100%;height:auto;overflow-x:clip;overflow-y:visible}
.v1drive{position:relative;background:#171a20;min-height:calc(100svh + var(--journey-distance,9095px));padding-top:0}
.v1stage{position:fixed;inset:0;height:100vh;height:100svh;z-index:1;overflow:hidden;background:#171a20}
.v1stage > #jcanvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.2s ease .15s}
.v1drive.is-3d #jcanvas{opacity:1}
.jload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(2.6rem,7vw,5.5rem);font-weight:600;letter-spacing:-.04em;color:var(--text);opacity:1;transition:opacity 1s ease;animation:jloadpulse 2.6s ease-in-out infinite}
.v1drive.is-3d .jload{opacity:0;animation:none}
@keyframes jloadpulse{50%{opacity:.55}}
.jhud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(62px + 14px) clamp(16px,3vw,30px) 14px;z-index:2}
/* the module's identity: an eyebrow, a big name, and the scene under it, so it is obvious at a
   glance which module is on screen (the old one-line title was easy to miss) */
.jhud__id{display:grid;gap:5px;justify-items:start;max-width:min(60vw,640px)}
.jhud__id .n{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.jhud__id .n::before{content:'Module '}
.jhud__id .t{font-weight:600;font-size:clamp(2rem,3.8vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.55),0 6px 24px rgba(0,0,0,.35)}
.jhud__id .s{font-size:clamp(.9rem,1.1vw,1.05rem);color:var(--text2);margin-top:1px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.jhud__tel{position:absolute;top:calc(62px + 14px);right:clamp(16px,3vw,30px);display:grid;gap:4px;font-size:.78rem;margin:0}
.jhud__tel div{display:flex;gap:10px;justify-content:flex-end}
.jhud__tel dt{color:var(--muted)}
.jhud__tel dd{margin:0;color:var(--text2);font-variant-numeric:tabular-nums}
.jhud.swap .jhud__id,.jhud.swap .jhud__tel{animation:hudswap1 .45s cubic-bezier(.2,.7,.2,1)}
@keyframes hudswap1{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.drive__cue{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);font-size:.8rem;color:var(--muted);z-index:3;pointer-events:none;transition:opacity .5s}
.drive__cue.is-gone{opacity:0}
/* short viewports: back to one compact line so the section panels keep their room */
@media (max-height:600px){
.jhud__id{display:flex;align-items:baseline;gap:12px;max-width:none}
.jhud__id .n{font-size:1.05rem;font-weight:400;letter-spacing:0;text-transform:none}
.jhud__id .n::before{content:''}
.jhud__id .t{font-size:1.55rem;letter-spacing:-.02em;line-height:1.2}
.jhud__id .s{font-size:1rem;margin-top:0}
}
@media (max-width:900px){
.vseg{height:150vh}
.jhud__tel{display:none}
.drive__cue{bottom:40px}
}
@media (prefers-reduced-motion:reduce){
.jload{animation:none}
.jhud.swap .jhud__id,.jhud.swap .jhud__tel{animation:none}
}
/* without JS the cards stack as a plain page under the poster */
html:not(.js) .v1stage{position:static;height:56vh}
html:not(.js) .v1track{display:none}
/* and the intro card carries its own "Scroll to drive", so the floating one below it was a
   second copy of the same line at stop 0 */
.v1stage:has([data-section="home"] .stageline--intro.is-on) > .drive__cue{opacity:0}
/* the whole stage kicks once when it catches */
#jcanvas.shake{animation:ignshake .5s ease-out}
@keyframes ignshake{
  0%{transform:translate3d(0,0,0)}18%{transform:translate3d(0,3px,0)}
  38%{transform:translate3d(-2px,-2px,0)}62%{transform:translate3d(2px,1px,0)}
  82%{transform:translate3d(-1px,0,0)}100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
#jcanvas.shake{animation:none}
}