/* Inside the Fly Brain — full-bleed three.js scrollytelling. Builds on
   race-a-fly.css tokens; everything glitch/cinematic-specific lives here. */

.pres-nav{position:relative;z-index:5;background:linear-gradient(180deg,#04191bcc,transparent)}
.pres-body{overflow-x:hidden}

#pres-canvas-wrap{position:fixed;inset:0;z-index:0;background:#02090a}
#pres-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#pres-scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.16;
  background:repeating-linear-gradient(180deg,#ffffff10 0px,#ffffff10 1px,transparent 1px,transparent 3px);
  animation:pres-scan-drift 9s linear infinite}
@keyframes pres-scan-drift{from{background-position:0 0}to{background-position:0 240px}}

#pres-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 58%,#02090a 100%),
             linear-gradient(180deg,#02090ab3 0%,transparent 12%,transparent 88%,#02090ab3 100%)}

#pres-loading{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:#02090a;color:var(--lime);font:700 13px monospace;letter-spacing:.1em;transition:opacity .6s ease}
#pres-loading.hidden{opacity:0;pointer-events:none}
#pres-loading .dots{display:inline-block;width:1.5em;text-align:left;animation:pres-dots 1.2s steps(4) infinite}
@keyframes pres-dots{0%{content:''}}

#pres-steps{position:relative;z-index:3}
.pres-step{min-height:100vh;display:flex;align-items:center;padding:8vh 40px}
.pres-step-final{justify-content:center}

.pres-panel{max-width:440px;background:#04191bd9;border:1px solid var(--fly-panel-line);
  box-shadow:6px 6px 0 #02141666;backdrop-filter:blur(3px);padding:28px 30px;
  opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.pres-step.pres-active .pres-panel{opacity:1;transform:translateY(0)}
.pres-panel h2{font-size:clamp(24px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;margin:10px 0 14px}
.pres-panel h2 em{font-style:normal;color:var(--lime)}
.pres-panel p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0 0 10px}
.pres-panel .pres-note{font-size:12.5px;color:#7fa89a;border-left:2px solid var(--fly-panel-line);padding-left:10px;margin-top:14px}

.pres-tag-sensory i{background:var(--lime);box-shadow:0 0 0 4px #d5f58b15}
.pres-tag-sensory{color:var(--lime)}
.pres-tag-hidden i{background:#5fd6cf;box-shadow:0 0 0 4px #5fd6cf15}
.pres-tag-hidden{color:#5fd6cf}
.pres-tag-motor i{background:var(--fly-red);box-shadow:0 0 0 4px #ff8b6b15}
.pres-tag-motor{color:var(--fly-red)}

.pres-panel-center{max-width:640px;text-align:center;margin:0 auto}
.pres-panel-center h1{font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.04em;margin:14px 0}
.pres-panel-center p{font-size:16px;color:var(--cream)}
.pres-step-final .pres-panel-center p{color:var(--muted)}

.pres-scroll-cue{margin-top:22px;color:var(--muted);font-size:11px;letter-spacing:.2em}
.pres-scroll-cue span{display:inline-block;animation:pres-bob 1.6s ease-in-out infinite}
@keyframes pres-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.pres-controls{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.pres-controls button{padding:11px 18px;font:700 11px monospace;letter-spacing:.06em;background:#123c3c;
  color:var(--cream);border:1px solid var(--fly-panel-line);cursor:pointer;transition:background .15s,color .15s}
.pres-controls button:hover{background:#164846}
.pres-controls button.active{background:var(--lime);color:var(--ink);border-color:transparent}

.pres-back-link{display:inline-block;margin-top:20px;color:var(--muted);border-bottom:1px solid #93b4a5}

/* ---- glitch title ---- */
.pres-glitch{position:relative;color:var(--cream)}
.pres-glitch::before,.pres-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  overflow:hidden;white-space:pre}
.pres-glitch::before{color:#ff5ecb;clip-path:inset(0 0 60% 0);transform:translate(-2px,-1px);
  animation:pres-glitch-a 3.4s infinite steps(1)}
.pres-glitch::after{color:#5ef2ff;clip-path:inset(40% 0 0 0);transform:translate(2px,1px);
  animation:pres-glitch-b 3.9s infinite steps(1)}
@keyframes pres-glitch-a{0%,88%,100%{opacity:0}90%{opacity:.7;transform:translate(-3px,-1px)}94%{opacity:.5;transform:translate(2px,1px)}}
@keyframes pres-glitch-b{0%,90%,100%{opacity:0}92%{opacity:.6;transform:translate(3px,1px)}96%{opacity:.4;transform:translate(-2px,-1px)}}

.pres-glitch-tag{animation:pres-flicker 4.5s infinite}
@keyframes pres-flicker{0%,95%,100%{opacity:1}96%{opacity:.3}97%{opacity:1}98%{opacity:.4}99%{opacity:1}}

@media(max-width:860px){
  .pres-step{padding:6vh 22px}
  .pres-panel{max-width:100%}
}