/* ============================================================
   SAFIA — interactive project experience
   Palette from the brand book:
   Ocean #0B4E64 · Lagoon #3CA7B8 · Sky #A7D7E8
   Sand  #EADCC8 · Stone  #B7A896 · Olive #5A6B4F
   ============================================================ */

:root{
  --ocean:#0B4E64;
  --lagoon:#3CA7B8;
  --sky:#A7D7E8;
  --sand:#EADCC8;
  --stone:#B7A896;
  --olive:#5A6B4F;

  --ink:#FFFFFF;
  --ink-soft:rgba(255,255,255,.72);
  --ink-faint:rgba(255,255,255,.42);
  --glass:rgba(10,32,40,.34);
  --glass-line:rgba(255,255,255,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;height:100%;overflow:hidden;
  background:#04161d;color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* display face: Archivo at expanded width stands in for Monument Extended */
.display{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 118,"wght" 300;
  letter-spacing:.14em;
}

/* ---------------- gate ---------------- */
.gate{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 12%, #10627c 0%, #072a37 58%, #04161d 100%);
  transition:opacity .9s var(--ease),visibility .9s;
}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate.dead{display:none}
.gate-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.gate-video.on{opacity:1}
.gate-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(4,22,29,.66) 0%, rgba(4,22,29,.34) 42%, rgba(4,22,29,.82) 100%),
    radial-gradient(70% 50% at 50% 42%, rgba(4,22,29,0) 0%, rgba(4,22,29,.5) 100%);
}
.gate-inner{position:relative;text-align:center;padding:0 32px;width:100%;max-width:420px}
.gate-mark{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 120,"wght" 300;
  font-size:clamp(38px,13vw,58px);letter-spacing:.22em;
  text-indent:.22em;
}
.gate-sub{
  margin-top:14px;font-size:11px;letter-spacing:.34em;
  color:var(--ink-soft);text-transform:uppercase;text-indent:.34em;
}
.gate-rule{width:1px;height:46px;margin:30px auto;background:var(--ink-faint)}
.gate-btn{
  appearance:none;cursor:pointer;
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-line);
  color:var(--ink);border-radius:999px;
  padding:17px 40px;font:inherit;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;text-indent:.28em;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.gate-btn:active{transform:scale(.97);background:rgba(255,255,255,.12)}
.gate-btn:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.gate-meta{margin-top:26px;font-size:10px;letter-spacing:.26em;color:var(--ink-faint)}
.gate-load{
  margin:34px auto 0;width:150px;height:1px;background:rgba(255,255,255,.14);
}
.gate-load i{display:block;height:100%;background:var(--sky);transition:width .35s linear}

/* ---------------- stage ---------------- */
.stage{position:fixed;inset:0;z-index:1;background:#04161d}

.layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .55s var(--ease),transform 1.1s var(--ease);
  will-change:opacity,transform;
}
.layer.on{opacity:1}
.layer.contain{background:#04161d}
.plate-fill{
  position:absolute;inset:-6%;
  background-size:cover;background-position:center;
  filter:blur(34px) saturate(.75) brightness(.5);
}
.plate-wrap{
  position:absolute;left:0;right:0;
  top:calc(var(--safe-t) + 78px);
  bottom:calc(var(--safe-b) + 186px);
  display:grid;place-items:center;padding:0 12px;
}
.plate{
  max-width:100%;max-height:100%;
  border-radius:8px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.layer.push-in{transform:scale(1.14)}
.layer.push-out{transform:scale(.93)}

.ambient,.edge{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;pointer-events:none;
}
.ambient{transition:opacity .8s var(--ease)}
.ambient.on{opacity:1}
.edge.on{opacity:1}

.three{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.three.on{opacity:1;pointer-events:auto}
.three canvas{display:block;width:100%;height:100%}

/* scrims keep text legible over any render */
.scrim{position:absolute;left:0;right:0;pointer-events:none;transition:opacity .4s}
.scrim-top{top:0;height:24vh;background:linear-gradient(to bottom,rgba(4,22,29,.62),transparent)}
.scrim-bottom{bottom:0;height:34vh;background:linear-gradient(to top,rgba(4,22,29,.78),transparent)}
body.baked .scrim{opacity:0}

/* ---------------- hotspots ---------------- */
.hotspots{position:absolute;inset:0;pointer-events:none}

.hs{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:0;
  cursor:pointer;border:0;background:none;padding:0;pointer-events:auto;
  color:var(--ink);font:inherit;
}
.hs-dot{
  position:relative;flex:0 0 auto;
  width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.16),0 2px 18px rgba(0,0,0,.4);
}
.hs-dot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(2.1);opacity:0}
  100%{opacity:0}
}
.hs-label{
  margin-left:10px;white-space:nowrap;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:999px;padding:9px 16px;
  font-size:11px;letter-spacing:.14em;
}
.hs:active .hs-dot{transform:scale(.86)}
.hs:focus-visible{outline:2px solid var(--sky);outline-offset:8px;border-radius:999px}

/* on the baked home screen the art already carries the labels */
body.baked .hs-label{display:none}
body.baked .hs-dot{opacity:0;width:64px;height:64px;box-shadow:none}
body.baked .hs-dot::after{display:none}

@media (prefers-reduced-motion:reduce){
  .hs-dot::after{animation:none}
  .layer{transition-duration:.01ms}
}

/* ---------------- chrome ---------------- */
.topbar{
  position:fixed;z-index:20;top:0;left:0;right:0;
  padding:calc(var(--safe-t) + 14px) 16px 14px;
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.topbar.on{opacity:1;transform:none;pointer-events:auto}
body.baked .topbar{opacity:0;pointer-events:none}

.topbar-title{flex:1;min-width:0;text-align:center}
#scene-title{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 116,"wght" 300;
  font-size:15px;letter-spacing:.2em;text-indent:.2em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#scene-sub{
  margin-top:4px;font-size:10px;letter-spacing:.14em;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.icon-btn{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.icon-btn:active{transform:scale(.93)}
.icon-btn.muted #sound-wave{opacity:.25}

/* vertical category rail */
.rail{
  position:fixed;z-index:20;right:10px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;padding:8px 6px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:26px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.rail.on{opacity:1;pointer-events:auto}
body.baked .rail{opacity:0;pointer-events:none}

.rail-btn{
  width:40px;height:40px;border-radius:50%;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;position:relative;
  transition:background .3s var(--ease);
}
.rail-btn img{width:21px;height:21px;opacity:.6;transition:opacity .3s var(--ease)}
.rail-btn[aria-current="true"]{background:rgba(255,255,255,.14)}
.rail-btn[aria-current="true"] img{opacity:1}
.rail-btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* the way out sits apart from the categories */
.rail-start{position:relative;margin-bottom:5px}
.rail-start::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-3px;height:1px;
  background:rgba(255,255,255,.2);
}
.rail-start img{opacity:.85}

/* horizontal scene strip */
.strip{
  position:fixed;z-index:20;left:0;right:0;
  bottom:calc(var(--safe-b) + 14px);
  display:flex;gap:10px;padding:0 16px 4px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.strip::-webkit-scrollbar{display:none}
.strip.on{opacity:1;transform:none;pointer-events:auto}
body.baked .strip{opacity:0;pointer-events:none}

.card{
  flex:0 0 auto;scroll-snap-align:start;cursor:pointer;
  width:116px;border:0;padding:0;text-align:left;
  background:none;color:var(--ink);font:inherit;
}
.card-img{
  width:100%;aspect-ratio:4/3;border-radius:10px;
  background:rgba(255,255,255,.07) center/cover no-repeat;
  border:1px solid var(--glass-line);
  transition:border-color .3s var(--ease);
}
.card-label{
  margin-top:7px;font-size:10px;letter-spacing:.12em;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card[aria-current="true"] .card-img{border-color:#fff}
.card[aria-current="true"] .card-label{color:#fff}
.card:focus-visible .card-img{outline:2px solid var(--sky);outline-offset:2px}

/* 3D hud */
.model-hud{
  position:fixed;z-index:21;left:16px;
  bottom:calc(var(--safe-b) + 118px);
  display:flex;gap:7px;flex-wrap:wrap;max-width:62vw;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
.model-hud.on{opacity:1;transform:none;pointer-events:auto}
.chip{
  cursor:pointer;color:var(--ink);font:inherit;font-size:10px;
  letter-spacing:.14em;padding:9px 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:rgba(255,255,255,.2)}

/* hint */
.hint{
  position:fixed;z-index:19;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 128px);
  font-size:10px;letter-spacing:.2em;color:var(--ink-faint);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
  white-space:nowrap;
}
.hint.on{opacity:1}

/* pending-asset placeholder */
.pending{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:40px;background:
    repeating-linear-gradient(45deg,#06222c 0 14px,#072832 14px 28px);
}
.pending-box{max-width:280px}
.pending-title{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 114,"wght" 300;
  font-size:16px;letter-spacing:.18em;
}
.pending-note{margin-top:14px;font-size:11px;line-height:1.7;color:var(--ink-soft)}
.pending-path{
  margin-top:16px;font-size:10px;color:var(--sky);
  word-break:break-all;line-height:1.6;
}

.gate-error{
  margin-top:24px;font-size:11px;line-height:1.7;color:var(--sand);
}
.gate-error code{
  display:block;margin-top:8px;font-size:10px;color:var(--ink-faint);
  word-break:break-all;font-family:ui-monospace,monospace;
}


/* ---- temporary diagnostics ---- */
.debug{
  position:fixed;z-index:200;left:8px;bottom:8px;
  max-width:calc(100vw - 16px);
  font-family:ui-monospace,monospace;font-size:10px;line-height:1.55;
  color:#A7D7E8;background:rgba(4,22,29,.88);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;
  padding:7px 10px;white-space:pre-wrap;word-break:break-all;
  pointer-events:none;
}
.debug b{color:#fff;font-weight:500}
.debug .err{color:#ff9b8a}


/* ---- layer switcher (section scenes) ---- */
.layerbar{
  position:fixed;z-index:21;left:16px;
  bottom:calc(var(--safe-b) + 118px);
  display:flex;gap:7px;flex-wrap:wrap;max-width:62vw;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
.layerbar.on{opacity:1;transform:none;pointer-events:auto}

/* ---- invisible hit areas over artwork that already draws its own UI ---- */
.tap{
  position:absolute;transform:translate(-50%,-50%);
  background:none;border:0;padding:0;cursor:pointer;
  pointer-events:auto;border-radius:12px;
  transition:background .25s var(--ease);
}
.tap:active{background:rgba(255,255,255,.14)}
.tap:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* ---- brand mark: opening screen only ---- */
.brandmark{
  position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 30px);
  width:112px;opacity:.58;
  pointer-events:none;
}

/* ---- full-screen reel ---- */
.reel{
  position:fixed;inset:0;z-index:60;background:#04161d;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
.reel.on{opacity:1;visibility:visible}
.reel-video{width:100%;height:100%;object-fit:cover;background:#04161d}
.reel-bar{
  position:absolute;left:0;right:0;top:0;
  padding:calc(var(--safe-t) + 14px) 16px 14px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(to bottom,rgba(4,22,29,.7),transparent);
}
.reel-title{
  flex:1;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reel-dots{
  position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 22px);
  display:flex;justify-content:center;gap:7px;
}
.reel-dots i{
  width:26px;height:2px;background:rgba(255,255,255,.28);border-radius:2px;
  transition:background .3s var(--ease);
}
.reel-dots i.on{background:#fff}

/* ============================================================
   the sequence: one continuous film you pull yourself through
   ============================================================ */
.gate-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.gate-btn-quiet{
  background:transparent;border-color:rgba(255,255,255,.28);
  padding:14px 34px;font-size:11px;
}

.seq{
  position:fixed;inset:0;z-index:40;background:#04161d;
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility .6s;
  touch-action:none;overscroll-behavior:none;
}
.seq.on{opacity:1;visibility:visible}

.seq-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#04161d;
}
.seq-still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.seq-still.on{opacity:1}
.seq-tr{opacity:0;background:transparent;transition:opacity .3s linear}
.seq-tr.on{opacity:1;transition:none}

.seq-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(4,22,29,.5) 0%, transparent 18%, transparent 62%, rgba(4,22,29,.72) 100%);
}

.seq-top{
  position:absolute;z-index:4;left:0;right:0;top:0;
  padding:calc(var(--safe-t) + 14px) 16px 14px;
  display:flex;align-items:center;gap:12px;
}
.seq-label{
  flex:1;font-size:10px;letter-spacing:.26em;color:var(--ink-soft);
  text-transform:uppercase;text-indent:.26em;
}

/* progress down the right edge */
.seq-rail{
  position:absolute;z-index:4;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;
}
.seq-rail i{
  width:2px;height:20px;border-radius:2px;
  background:rgba(255,255,255,.26);
  transition:background .45s var(--ease),height .45s var(--ease);
}
.seq-rail i.on{background:#fff;height:30px}

.seq-cue{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 34px);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);pointer-events:none;
  transition:opacity .5s var(--ease);
}
.seq-cue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  animation:nudge 2.4s var(--ease) infinite}
.seq-cue.off{opacity:0}
@keyframes nudge{
  0%,100%{transform:translateY(3px);opacity:.5}
  50%{transform:translateY(-3px);opacity:1}
}

/* the villa picker rises over the last stop */
.types{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 16px calc(var(--safe-b) + 22px);
  background:linear-gradient(to top, rgba(4,22,29,.94) 30%, rgba(4,22,29,0));
  transform:translateY(105%);
  transition:transform .7s var(--ease);
}
.types.on{transform:none}
.types-head{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;margin-bottom:16px;text-indent:.3em;
}
.types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}

.type-card{
  position:relative;cursor:pointer;
  border:1px solid var(--glass-line);border-radius:10px;
  background:rgba(255,255,255,.05);
  padding:0;overflow:hidden;color:var(--ink);font:inherit;
  aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .3s var(--ease),transform .2s var(--ease);
}
.type-card .thumb{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.85;
}
.type-card .name{
  position:relative;padding:7px 6px;
  font-size:9px;letter-spacing:.14em;text-align:center;
  background:linear-gradient(to top, rgba(4,22,29,.9), transparent);
}
.type-card:active{transform:scale(.96)}
.type-card[aria-disabled="true"]{opacity:.42;cursor:default}
.type-card[aria-disabled="true"] .thumb{filter:grayscale(1)}
.type-card[aria-disabled="true"]::after{
  content:"Soon";
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:.12em;color:var(--sand);
  background:rgba(4,22,29,.7);padding:2px 7px;border-radius:99px;
}
.type-card.live{border-color:rgba(255,255,255,.5)}

/* ---- the model stop, inside the film ---- */
.seq-three{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 25%, #10627c 0%, #072a37 58%, #04161d 100%);
  transition:opacity .7s var(--ease);
}
.seq-three.on{opacity:1;pointer-events:auto}
.seq-three canvas{display:block;width:100%;height:100%}

/* ---- the closing card: text on a wash, not a slab ---- */
.seq-info{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease);
}
.seq-info.on{opacity:1;pointer-events:auto}
.info-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(105deg, rgba(4,22,29,.93) 0%, rgba(4,22,29,.82) 38%, rgba(4,22,29,.30) 68%, rgba(4,22,29,.05) 100%),
    linear-gradient(to top, rgba(4,22,29,.78) 0%, transparent 34%);
}
.info-body{
  position:absolute;left:0;right:0;top:0;bottom:0;
  padding:calc(var(--safe-t) + 74px) 18px calc(var(--safe-b) + 24px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.info-body::-webkit-scrollbar{display:none}
.info-title{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 114,"wght" 300;
  font-size:23px;line-height:1.25;letter-spacing:.08em;max-width:74%;
}
.info-sub{
  margin-top:8px;font-size:13px;letter-spacing:.18em;color:var(--sky);
}
.info-rows{margin-top:26px;max-width:80%}
.info-group{margin-bottom:20px}
.info-group h4{
  margin:0 0 9px;font-size:10px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;text-indent:.26em;
  color:var(--sand);
}
.info-line{
  display:flex;align-items:baseline;gap:8px;
  padding:4px 0;font-size:11.5px;
}
.info-line span:first-child{color:var(--ink-soft)}
.info-line i{
  flex:1;height:1px;background:rgba(255,255,255,.14);
  transform:translateY(-3px);
}
.info-line span:last-child{color:var(--ink);letter-spacing:.06em;white-space:nowrap}
.info-contact{
  margin-top:8px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16);max-width:80%;
}
.info-contact b{
  display:block;font-weight:400;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;text-indent:.3em;color:#fff;
}
.info-contact span{
  display:block;margin-top:8px;font-size:10.5px;letter-spacing:.12em;
  color:var(--ink-soft);line-height:1.9;
}

/* ---- the model reads inside its own frame ---- */
.model-box{
  position:absolute;left:5%;right:10%;
  top:16%;bottom:24%;
  border:1px dashed rgba(255,255,255,.3);
  border-radius:14px;
  overflow:hidden;
  touch-action:none;
}
.model-box canvas{display:block;width:100%;height:100%}
.model-hint{
  position:absolute;left:0;right:0;top:11%;
  text-align:center;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);pointer-events:none;
}

/* ---- the way out, on the closing stop only ---- */
.seq-exit{
  position:absolute;z-index:5;right:16px;
  bottom:calc(var(--safe-b) + 22px);
  display:none;place-items:center;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.seq-exit.on{display:grid}
.seq-exit:active{transform:scale(.94)}
.seq-exit svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   words over the film
   ============================================================ */

/* the chapter card: shown once, when a new part of the tour begins */
.chapter{
  position:absolute;z-index:6;inset:0;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,22,29,0) 20%, rgba(4,22,29,.42) 50%, rgba(4,22,29,0) 80%);
  transition:opacity .9s var(--ease);
}
.chapter.on{opacity:1}
.chapter span{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 122,"wght" 300;
  font-size:clamp(22px,7.6vw,34px);letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;text-align:center;
  padding:0 24px;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}

/* the opening card on the first stop */
.intro{
  position:absolute;z-index:5;left:0;right:0;
  top:calc(var(--safe-t) + 92px);
  padding:0 26px;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity 1.6s var(--ease);
}
.intro.on{opacity:1}
.intro-mark{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 122,"wght" 300;
  font-size:clamp(34px,12vw,52px);letter-spacing:.24em;text-indent:.24em;
  text-shadow:0 2px 34px rgba(0,0,0,.45);
}
.intro-tag{
  margin-top:12px;font-size:9.5px;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:var(--ink-soft);
}
.intro-rule{width:1px;height:38px;margin:22px auto;background:rgba(255,255,255,.4)}
.intro-lines{
  max-width:330px;margin:0 auto;
  font-size:12px;line-height:2.05;color:rgba(255,255,255,.88);
  text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.intro-lines p{margin:0 0 10px}

/* the caption that names every stop */
.caption{
  position:absolute;z-index:5;left:18px;right:74px;
  bottom:calc(var(--safe-b) + 84px);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.caption.on{opacity:1;transform:none}
.caption-rule{width:26px;height:1px;background:var(--sand);margin-bottom:12px}
.caption-title{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118,"wght" 300;
  font-size:19px;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.caption-note{
  margin-top:9px;max-width:300px;
  font-size:11.5px;line-height:1.85;color:rgba(255,255,255,.82);
  text-shadow:0 1px 14px rgba(0,0,0,.7);
}

/* the fork in the road */
.branch{
  position:absolute;z-index:6;left:0;right:0;
  bottom:calc(var(--safe-b) + 26px);
  display:none;gap:10px;justify-content:center;padding:0 16px;
}
.branch.on{display:flex}
.branch button{
  flex:1;max-width:190px;cursor:pointer;color:var(--ink);font:inherit;
  padding:15px 10px;border-radius:999px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.branch button.lead{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.5)}
.branch button:active{transform:scale(.97)}

/* day / night: a hint at the edge, the swipe does the work */
.var-btn{
  position:absolute;z-index:6;top:50%;transform:translateY(-50%);
  display:none;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;background:none;border:0;padding:8px 4px;
  color:var(--ink);font:inherit;font-size:8px;
  letter-spacing:.2em;text-transform:uppercase;
  opacity:.72;
}
.var-btn.on{display:flex}
.var-btn svg{
  width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.6));
}
.var-next{right:16px;animation:leanLeft 2.6s var(--ease) infinite}
.var-prev{left:16px;animation:leanRight 2.6s var(--ease) infinite}
.var-btn span{text-shadow:0 1px 6px rgba(0,0,0,.8)}
@keyframes leanLeft{
  0%,100%{transform:translate(0,-50%);opacity:.6}
  50%{transform:translate(-5px,-50%);opacity:1}
}
@keyframes leanRight{
  0%,100%{transform:translate(0,-50%);opacity:.6}
  50%{transform:translate(5px,-50%);opacity:1}
}