/* Big Shoulders Display 800, latin subset, SIL Open Font License 1.1 (Google Fonts). Self-hosted so the
   titles never render first in a wider fallback and then re-wrap when the web font arrives. */
@font-face{font-family:"Lens Display";src:url(fonts/big-shoulders-display-800-latin.woff2) format("woff2");font-weight:800;font-display:block}
:root{
  color-scheme: dark;
  --navy:#050818; --line:#2a3a7a; --blue:#2a74ff; --cyan:#46f4ff; --magenta:#ff4fdc; --violet:#8a48ff;
  --text:#eef2ff; --muted:#9aa6cc; --glass:rgba(5,8,24,.84);
  --display:"Lens Display","Avenir Next Condensed","Arial Narrow",Impact,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:#000;color:var(--text);font-family:var(--sans);height:100%;overflow:hidden}
/* --app-h is the visible height, set by app.js (iOS toolbars and in-app browsers hide part of 100vh) */
#app{height:var(--app-h,100dvh);width:100%;display:flex;justify-content:center;overflow:hidden}
#stage{position:relative;height:100%;width:100%;overflow:hidden;background:var(--navy);container-type:inline-size}
@media (min-aspect-ratio: 9/16){ #stage{width:auto;aspect-ratio:9/16} }
#side{display:none}
#media,#ui{position:absolute;inset:0}
/* the overlay only catches taps on its own controls, so the card and the plaza below stay usable */
#ui{pointer-events:none}
#ui > *{pointer-events:auto}
#ui .top,#ui .hint,#ui .title,#ui .invite,#ui .tags{pointer-events:none}
#media img,#media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.kb{animation:kb 4.5s ease-out both}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion: reduce){ .kb,.fade-in{animation:none} }

/* movie titles over the clips. The type holds still (a slow scale drift) while the footage moves;
   words enter one by one with blur, rise and tracking together; the exit is faster than the entrance.
   A soft dark band behind keeps them readable on bright sky. One accent word at most. */
.title{position:absolute;left:5%;right:5%;top:42%;transform:translateY(-50%);text-align:center;isolation:isolate}
.title::before{content:"";position:absolute;left:-15%;right:-15%;top:-45%;bottom:-45%;z-index:-1;background:radial-gradient(closest-side,rgba(5,8,24,.62),rgba(5,8,24,0));animation:fadeIn .8s ease var(--d,0ms) both}
.title .tt{font:800 13.4cqw/.9 var(--display);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 26px rgba(0,0,0,.55);animation:drift 9s linear var(--d,0ms) both}
.ln{display:block;white-space:nowrap}
.title.long .tt{font-size:10cqw}
.title.out{animation:titleOut .45s cubic-bezier(.7,0,.84,0) both}
.w{display:inline-block;animation:wordIn 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d,0ms) + var(--i,0) * 110ms)}
.w.a{color:var(--cyan);text-shadow:0 0 30px rgba(70,244,255,.5)}
/* transform and filter only: nothing in the entrance changes the layout, so the lines never rewrap */
@keyframes wordIn{from{opacity:0;filter:blur(12px);transform:translateY(4cqw) scale(1.14)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes drift{from{scale:1}to{scale:1.05}}
@keyframes titleOut{to{opacity:0;filter:blur(10px)}}

/* the invitation over the first still, above Start */
.invite{position:absolute;left:6%;right:6%;bottom:calc(21% + env(safe-area-inset-bottom,0px));text-align:center;isolation:isolate}
.invite::before{content:"";position:absolute;left:-20%;right:-20%;top:-40%;bottom:-70%;z-index:-1;background:radial-gradient(closest-side,rgba(5,8,24,.72),rgba(5,8,24,0))}
.invite .k{font:500 3.1cqw var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);animation:fadeIn .8s ease both}
.invite h1{margin:3.4cqw 0 0;font:800 12.6cqw/.9 var(--display);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 26px rgba(0,0,0,.55);--d:250ms}
.invite p{margin:4.4cqw auto 0;max-width:28em;white-space:pre-line;font:300 4.3cqw/1.35 var(--sans);color:rgba(238,242,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.6);animation:fadeIn .9s ease 1.2s both}
@media (prefers-reduced-motion: reduce){ .w,.title .tt,.title::before,.title.out,.invite .k,.invite p{animation:none} }
.top{position:absolute;left:8%;right:8%;top:calc(7% + env(safe-area-inset-top,0px));font-weight:400;font-size:6.2cqw;line-height:1.15;text-shadow:0 2px 14px rgba(0,0,0,.6);text-wrap:balance}

/* buttons */
.btn{appearance:none;border:0;font:600 4.4cqw/1 var(--sans);color:#050818;background:var(--cyan);border-radius:999px;padding:4cqw 8cqw;cursor:pointer}
.btn.ghost{background:rgba(5,8,24,.45);color:#fff;border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,.spot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.center{position:absolute;left:50%;bottom:calc(10% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);white-space:nowrap}
.skip{position:absolute;right:5%;top:calc(4% + env(safe-area-inset-top,0px));font:500 3.2cqw var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);background:none;border:0;padding:2cqw;cursor:pointer}

/* panorama */
.pano{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;cursor:grab}
.pano::-webkit-scrollbar{display:none}
.pano .wide{position:relative;height:100%;aspect-ratio:2/1}
.pano .wide img,.pano .wide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer}
.spot i{position:absolute;left:50%;top:22%;width:6cqw;height:6cqw;margin-left:-3cqw;border-radius:50%;border:.6cqw solid #fff;box-shadow:0 0 0 1.4cqw rgba(255,255,255,.18);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 3.4cqw rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.hint{position:absolute;left:50%;top:calc(21% + env(safe-area-inset-top,0px));transform:translateX(-50%);font:500 4.2cqw var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(5,8,24,.66);border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:2.2cqw 5cqw;white-space:nowrap;pointer-events:none}

/* sheet */
.sheet{position:absolute;left:4%;right:4%;bottom:calc(3.5% + env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(160,190,255,.18);border-radius:4cqw;padding:4cqw;display:grid;gap:2.2cqw;max-height:56%;overflow:auto;overscroll-behavior:contain}
.sheet .row{position:sticky;bottom:-4cqw;margin:0 -4cqw -4cqw;padding:2.2cqw 4cqw 4cqw;background:linear-gradient(180deg,rgba(5,8,24,0),rgba(5,8,24,.96) 35%)}
.sheet .k{font:500 3cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet .q{font-size:4.9cqw;font-weight:500;line-height:1.15}
.chips{display:flex;flex-wrap:wrap;gap:1.8cqw}
.chip{appearance:none;font:400 3.5cqw/1.2 var(--sans);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:1.4cqw 3cqw;color:rgba(255,255,255,.88);background:none;cursor:pointer;text-align:left}
.chip.on{border-color:var(--cyan);color:var(--cyan);background:rgba(70,244,255,.1)}
.field{width:100%;font:400 16px var(--sans);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(160,190,255,.3);border-radius:2.6cqw;padding:2.8cqw 3.2cqw}
.field::placeholder{color:#8090b8}
.row{display:flex;gap:2.4cqw;align-items:center;justify-content:space-between}
.pickrow{display:flex;align-items:center;gap:2.4cqw}
.pickrow .k{white-space:nowrap}
.field.pickf{padding:1.8cqw 3cqw;color:var(--cyan);background:rgba(70,244,255,.07);border-color:rgba(70,244,255,.35)}
.field.sig{padding:2cqw 3cqw}
.chip.own{border-style:dashed;color:var(--muted)}
.first{font:400 3.6cqw var(--mono);color:var(--muted)}
.nudge{font-size:3.8cqw;line-height:1.3;color:var(--cyan);border-left:.7cqw solid var(--cyan);padding-left:2.6cqw}
.err{font-size:3.4cqw;color:var(--magenta)}

/* visor */
#chrome{position:absolute;inset:0;pointer-events:none}
#chrome .br{position:absolute;inset:4.5% 5%;--c:rgba(200,214,255,.6);--t:.45cqw;
  background:linear-gradient(var(--c),var(--c)) top left/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--t) 22% no-repeat,
  linear-gradient(var(--c),var(--c)) top right/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--t) 22% no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--t) 22% no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/22% var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--t) 22% no-repeat}
#chrome .status{position:absolute;top:calc(6% + env(safe-area-inset-top,0px));left:9%;right:9%;display:flex;justify-content:space-between;font:500 3.1cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(200,214,255,.7)}
#status-r{color:var(--cyan)}
.wire{position:absolute;inset:0;background:var(--navy)}
.wire img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sweep{--p:0%;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--p),transparent calc(var(--p) + 4%));mask-image:linear-gradient(180deg,#000 0,#000 var(--p),transparent calc(var(--p) + 4%))}
.scanline{position:absolute;left:5%;right:5%;height:.6cqw;background:linear-gradient(90deg,transparent,rgba(70,244,255,.95),transparent);box-shadow:0 0 3cqw rgba(70,244,255,.7)}
.tags{position:absolute;left:6%;right:6%;top:calc(13% + env(safe-area-inset-top,0px));display:grid;gap:2cqw;justify-items:start}
.tags span{font:500 4.6cqw/1.2 var(--mono);color:var(--cyan);background:rgba(5,8,24,.84);border-left:1cqw solid var(--cyan);padding:1.6cqw 3.2cqw}
.pin{position:absolute;display:flex;align-items:center;gap:2cqw;transform:translate(-2.2cqw,-50%);border:0;background:none;padding:0;cursor:pointer;color:#fff}
.pin i{width:4.4cqw;height:4.4cqw;border-radius:50%;background:transparent;border:.6cqw solid var(--cyan);box-shadow:0 0 3cqw rgba(70,244,255,.5);flex:none}
.pin.on i{background:var(--cyan);box-shadow:0 0 0 1.6cqw rgba(70,244,255,.25),0 0 4cqw rgba(70,244,255,.8)}
.pin span{font:500 4.4cqw/1.2 var(--mono);background:rgba(5,8,24,.86);padding:1.6cqw 3cqw;max-width:48cqw;text-align:left}
.pin.l{flex-direction:row-reverse;transform:translate(calc(-100% + 2.2cqw),-50%)}
.pin.l span{text-align:right}

/* dots */
.dots{position:absolute;inset:0;background:var(--navy);display:grid;place-content:center;gap:7cqw}
.dots .r{display:flex;gap:7cqw;justify-content:center}
.dots i{width:7.5cqw;height:7.5cqw;border-radius:50%;display:block;opacity:0;animation:dotIn .7s ease-out forwards}
@keyframes dotIn{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}to{opacity:var(--o,.45);transform:none}}
.dots .glow i{box-shadow:0 0 4cqw rgba(70,244,255,.85);--o:1}
.dots .label{position:absolute;left:0;right:0;bottom:10%;text-align:center;font:500 3.2cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}

/* card */
.card{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#0b1338,#050818);padding:calc(7cqw + env(safe-area-inset-top,0px)) 6cqw 0;display:grid;align-content:start;gap:3.4cqw}
.card .actions{position:sticky;bottom:0;margin:0 -6cqw;padding:5cqw 6cqw calc(4cqw + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(5,8,24,0),#050818 28%);display:grid;gap:2.4cqw}
.mailform{display:grid;gap:2.2cqw}
.card .btn{width:100%}
.card .k{font:500 2.9cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.8cqw}
.card h1{margin:0;font:800 10cqw/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.card p{margin:0;font-size:3.9cqw;line-height:1.4}
.card .sent{font-size:4.6cqw;line-height:1.3}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:1.6cqw}
.card li{font:400 3.1cqw var(--mono);color:var(--cyan);border:1px solid rgba(70,244,255,.45);border-radius:999px;padding:.8cqw 2.6cqw}
.lock{display:grid;gap:1.6cqw}
.lock div{display:flex;align-items:center;gap:2.4cqw;font-size:3.7cqw;color:rgba(255,255,255,.55);border:1px dashed rgba(255,255,255,.24);border-radius:2cqw;padding:2cqw 2.8cqw}
.lock svg{width:3.8cqw;height:3.8cqw;flex:none}
.lock .pitch{margin:1cqw 0 0;font-size:3.7cqw;line-height:1.4;color:rgba(238,242,255,.9)}
.seat{display:block;text-align:center;text-decoration:none;color:#fff;font-weight:600;font-size:4.4cqw;border-radius:999px;padding:3.6cqw;background:linear-gradient(90deg,var(--magenta),var(--violet) 55%,var(--blue))}
.fine{font-size:3.1cqw!important;color:var(--muted)}
.ok{font-size:3.8cqw;color:var(--cyan)}

#loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,8,24,.3)}
#loading i{width:9cqw;height:9cqw;border-radius:50%;border:.6cqw solid rgba(70,244,255,.25);border-top-color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* dots shown as a still behind the card on wide screens */
.dots.still i{animation:none;opacity:var(--o,.45)}

/* the side panel on wide screens: the questions and the card leave the video */
.side-head{padding:7cqw 7cqw 2cqw}
.side-head .k{font:500 3cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.side-head .brand{font:800 9cqw/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:1.4cqw}
.side-note{margin:0;padding:3cqw 7cqw;font-size:4cqw;line-height:1.45;color:var(--muted)}
@media (min-width: 860px) and (min-aspect-ratio: 1/1){
  #side{display:flex;flex-direction:column;width:min(440px,42vw);height:100%;background:#070b22;border-left:1px solid rgba(160,190,255,.14);overflow:auto;overscroll-behavior:contain;container-type:inline-size}
  #side-body{flex:1;display:flex;flex-direction:column}
  #side .sheet{position:static;inset:auto;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;max-height:none;overflow:visible;padding:3cqw 7cqw 0;gap:3cqw;flex:1;align-content:start}
  #side .sheet .row{position:sticky;bottom:0;margin:auto -7cqw 0;padding:4cqw 7cqw 6cqw;background:linear-gradient(180deg,rgba(7,11,34,0),#070b22 30%)}
  #side .card{position:static;inset:auto;overflow:visible;background:none;padding:2cqw 7cqw 0;flex:1}
  #side .card .actions{margin:0 -7cqw;padding:5cqw 7cqw 6cqw;background:linear-gradient(180deg,rgba(7,11,34,0),#070b22 28%)}
}

/* sound on/off, top center: the visor frame keeps that spot free */
.mute{position:absolute;left:50%;top:calc(2% + env(safe-area-inset-top,0px));transform:translateX(-50%);width:10cqw;height:10cqw;max-width:46px;max-height:46px;padding:0;border:0;border-radius:50%;background:rgba(5,8,24,.45);color:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;z-index:5}
.mute svg{width:56%;height:56%}