/* Operation Nightjar opening: title screen, defacement, camera push, image hand-off.
   AI Vision edition: near-black night, white type, one crimson accent.
   Base rules describe each settled state; animations only add motion, so reduced motion still shows everything.
   The fictional university portal inside the browser frame keeps its own in-world colours on purpose. */
@property --sx{syntax:'<length>';inherits:false;initial-value:0px}
@property --sy{syntax:'<length>';inherits:false;initial-value:0px}
@property --sr{syntax:'<length>';inherits:false;initial-value:220px}
.op{--op-cream:#f4f4f2;--op-accent:#ff5d52;--op-red:#e2231a;--op-alarm:#ff3b30;--op-dim:#a3a6ac;--op-serif:Georgia,"Times New Roman",serif;--op-mono:"JetBrains Mono",ui-monospace,Consolas,"Liberation Mono",monospace;--op-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:64px minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);overflow:hidden;background:#050506;color:var(--op-cream);font-feature-settings:"ss01","cv05","cv11";isolation:isolate;transition:opacity .8s ease .15s}
.op.is-leaving{opacity:0;pointer-events:none}
.op kbd{display:inline-block;padding:4px 8px 3px;border:1px solid currentColor;border-bottom-width:2px;border-radius:6px;font:600 .78em/1 var(--op-mono);letter-spacing:.04em;vertical-align:.08em;opacity:.8}

/* Night sky shared by every scene */
.op-sky{position:absolute;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(ellipse 50% 44% at 76% 20%,rgba(226,35,26,.24) 0,rgba(226,35,26,0) 70%),linear-gradient(180deg,#060607 0%,#0b0b0d 52%,#131316 80%,#08080a 100%);transition:filter 1.4s ease}
.op:not([data-scene="title"]) .op-sky{filter:blur(3px) brightness(.5)}
.op-stars{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;animation:op-twinkle 4.5s ease-in-out infinite alternate}
.op-stars-far{width:1px;height:1px;animation-duration:6.5s;animation-delay:-2s}
.op-moon{position:absolute;left:72%;top:11%;width:clamp(74px,8.5vw,140px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 36px 4px rgba(255,255,255,.26),0 0 110px 26px rgba(255,255,255,.08),0 0 220px 80px rgba(226,35,26,.12);animation:op-moonrise 2.4s cubic-bezier(.2,.8,.2,1) both}
.op-mist{position:absolute;left:-30%;width:160%;height:24%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.06) 0,rgba(0,0,0,0) 70%);filter:blur(10px);animation:op-drift 40s ease-in-out infinite alternate}
.op-mist-a{top:44%}
.op-mist-b{top:63%;animation-duration:55s;animation-direction:alternate-reverse}
.op-hills{position:absolute;left:0;bottom:0;width:100%;height:30%}
.op-hills-far{fill:#141417}
.op-hills-near{fill:#050506}
/* The nightjar: long swept wings and a long tail, seen from below. The wingbeat
   (three beats, then a glide) is SMIL inside the SVG; room.js pauses it on the
   glide frame under reduced motion. */
.op-bird{position:absolute;left:0;top:0;width:clamp(72px,7.4vw,124px);fill:#030304;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.4)) drop-shadow(0 0 6px rgba(255,255,255,.1));animation:op-fly 13s linear .5s infinite both}
.op-grain{position:absolute;inset:-50%;z-index:6;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");animation:op-grain 1.2s steps(4) infinite}

/* Header */
.op-head{grid-row:1;grid-column:1;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(16px,3vw,48px);border-bottom:1px solid rgba(255,255,255,.08)}
.op-head-left{display:flex;align-items:center;gap:16px;min-width:0}
.op-logo{display:block;width:auto;height:28px;flex:none}
.op-identity{display:flex;align-items:center;gap:12px;padding-left:16px;border-left:1px solid rgba(255,255,255,.18);color:#d9dadc;font:700 12.5px/1 var(--op-sans);letter-spacing:.16em;white-space:nowrap;transition:opacity .6s}
.op[data-scene="title"] .op-identity{opacity:0}
.op-identity i{width:6px;height:6px;border-radius:2px;background:var(--op-red)}
.op-head-tools{display:flex;align-items:center;gap:8px}
.op-skip,.op-sound{padding:11px 17px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.05);color:#e6e7e9;font:600 13px/1 var(--op-sans);letter-spacing:.06em;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.op-sound[aria-pressed="false"]{color:#8a8d93}
.op-skip:hover,.op-sound:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}

/* Scene 0: title screen */
.op-title{grid-row:2/4;grid-column:1;z-index:3;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;max-width:100%;padding:0 20px 7vh;text-align:center;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.op:not([data-scene="title"]) .op-title{opacity:0;visibility:hidden;transform:translateY(-5vh) scale(.97);transition:opacity .5s ease,transform .7s ease,visibility 0s .7s}
.op-kicker{display:flex;align-items:center;gap:16px;margin:0 0 30px;color:#c9cbd0;font:700 13px/1 var(--op-sans);letter-spacing:.2em;animation:op-rise 1s ease 2.15s both}
.op-kicker i{width:40px;height:1px;background:var(--op-red);opacity:.9}
.op-wordmark{display:flex;flex-direction:column;align-items:center;margin:0;font-weight:400}
.op-word-small{margin-right:-.95em;color:#9fa2a8;font:500 clamp(13px,1.25vw,19px)/1 var(--op-mono);letter-spacing:.95em;animation:op-rise 1s ease 2.3s both}
.op-word-big{display:flex;margin:.1em 0 0;color:#fff;font:800 clamp(56px,min(12vw,22vh),204px)/.92 var(--op-sans);letter-spacing:-.045em;text-shadow:0 0 60px rgba(255,255,255,.08),0 14px 60px #000}
.op-word-big span{display:inline-block;animation:op-letter 1.2s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 80ms + 2500ms)}
.op-word-big .op-word-dot{color:var(--op-red)}
/* The author's credit plays before the title: it decrypts at the centre of the
   screen, then shrinks into its byline under the wordmark as the title unfolds
   around it. room.js measures the jump (--dock-x, --dock-y, --dock-s) and runs
   the decrypt. At rest it is simply the byline. */
.op-byline{position:relative;z-index:4;display:flex;align-items:center;gap:.85em;margin:.95em 0 0;color:#e6e7e9;font:600 clamp(12px,1.05vw,15px)/1 var(--op-mono);letter-spacing:.3em;white-space:nowrap;animation:op-byline-dock 2.4s cubic-bezier(.7,0,.2,1) .1s both}
.op-byline-by{color:var(--op-red);font-weight:800}
.op-byline-name{white-space:pre}
.op-byline-name span{color:var(--op-red);opacity:.8}
.op-byline-name span.is-locked{color:#fff;opacity:1;animation:op-lock .55s ease-out}
.op-byline-caret{position:absolute;left:100%;top:50%;width:.62em;height:1.15em;margin:-.58em 0 0 .1em;background:var(--op-red);box-shadow:0 0 10px rgba(226,35,26,.8);animation:op-blink .9s steps(1) infinite}
.op-byline.is-decoded .op-byline-caret{display:none}
.op-byline.is-decoded .op-byline-name{animation:op-decoded 1s ease-out both}
.op-title-rule{width:min(540px,62vw);height:1px;margin:30px 0 24px;background:linear-gradient(90deg,rgba(226,35,26,0),var(--op-red),rgba(226,35,26,0));animation:op-draw 1.3s ease 3.3s both}
.op-tagline{margin:0;color:#e6e7e9;font:500 clamp(19px,1.9vw,28px)/1.3 var(--op-sans);letter-spacing:-.02em;animation:op-rise 1s ease 3.55s both}
.op-begin{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:20px;margin-top:42px;padding:19px 22px 19px 34px;border:1px solid #fff;border-radius:999px;background:#fff;color:#0d0d0f;font:800 15px/1 var(--op-sans);letter-spacing:.14em;box-shadow:0 14px 44px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.06);animation:op-rise 1s ease 3.85s both;transition:transform .25s,box-shadow .25s}
.op-begin:hover{transform:translateY(-3px);box-shadow:0 20px 56px rgba(0,0,0,.6),0 0 0 6px rgba(226,35,26,.36)}
.op-begin:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(226,35,26,0) 35%,rgba(226,35,26,.16) 50%,rgba(226,35,26,0) 65%);transform:translateX(-130%);animation:op-sheen 5s ease 5.2s infinite}
.op-begin kbd{border-color:rgba(13,13,15,.35);font-size:11.5px}
.op-howto{margin:20px 0 0;color:#9fa2a8;font:500 14.5px/1.4 var(--op-sans);animation:op-rise 1s ease 4.1s both}
.op-credit{margin:10px 0 0;color:#6f7279;font:600 12px/1.4 var(--op-sans);letter-spacing:.12em;text-transform:uppercase;animation:op-rise 1s ease 4.3s both}

/* Scenes 1–3: the portal stage */
.op-stage{grid-row:2/4;grid-column:1;position:relative;z-index:2;min-height:0;display:grid;place-items:center;overflow:hidden;container-type:size;transition:opacity .9s ease .2s}
.op[data-scene="title"] .op-stage{opacity:0;visibility:hidden;transition:none}
.op-camera{position:absolute;inset:0;display:grid;place-items:center;transform-origin:0 0;transition:transform 1.6s cubic-bezier(.65,0,.2,1),filter 1.1s ease}
.op[data-scene="beat-2"] .op-camera{filter:blur(6px) brightness(.38) saturate(.6)}
.op-browser-wrap{position:relative;width:min(1240px,92cqw,calc((100cqh - var(--story-h,240px)) * .88 * 1.62));margin-bottom:var(--story-h,240px);transform:perspective(2200px) rotateX(5deg) rotateY(-7deg) rotate(-.5deg) scale(.95);transition:transform 1.6s cubic-bezier(.65,0,.2,1)}
.op[data-scene="beat-1"] .op-browser-wrap,.op[data-scene="beat-2"] .op-browser-wrap{transform:none}
.op-browser{position:relative;display:flex;flex-direction:column;aspect-ratio:1.62;container-type:inline-size;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#f4f0e6;box-shadow:0 60px 130px rgba(0,0,0,.85),0 0 0 1px #000,0 0 90px rgba(226,35,26,.1)}
.op[data-scene="beat-0"] .op-browser{animation:op-arrive 1s cubic-bezier(.2,.8,.2,1) both}
.op[data-scene="beat-0"][data-hack="hacking"] .op-browser{animation:op-shake .95s cubic-bezier(.36,.07,.19,.97) both}

/* Browser chrome and the ordinary portal; --u scales with the browser width like a screenshot */
.op-chrome,.op-site{--u:1cqi}
.op-chrome{flex:none;display:flex;align-items:center;gap:calc(var(--u) * 1.4);height:calc(var(--u) * 4.4);padding:0 calc(var(--u) * 1.6);background:#1c1d20;color:#cdd0d4;font:calc(var(--u) * 1.05)/1 var(--op-sans)}
.op-dots{display:flex;gap:calc(var(--u) * .6)}
.op-dots i{width:calc(var(--u) * 1.05);height:calc(var(--u) * 1.05);border-radius:50%;background:#ff5f57}
.op-dots i:nth-child(2){background:#febc2e}
.op-dots i:nth-child(3){background:#28c840}
.op-tab{display:flex;align-items:center;gap:calc(var(--u) * .7);max-width:32%;padding:calc(var(--u) * .75) calc(var(--u) * 1.3);border-radius:calc(var(--u) * .7);background:#2c2d31;white-space:nowrap;overflow:hidden;transition:color .3s}
.op-tab>span{overflow:hidden;text-overflow:ellipsis}
.op-tab b{display:grid;place-items:center;flex:none;width:calc(var(--u) * 1.6);height:calc(var(--u) * 1.6);border-radius:50%;background:#1f4a3d;color:#f2e2c2;font:italic 700 calc(var(--u) * 1)/1 var(--op-serif)}
.op[data-hack="hacked"] .op-tab{color:#ff8d82}
.op[data-hack="hacked"] .op-tab b{background:#5a1712}
.op-url{flex:1;display:flex;align-items:center;gap:calc(var(--u) * .7);min-width:0;padding:calc(var(--u) * .65) calc(var(--u) * 1.3);border-radius:99px;background:#121315;color:#aeb2b8;white-space:nowrap;overflow:hidden}
.op-url svg{flex:none;width:calc(var(--u) * 1.1);height:calc(var(--u) * 1.1)}
.op-site{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f4f0e6;color:#1f2a25}
.op-site-head{display:flex;align-items:center;gap:calc(var(--u) * 1.3);padding:calc(var(--u) * 1.5) calc(var(--u) * 3.2);background:#173a30;color:#f6ecd6}
.op-crest{display:grid;place-items:center;flex:none;width:calc(var(--u) * 3.3);height:calc(var(--u) * 3.3);border:1px solid #e3c48d;border-radius:50%;color:#f0d9a8;font:italic calc(var(--u) * 2)/1 var(--op-serif)}
.op-site-name{font:calc(var(--u) * 1.5)/1.1 var(--op-serif);letter-spacing:.12em;white-space:nowrap}
.op-site-name small{display:block;margin-top:calc(var(--u) * .45);color:#cfc4ab;font:calc(var(--u) * .72)/1 var(--op-mono);letter-spacing:.22em}
.op-site-nav{display:flex;gap:calc(var(--u) * 2.4);margin-left:auto;color:#dfe8e2;font:calc(var(--u) * 1.05)/1 var(--op-sans)}
.op-site-login{padding:calc(var(--u) * .8) calc(var(--u) * 1.7);border-radius:99px;background:#e9a65f;color:#1b140c;font:700 calc(var(--u) * .95)/1 var(--op-sans)}
.op-hero{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.05fr;gap:calc(var(--u) * 3);padding:calc(var(--u) * 3.4) calc(var(--u) * 3.4) calc(var(--u) * 2.2)}
.op-hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.op-hero-kicker{color:#8a7650;font:calc(var(--u) * .9)/1 var(--op-mono);letter-spacing:.2em}
.op-hero h2{margin:calc(var(--u) * 1.5) 0 calc(var(--u) * 1.3);color:#16231e;font:700 calc(var(--u) * 4.4)/1.02 var(--op-serif);letter-spacing:-.03em}
.op-hero p{max-width:30ch;margin:0;color:#5b625b;font:calc(var(--u) * 1.25)/1.5 var(--op-sans)}
.op-hero-ctas{display:flex;gap:calc(var(--u) * 1);margin-top:calc(var(--u) * 2.3)}
.op-hero-ctas span{padding:calc(var(--u) * 1) calc(var(--u) * 1.8);border:1px solid #173a30;border-radius:99px;background:#173a30;color:#f6ecd6;font:600 calc(var(--u) * 1)/1 var(--op-sans)}
.op-hero-ctas span+span{background:none;color:#173a30}
.op-hero-art{position:relative;overflow:hidden;border-radius:calc(var(--u) * 1.2);background:linear-gradient(180deg,#c6dbd2 0,#e9e1cb 70%,#d8cbae 100%)}
.op-hero-art:before{content:"";position:absolute;right:13%;top:11%;width:15%;aspect-ratio:1;border-radius:50%;background:#f7d9a0;box-shadow:0 0 calc(var(--u) * 4) #f7d9a0aa}
.op-hero-art:after{content:"";position:absolute;left:13%;right:13%;bottom:7%;height:46%;background:repeating-linear-gradient(90deg,#f7f2e6 0 7%,#d5ccb6 7% 9.6%)}
.op-pediment{position:absolute;left:9%;right:9%;bottom:53%;height:19%;background:linear-gradient(#efe6d1,#e2d7bf);clip-path:polygon(0 100%,50% 0,100% 100%)}
.op-steps{position:absolute;left:6%;right:6%;bottom:0;height:7%;background:repeating-linear-gradient(180deg,#cfc5ae 0 2px,#e6ddc8 2px 33%)}
.op-news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 1.6);padding:0 calc(var(--u) * 3.4) calc(var(--u) * 3)}
.op-news>span{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(var(--u) * 1.2);align-items:center;padding:calc(var(--u) * 1.1);border-radius:calc(var(--u) * 1);background:#fffdf7;box-shadow:0 1px 0 #e1dac8}
.op-news i{grid-row:1/3;width:calc(var(--u) * 5);aspect-ratio:1.2;border-radius:calc(var(--u) * .6);background:linear-gradient(140deg,#b9cfc4,#7f9e90)}
.op-news>span:nth-child(2) i{background:linear-gradient(140deg,#e7c79c,#c28e5c)}
.op-news>span:nth-child(3) i{background:linear-gradient(140deg,#c9c6da,#8d8aa9)}
.op-news b{color:#1f2a25;font:600 calc(var(--u) * 1.1)/1.2 var(--op-sans)}
.op-news small{color:#7a7e74;font:calc(var(--u) * .95)/1.3 var(--op-sans)}

/* The defacement */
.op-deface{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:calc(var(--u) * 3);padding:calc(var(--u) * 4) calc(var(--u) * 5.5);background:radial-gradient(ellipse at 28% 40%,#3d0b08 0,#150505 55%,#070202 100%);color:#fbe9e6;visibility:hidden}
.op-deface:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.32) 3px 4px);pointer-events:none}
.op[data-hack="hacking"] .op-deface{visibility:visible;animation:op-tear .85s steps(1,end) .3s both}
.op[data-hack="hacked"] .op-deface{visibility:visible}
.op-deface-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.op-deface-tag{display:inline-flex;align-items:center;gap:calc(var(--u) * 1);padding:calc(var(--u) * .8) calc(var(--u) * 1.3);border:1px solid var(--op-alarm);color:#ff6e62;font:700 calc(var(--u) * 1.1)/1 var(--op-mono);letter-spacing:.3em}
.op-deface-tag:before{content:"";width:calc(var(--u) * .9);height:calc(var(--u) * .9);background:var(--op-alarm);animation:op-blink 1.1s steps(1) infinite}
.op-deface strong{display:block;margin:calc(var(--u) * 2.4) 0 calc(var(--u) * 2.2);font:800 calc(var(--u) * 7)/.92 var(--op-sans);letter-spacing:-.05em;text-shadow:calc(var(--u) * .22) 0 rgba(255,43,43,.7),calc(var(--u) * -.22) 0 rgba(34,227,255,.55)}
.op-deface small{color:#eaa99d;font:calc(var(--u) * 1)/1.4 var(--op-mono);letter-spacing:.22em}
.op-pinned{position:relative;justify-self:center;width:86%;padding:calc(var(--u) * 1) calc(var(--u) * 1) 0;background:#f5f5f3;box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0,0,0,.8);rotate:-4deg;transition:background .5s,box-shadow .5s}
.op-pinned img{display:block;width:100%;aspect-ratio:1.44;object-fit:cover}
.op-pinned>span{display:block;padding:calc(var(--u) * 1.1) calc(var(--u) * .3);color:#3a3b40;font:calc(var(--u) * .95)/1 var(--op-mono);letter-spacing:.14em}
.op-pinned:before,.op-pinned:after{content:"";position:absolute;z-index:1;top:calc(var(--u) * -1.3);width:calc(var(--u) * 8);height:calc(var(--u) * 2.5);background:rgba(232,232,228,.82);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.op-pinned:before{left:calc(var(--u) * -2.2);rotate:-32deg}
.op-pinned:after{right:calc(var(--u) * -2.2);rotate:30deg}
.op[data-hack="hacking"] .op-pinned{opacity:0}
.op[data-hack="hacked"] .op-pinned{animation:op-drop .75s cubic-bezier(.3,1.45,.5,1) both}
.op[data-scene="beat-2"] .op-pinned{background:rgba(245,245,243,.1);box-shadow:inset 0 0 0 1px rgba(245,245,243,.35)}
.op[data-scene="beat-2"] .op-pinned img,.op[data-scene="beat-2"] .op-pinned>span{visibility:hidden}
.op-glitch{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden}
.op[data-hack="hacking"] .op-glitch{visibility:visible}
.op[data-hack="hacking"] .op-site{animation:op-signal .95s steps(1,end) both}
.op-glitch i{position:absolute;left:0;right:0;height:6%;background:linear-gradient(90deg,rgba(255,43,43,.3),rgba(34,227,255,.3) 40%,rgba(255,255,255,.17) 60%,rgba(255,43,43,.24));mix-blend-mode:screen;opacity:0;animation:op-bar .8s steps(1,end) infinite}
.op-glitch i:nth-child(1){top:12%;animation-delay:-.1s}
.op-glitch i:nth-child(2){top:31%;height:3%;animation-delay:-.45s}
.op-glitch i:nth-child(3){top:48%;height:9%;animation-delay:-.3s}
.op-glitch i:nth-child(4){top:67%;height:4%;animation-delay:-.65s}
.op-glitch i:nth-child(5){top:83%;height:7%;animation-delay:-.2s}

/* Stage overlays: incident badge, spotlight, target frame */
.op-alert{position:absolute;left:clamp(16px,3vw,44px);top:20px;z-index:3;display:flex;align-items:center;gap:11px;padding:11px 17px;border:1px solid rgba(255,59,48,.45);border-radius:999px;background:rgba(36,8,6,.92);color:#ffc2bb;font:700 13px/1 var(--op-sans);letter-spacing:.1em;opacity:0;translate:0 -12px;transition:opacity .45s,translate .45s}
.op-alert b{width:8px;height:8px;border-radius:50%;background:var(--op-alarm);animation:op-ping 1.6s ease-out infinite}
.op[data-hack="hacked"] .op-alert{opacity:1;translate:0 0}
.op[data-scene="beat-2"] .op-alert{opacity:0}
.op-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle var(--sr,220px) at var(--sx,50%) var(--sy,40%),rgba(0,0,0,0) 0 42%,rgba(4,4,5,.94) 90%);transition:opacity 1s ease .55s,--sx 1.6s cubic-bezier(.65,0,.2,1),--sy 1.6s cubic-bezier(.65,0,.2,1),--sr 1.6s cubic-bezier(.65,0,.2,1)}
.op[data-scene="beat-1"] .op-spot,.op[data-scene="beat-2"] .op-spot{opacity:1}
.op[data-scene="beat-2"] .op-spot{transition-duration:1s,1.15s,1.15s,1.15s;transition-timing-function:ease,cubic-bezier(.2,.75,.15,1),cubic-bezier(.2,.75,.15,1),cubic-bezier(.2,.75,.15,1)}
.op-reticle{position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none;opacity:0;scale:1.2;transition:opacity .5s ease 1.15s,scale .8s cubic-bezier(.2,.8,.2,1) 1.15s}
.op[data-scene="beat-1"] .op-reticle{opacity:1;scale:1}
.op-reticle i{position:absolute;width:28px;height:28px;border:2px solid #fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.45))}
.op-reticle i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.op-reticle i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.op-reticle i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.op-reticle i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.op-reticle span{position:absolute;left:0;bottom:calc(100% + 10px);padding:7px 11px;border-radius:4px;background:var(--op-red);color:#fff;font:800 12.5px/1 var(--op-sans);letter-spacing:.12em;white-space:nowrap}
.op-reticle:after{content:"";position:absolute;left:8px;right:8px;top:0;height:2px;background:linear-gradient(90deg,rgba(255,93,82,0),var(--op-accent),rgba(255,93,82,0));box-shadow:0 0 16px var(--op-red);animation:op-scan 2.4s ease-in-out 1.6s infinite both}

/* Scene 3: the image lifted off the page */
.op-evidence{position:relative;z-index:4;grid-area:1/1;width:clamp(230px,min(40cqw,calc((100cqh - var(--story-h,240px)) * .66 * 1.25)),580px);margin-bottom:var(--story-h,240px);padding:0;border:0;background:none;color:inherit;visibility:hidden;opacity:0;transition:opacity .3s}
.op[data-scene="beat-2"] .op-evidence{visibility:visible;opacity:1}
.op-evidence:disabled{cursor:default}
.op[data-ready="true"] .op-evidence{cursor:pointer}
.op-evidence-float{display:block;animation:op-float 5s ease-in-out 1.3s infinite}
.op-evidence-card{position:relative;display:block;padding:12px 12px 0;border-radius:6px;background:#fff;box-shadow:0 40px 90px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.25);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-2deg);transition:transform .3s ease-out,box-shadow .3s}
.op-evidence-card img{display:block;width:100%;aspect-ratio:1.44;object-fit:cover;border-radius:3px}
.op-evidence-label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 2px 15px;color:#2b2d31;font:700 13px/1 var(--op-sans);letter-spacing:.1em}
.op-evidence-label b{color:var(--op-red);opacity:0;transition:opacity .4s}
.op[data-ready="true"] .op-evidence-label b{opacity:1}
.op-evidence-card:before{content:"";position:absolute;inset:-10px;border:2px solid var(--op-accent);border-radius:10px;opacity:0;pointer-events:none}
.op[data-ready="true"] .op-evidence-card:before{animation:op-halo 2s ease-out infinite}
.op[data-ready="true"] .op-evidence:hover .op-evidence-card,.op[data-ready="true"] .op-evidence:focus-visible .op-evidence-card{box-shadow:0 50px 110px #000,0 0 70px rgba(226,35,26,.4)}
.op-evidence:focus-visible{outline:none}
.op-evidence:focus-visible .op-evidence-card{outline:3px solid var(--op-accent);outline-offset:6px}

/* Story bar */
.op-story{grid-row:3;grid-column:1;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(20px,4vw,64px);padding:24px max(clamp(20px,5vw,72px),calc((100% - 1260px) / 2)) clamp(22px,4vh,40px);background:linear-gradient(180deg,rgba(5,5,6,0) 0,rgba(5,5,6,.92) 34%,#050506 100%);transition:opacity .6s ease .35s,translate .6s ease .35s}
.op[data-scene="title"] .op-story{opacity:0;visibility:hidden;translate:0 24px;transition:none}
.op-meta{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-bottom:16px;color:#c9cbd0;font:700 13px/1 var(--op-sans);letter-spacing:.12em}
.op-seq{color:var(--op-accent);font-family:var(--op-mono);letter-spacing:.06em}
.op-segs{display:flex;gap:6px}
.op-segs i{width:38px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);transition:background .5s}
.op[data-scene="beat-0"] .op-segs i:nth-child(1),.op[data-scene="beat-1"] .op-segs i:nth-child(-n+2),.op[data-scene="beat-2"] .op-segs i{background:var(--op-red)}
.op-fiction{margin-left:auto;color:#8a8d93}
.op-line{grid-column:1;min-height:2.2em;margin:0;color:var(--op-cream);font:700 clamp(28px,3.4vw,54px)/1.12 var(--op-sans);letter-spacing:-.035em;text-wrap:balance;text-shadow:0 2px 30px #000}
.op-em{position:relative;color:#fff;white-space:nowrap}
.op-line[data-tone="alarm"] .op-em{color:var(--op-accent)}
.op-em.is-done:after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:max(3px,.06em);background:var(--op-red);transform-origin:left;animation:op-underline .55s ease-out both}
.op-line[data-tone="alarm"] .op-em.is-done:after{background:var(--op-accent)}
.op-caret{display:inline-block;width:max(3px,.06em);height:.8em;margin-left:.08em;background:var(--op-accent);vertical-align:-.04em;animation:caret-blink .9s steps(1) infinite}
.op-instructions{grid-column:1;margin:14px 0 0;color:#a3a6ac;font:500 15px/1.5 var(--op-sans)}
.op-advance{grid-column:2;grid-row:2/4;align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:220px;padding:20px 30px;border:1px solid #fff;border-radius:999px;background:#fff;color:#0d0d0f;font:800 15px/1 var(--op-sans);letter-spacing:.12em;white-space:nowrap;box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.06);transition:transform .2s,box-shadow .2s}
.op-advance:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 6px rgba(226,35,26,.36)}
.op[data-ready="true"] .op-advance{animation:op-pulse 1.9s ease-in-out infinite}

/* The image flying into the case card */
.op-flight{position:fixed;z-index:60;margin:0;object-fit:cover;border-radius:3px;pointer-events:none;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 6px #fff}

@keyframes op-twinkle{from{opacity:.45}to{opacity:1}}
@keyframes op-moonrise{from{opacity:0;translate:0 40px}}
@keyframes op-drift{from{translate:-6% 0}to{translate:6% 0}}
@keyframes op-fly{0%{transform:translate(-14vw,44vh) rotate(-13deg)}62%,100%{transform:translate(112vw,2vh) rotate(-15deg)}}
@keyframes op-grain{0%{translate:0 0}25%{translate:-4% 3%}50%{translate:3% -2%}75%{translate:-2% -4%}}
@keyframes op-rise{from{opacity:0;translate:0 22px}}
@keyframes op-letter{from{opacity:0;transform:translateY(.32em) rotateX(70deg);filter:blur(14px)}}
@keyframes op-draw{from{opacity:0;transform:scaleX(0)}}
@keyframes op-sheen{0%{transform:translateX(-130%)}35%,100%{transform:translateX(130%)}}
@keyframes op-arrive{from{opacity:0;translate:0 50px;scale:.94}}
@keyframes op-shake{0%,100%{transform:none}10%{transform:translate(-.8%,.3%) skewX(-1.2deg)}22%{transform:translate(.9%,-.4%)}34%{transform:translate(-.4%,0) skewX(1.6deg)}48%{transform:translate(.5%,.4%)}62%{transform:translate(-.3%,-.2%) skewX(-.6deg)}78%{transform:translate(.2%,0)}}
@keyframes op-signal{0%,40%,100%{filter:none}15%{filter:hue-rotate(40deg) saturate(1.6)}28%{filter:contrast(1.25) saturate(.5)}62%{filter:hue-rotate(-30deg) saturate(1.4)}80%{filter:contrast(1.15)}}
@keyframes op-bar{0%{opacity:0;transform:translateX(0)}14%{opacity:1;transform:translateX(-6%)}26%{opacity:0}50%{opacity:.85;transform:translateX(4%)}62%{opacity:0}82%{opacity:.6;transform:translateX(-2%)}94%{opacity:0}}
@keyframes op-tear{0%{clip-path:inset(0 0 100% 0)}12%{clip-path:inset(20% 0 62% 0)}24%{clip-path:inset(55% 0 30% 0)}36%{clip-path:inset(8% 0 70% 0)}48%{clip-path:inset(35% 0 22% 0)}62%{clip-path:inset(0 0 45% 0)}76%{clip-path:inset(28% 0 0 0)}88%{clip-path:inset(0 0 10% 0)}100%{clip-path:inset(0)}}
@keyframes op-drop{from{opacity:0;translate:0 -30%;rotate:-16deg;scale:1.15}}
@keyframes op-blink{50%{opacity:0}}
@keyframes op-byline-dock{0%{opacity:0;transform:translate(var(--dock-x,0px),var(--dock-y,0px)) scale(var(--dock-s,1))}8%{opacity:1}70%{transform:translate(var(--dock-x,0px),var(--dock-y,0px)) scale(var(--dock-s,1))}100%{opacity:1;transform:none}}
@keyframes op-lock{from{text-shadow:0 0 14px #fff,0 0 26px rgba(226,35,26,.9)}to{text-shadow:none}}
@keyframes op-decoded{0%{text-shadow:none}30%{text-shadow:0 0 18px rgba(255,255,255,.55)}100%{text-shadow:none}}
@keyframes op-ping{0%{box-shadow:0 0 0 0 rgba(255,59,48,.6)}100%{box-shadow:0 0 0 10px rgba(255,59,48,0)}}
@keyframes op-scan{0%{top:6%;opacity:0}15%,85%{opacity:1}100%{top:94%;opacity:0}}
@keyframes op-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:.8deg}}
@keyframes op-halo{0%{opacity:.95;scale:1}100%{opacity:0;scale:1.1}}
@keyframes op-underline{from{transform:scaleX(0)}}
@keyframes op-pulse{0%,100%{box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 0 rgba(226,35,26,.5)}50%{box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 12px rgba(226,35,26,0)}}

/* Narrow browser window: the portal reflows like a phone layout */
@container (max-width:640px){
  .op-chrome,.op-site{--u:2.6cqi}
  .op-tab,.op-site-nav,.op-hero-art,.op-news,.op-site-name small{display:none}
  .op-site-head{padding:calc(var(--u) * 1.6) calc(var(--u) * 2.2)}
  .op-hero{grid-template-columns:1fr;padding:calc(var(--u) * 2.6) calc(var(--u) * 2.2)}
  .op-hero h2{font-size:calc(var(--u) * 3.6)}
  .op-hero p{font-size:calc(var(--u) * 1.15)}
  .op-deface{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:calc(var(--u) * 1.6);padding:calc(var(--u) * 2.4) calc(var(--u) * 2.2)}
  .op-deface strong{margin:calc(var(--u) * 1.2) 0;font-size:calc(var(--u) * 3.6)}
  .op-pinned{align-self:center;width:78%}
}

@media(max-width:760px){
  .op{grid-template-rows:56px minmax(0,1fr) auto}
  .op-head{padding:0 14px;gap:10px}
  .op-head-left{gap:10px}
  .op-logo{height:18px}
  .op-identity{gap:8px;padding-left:10px;font-size:12px;letter-spacing:.12em}
  .op-identity i,.op-case{display:none}
  .op-skip,.op-sound{padding:9px 12px;font-size:12px}
  .op-moon{left:64%;top:7%}
  .op-kicker{gap:10px;margin-bottom:22px;font-size:12px;letter-spacing:.12em;text-wrap:balance}
  .op-kicker i{display:none}
  .op-word-small{margin-right:-.6em;letter-spacing:.6em}
  .op-word-big{font-size:clamp(48px,15vw,116px)}
  .op-title-rule{margin:22px 0 18px}
  .op-begin{gap:14px;margin-top:32px;padding:17px 18px 17px 26px;font-size:13px;letter-spacing:.14em}
  .op-browser-wrap{width:min(92cqw,calc((100cqh - var(--story-h,280px)) * .88 * .72))}
  .op-browser{aspect-ratio:.72}
  .op-alert{top:10px;left:12px;padding:8px 11px;font-size:12px;letter-spacing:.08em}
  .op-reticle span{font-size:12px}
  .op-story{grid-template-columns:minmax(0,1fr);padding:14px 18px 18px}
  .op-meta{margin-bottom:10px;font-size:12px}
  .op-segs i{width:26px}
  .op-fiction{display:none}
  .op-line{min-height:3.3em;font-size:clamp(25px,7.2vw,36px)}
  .op-instructions{margin:8px 0 14px;font-size:13.5px}
  .op-advance{grid-column:1;grid-row:auto;width:100%;min-width:0;padding:18px}
}
@media(max-width:420px){
  .op-identity{display:none}
}
@media(max-height:760px) and (min-width:761px){
  .op{grid-template-rows:56px minmax(0,1fr) auto}
  .op-story{padding-top:14px;padding-bottom:18px}
  .op-meta{margin-bottom:10px}
  .op-line{font-size:clamp(28px,3.2vw,46px)}
  .op-instructions{margin-top:8px}
  .op-begin{margin-top:30px}
  .op-title-rule{margin:20px 0 16px}
  .op-kicker{margin-bottom:20px}
}
/* Reduced motion: room.css stops every animation, which would leave the bird
   parked at the corner of the header. Give it a resting place in the sky. */
@media(prefers-reduced-motion:reduce){
  .op-bird{transform:translate(12vw,15vh) rotate(-13deg)}
}