/* Subpixel focus drift beneath a fine display surface. */
#titleScreen,#experience,.boot-lockup{animation:display-focus 11s ease-in-out infinite}
@keyframes display-focus{0%,100%{filter:blur(.45px)}38%{filter:blur(.75px)}72%{filter:blur(.6px)}}
.display-surface{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden;isolation:isolate}
.display-glass,.display-lines,.display-grain,.display-sweep{position:absolute;inset:0;pointer-events:none}
.display-glass{border:1px solid #73889455;box-shadow:inset 0 0 0 5px #263e5012,inset 0 0 0 6px #ffffff80,inset 0 0 70px #18384920,inset 0 0 190px #2c526f12;background:linear-gradient(125deg,#ffffff22,transparent 36%,#adced90a 64%,#ffffff1a),radial-gradient(ellipse at 50% 44%,transparent 52%,#243f581c 100%)}
.display-lines{background:repeating-linear-gradient(0deg,#152e4210 0,#152e4210 1px,transparent 1px,transparent 3px);opacity:.6}
.display-grain{inset:-64px;background-repeat:repeat;opacity:.42;mix-blend-mode:multiply;animation:grain-refresh 1s steps(1,end) infinite;will-change:transform}
/* Irregular tile offsets refresh the noise at 10 Hz without per-frame painting. */
@keyframes grain-refresh{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-27px,19px)}
  20%{transform:translate(43px,-11px)}
  30%{transform:translate(-9px,-37px)}
  40%{transform:translate(21px,41px)}
  50%{transform:translate(-44px,-18px)}
  60%{transform:translate(13px,-46px)}
  70%{transform:translate(38px,27px)}
  80%{transform:translate(-35px,44px)}
  90%{transform:translate(47px,-31px)}
}
.display-sweep{inset:-70% 0 0;height:55%;background:linear-gradient(180deg,transparent,#e2f4ff00 35%,#ffffff26 50%,#bedce00a 62%,transparent);animation:display-scan 19s linear infinite;will-change:transform}
@keyframes display-scan{from{transform:translateY(0)}to{transform:translateY(330vh)}}
.display-idle .display-sweep,.display-idle .display-grain,.display-idle #titleScreen,.display-idle #experience,.display-idle .boot-lockup{animation-play-state:paused}
body:has(dialog[open]) #experience,body:has(dialog[open])>.display-surface .display-grain{animation-play-state:paused}

/* Dialogs live in the browser top layer, so the showreel carries its own display surface. */
.cinema-display-surface{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;isolation:isolate}
.cinema-display-surface .display-grain{opacity:.28;mix-blend-mode:soft-light}
.cinema-display-surface .display-lines{opacity:.42;mix-blend-mode:multiply}
.cinema-display-surface .display-glass{border-color:#8399a655;box-shadow:inset 0 0 0 2px #263e5012,inset 0 0 45px #1838491c,inset 0 0 130px #2c526f10}
.cinema-display-surface .display-sweep{opacity:.65;animation-duration:13s}
.cinema-header h3,#reelTime{text-shadow:-.45px 0 #6097ad42,.45px 0 #d9223238,0 0 1px #20262c3d}
#reelVideo{filter:blur(.32px) saturate(.96) contrast(1.025)}
/* Small colored fringes and broad highlights soften just the display type. */
.title-lockup h1,h2,.boot-name{ text-shadow:-.55px 0 #6097ad36,.55px 0 #d9223226,0 0 1.2px #20262c33 }
.title-lockup h1 span,h2 span{ text-shadow:-.65px 0 #578fa936,.65px 0 #d922324d,0 0 13px #d9223229,0 0 32px #d9223217 }
.brand,.game-nav a,.main-menu-button{ text-shadow:0 0 1px currentColor }
.game-nav{border-top-color:#aebbc8aa;border-bottom-color:#bbc8d1aa;box-shadow:0 -12px 32px #ffffff60,0 8px 25px #6482940d}
.game-nav a[aria-current=page]{text-shadow:-.45px 0 #6097ad33,.45px 0 #d9223233,0 0 12px #d9223255,0 0 30px #d922322b}
.reel-frame{box-shadow:0 0 25px #90b7cd26;background:linear-gradient(135deg,#ffffffba,#dae5ed66)}
#enterPortfolio,.main-menu-button,#titleAudio{box-shadow:inset 0 1px 0 #ffffffaa,0 3px 16px #293f5012}
dialog{box-shadow:0 22px 100px #172d4466,0 0 0 1px #ffffff88,inset 0 1px 0 #ffffff}
dialog::backdrop{background:#203c50b3;backdrop-filter:blur(3px)}
@media(max-width:700px){.display-glass{box-shadow:inset 0 0 0 3px #263e5012,inset 0 0 65px #18384916}.display-lines{opacity:.4}.display-grain{opacity:.3;animation-duration:1.6s}#titleScreen,#experience,.boot-lockup{animation:none;filter:blur(.45px)}}
@media(prefers-reduced-motion:reduce){.display-sweep{animation:none;display:none}.display-grain{animation:none;will-change:auto}#titleScreen,#experience,.boot-lockup{animation:none;filter:none}.cinema-display-surface .display-grain{opacity:.2}}
@media(forced-colors:active){.display-surface{display:none}.title-lockup h1,h2,.game-nav a{text-shadow:none}#titleScreen,#experience,.boot-lockup{animation:none;filter:none}}