/* Viewfinder intro (replaces the STILLS typographic open). Scoped with vf- prefixes. */
.hero-seq.vf-seq { height: 480vh; }
.vf-stage {
  --vf-ink:#111113; --vf-paper:#ecebe8; --vf-mute:#8a8a93; --vf-pink:#ff5c8a; --vf-cyan:#5cc8ff;
  --vf-display:"Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --vf-thin:"Inter", "Helvetica Neue", Arial, sans-serif;
  background: var(--vf-ink); color: var(--vf-paper);
}
#vf-gl { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#vf-gl.dragging { cursor:grabbing; }
#vf-scrollzone { position:absolute; left:0; right:0; bottom:0; height:32%; z-index:3; touch-action:pan-y; }
.vf-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%); }
#vf-fail { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 16px; color:var(--vf-mute); font:200 12px/1.6 var(--vf-thin); letter-spacing:.2em; text-transform:uppercase; }
#vf-fail[hidden] { display:none; }

.vf-title { position:absolute; left:clamp(16px,4vw,40px); bottom:calc(128px + env(safe-area-inset-bottom,0px)); z-index:4; pointer-events:none; }
.vf-title .k { font:200 11px/1 var(--vf-thin); letter-spacing:.3em; text-transform:uppercase; color:var(--vf-mute); }
.vf-title h1 { margin:.2em 0 0; font:400 clamp(44px,7vw,88px)/.9 var(--vf-display); letter-spacing:.02em; text-transform:uppercase;
  background:linear-gradient(100deg,var(--vf-pink),var(--vf-cyan)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--vf-pink); display:inline-block; transform:translateZ(0); }

.vf-hint { position:absolute; left:0; right:0; bottom:calc(28px + env(safe-area-inset-bottom,0px)); text-align:center; z-index:4; padding:0 16px; pointer-events:none; }
.vf-hint p { margin:0; font:200 11px/1 var(--vf-thin); letter-spacing:.3em; text-transform:uppercase; color:var(--vf-mute); transition:color .3s; }
.vf-hint.aligned p { color:var(--vf-cyan); }
.vf-hint .cue { width:1px; height:34px; margin:14px auto 0; background:linear-gradient(var(--vf-mute),transparent); animation:vfcue 2.2s ease-in-out infinite; }
@keyframes vfcue { 0%,100% { transform:scaleY(.4); transform-origin:top; opacity:.4 } 50% { transform:scaleY(1); opacity:1 } }

#vf-skip { position:absolute; right:clamp(16px,4vw,40px); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:6;
  font:400 10px/1 var(--vf-thin); letter-spacing:.22em; text-transform:uppercase; color:var(--vf-paper);
  background:rgba(17,17,19,.5); border:1px solid rgba(236,235,232,.25); padding:10px 12px; border-radius:2px; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:border-color .2s,color .2s; }
#vf-skip:hover, #vf-skip:focus-visible { border-color:var(--vf-cyan); color:var(--vf-cyan); outline:none; }

#vf-iris { position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(circle at 50% 50%, transparent var(--r,70%), #000 calc(var(--r,70%) + 18%)); }
#vf-evf { position:absolute; inset:0; z-index:3; background:#000; opacity:0; pointer-events:none; display:grid; place-items:center; }
#vf-frame { position:relative; width:min(92vw, calc(88vh * 1.4)); aspect-ratio:1980/1414; max-width:100%; overflow:hidden; transform-origin:50% 50%; }
#vf-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.85) contrast(1.05); }
.vf-osd { position:absolute; inset:0; font:400 clamp(10px,1.35vw,15px)/1 var(--vf-thin); color:#f4f4f4; letter-spacing:.06em; text-shadow:0 0 3px rgba(0,0,0,.9); font-variant-numeric:tabular-nums; }
.vf-osd .tl, .vf-osd .tr, .vf-osd .bl { position:absolute; display:flex; gap:1.4em; align-items:center; }
.vf-osd .tl { top:4%; left:3.5%; } .vf-osd .tr { top:4%; right:3.5%; }
.vf-osd .bl { bottom:4%; left:3.5%; right:3.5%; justify-content:space-between; }
.vf-osd .bl .main { display:flex; gap:1.8em; }
.vf-osd .mode { border:1px solid #f4f4f4; padding:.15em .35em; }
.vf-osd .batt { display:inline-block; width:1.8em; height:.8em; border:1px solid #f4f4f4; position:relative; }
.vf-osd .batt::before { content:""; position:absolute; inset:1px; right:30%; background:#f4f4f4; }
.vf-osd .batt::after { content:""; position:absolute; right:-4px; top:25%; width:2px; height:50%; background:#f4f4f4; }
.vf-osd .level { position:absolute; left:50%; top:50%; width:26%; height:1px; transform:translate(-50%,-50%); background:linear-gradient(90deg,#f4f4f4 0 40%,transparent 40% 60%,#f4f4f4 60%); opacity:.55; }
.vf-osd .af { position:absolute; left:52%; top:44%; width:9%; aspect-ratio:1; transform:translate(-50%,-50%); }
.vf-osd .af i { position:absolute; width:26%; height:26%; border:0 solid #f4f4f4; transition:border-color .15s; }
.vf-osd .af i:nth-child(1) { left:0; top:0; border-left-width:2px; border-top-width:2px; }
.vf-osd .af i:nth-child(2) { right:0; top:0; border-right-width:2px; border-top-width:2px; }
.vf-osd .af i:nth-child(3) { left:0; bottom:0; border-left-width:2px; border-bottom-width:2px; }
.vf-osd .af i:nth-child(4) { right:0; bottom:0; border-right-width:2px; border-bottom-width:2px; }
.vf-osd .af.lock i { border-color:var(--vf-cyan); }
.vf-osd .dot { color:var(--vf-pink); }

#vf-arrive { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(16px,4vw,40px) calc(56px + env(safe-area-inset-bottom,0px)); opacity:0; pointer-events:none;
  background:linear-gradient(transparent 50%,rgba(17,17,19,.75)); }
#vf-arrive h2 { margin:0; font:400 clamp(72px,17vw,220px)/.82 var(--vf-display); letter-spacing:.01em; }
#vf-arrive h2 em { font-style:normal; background:linear-gradient(100deg,var(--vf-pink),var(--vf-cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--vf-pink); }
#vf-arrive p { margin:0 0 .6em; font:200 12px/1 var(--vf-thin); letter-spacing:.3em; text-transform:uppercase; color:var(--vf-paper); }

/* reduced motion or no script: the photograph, still, with the title */
.vf-static .hero-seq.vf-seq { height:100vh; }
.vf-static #vf-gl, .vf-static .vf-hint, .vf-static #vf-skip, .vf-static #vf-iris, .vf-static .vf-osd { display:none; }
.vf-static #vf-evf { opacity:1; }
.vf-static #vf-frame { width:100%; height:100%; aspect-ratio:auto; }
.vf-static #vf-arrive { opacity:1; }
.vf-static .vf-title { display:none; }