/* Spectra: Plan your visit, "Getting here" on phones, the frame-sequence player (visit/seq/player.js).
   Every rule is scoped to .is-seq / html.seq-phone, which only player.js adds, and only on phones with motion allowed.
   Desktop, landscape phones, reduced motion and no-JS never match any of this.

   The stage is sticky and as tall as the LARGE viewport (player.js writes --seq-h in px from a 100lvh probe), so the
   mobile URL bar showing or hiding never resizes or moves the picture; it just covers or uncovers its bottom edge.
   While the stage is pinned (html.seq-on) the site header and its hours pill fade away: only the scene, the caption
   and the bottom dock remain. */

.seq-probe{position:fixed;left:0;top:0;width:0;height:100vh;height:100lvh;visibility:hidden;pointer-events:none}

.pv-trip.is-seq{max-width:none;padding:0;height:650vh;height:650lvh}   /* player.js sets the exact px height */
.is-seq .pv-trip-stage{position:sticky;top:0;height:var(--seq-h,100lvh);overflow:hidden;contain:strict;background:#05060a}
.is-seq .pv-trip-view,.is-seq .pv-trip-bar,.is-seq .tl-pic{display:none}
.seq-cv{position:absolute;left:0;top:0;width:100%;height:var(--seq-h,100lvh);display:block}

/* one static grain, never animated */
.seq-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the soft dark gradient the caption sits on */
.is-seq .pv-trip-stage::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:calc(var(--sat) + 250px);pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,8,.74) 0,rgba(3,4,8,.5) 45%,rgba(3,4,8,.18) 75%,rgba(3,4,8,0) 100%)}

/* captions: all four in one grid cell, so the box is as tall as the tallest and never jumps; one shows at a time */
.is-seq .pv-trip-legs{position:absolute;z-index:3;left:0;right:0;top:0;display:grid;gap:0;margin:0;pointer-events:none;
  padding:calc(var(--sat) + 22px) calc(var(--gut) + var(--sar)) 0 calc(var(--gut) + var(--sal))}
.is-seq .tl{grid-area:1 / 1;display:block;opacity:0;transform:translate3d(0,-6px,0);
  transition:opacity .16s linear,transform .16s linear}
.is-seq .tl.is-on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .32s var(--ease) .14s,transform .42s var(--ease) .14s}
.is-seq .tl:not(.is-on) .tl-dir{visibility:hidden}
.is-seq .tl-txt{border-top:0;padding-top:0;grid-template-columns:30px 1fr;gap:6px 10px}
.is-seq .tl-txt::before{font-size:26px}
.is-seq .tl b{font-weight:300;font-size:clamp(23px,6.4vw,28px);line-height:1.12;letter-spacing:-.01em;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.is-seq .tl-txt>span{font-size:15px;line-height:1.45;color:#d6d6da;text-shadow:0 1px 10px rgba(0,0,0,.7)}

/* engaged: the scene, the caption and the dock only */
html.seq-phone header.top{transition:opacity .3s var(--ease),visibility 0s linear 0s}
html.seq-on header.top{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s linear .2s}

@media (prefers-reduced-motion:reduce){ .is-seq .tl,.is-seq .tl.is-on,html.seq-phone header.top{transition:none} }

/* portrait tablets: the same caption, set a step larger and kept to a readable measure */
@media (min-width:720px){
  .is-seq .pv-trip-legs{padding-top:calc(var(--sat) + 34px);padding-left:calc(var(--gut) * 1.4 + var(--sal));padding-right:calc(var(--gut) * 1.4 + var(--sar))}
  .is-seq .pv-trip-stage::before{height:calc(var(--sat) + 320px)}
  .is-seq .tl{max-width:34rem}
  .is-seq .tl-txt{grid-template-columns:40px 1fr;gap:8px 14px}
  .is-seq .tl-txt::before{font-size:34px}
  .is-seq .tl b{font-size:clamp(32px,4.2vw,40px)}
  .is-seq .tl-txt>span{font-size:18px;line-height:1.5}
}

/* a phone turned to landscape mid-journey: the frames stay full-bleed (cover); the caption and its shade get smaller so
   they do not take half of a 400 px tall screen */
@media (orientation:landscape) and (max-height:520px){
  .is-seq .pv-trip-legs{padding-top:calc(var(--sat) + 14px)}
  .is-seq .pv-trip-stage::before{height:150px}
  .is-seq .tl{max-width:30rem}
  .is-seq .tl b{font-size:21px}
  .is-seq .tl-txt>span{font-size:14px}
}