/* Atmosphere stays below the live text and never captures pointer input. */
.scene-effects { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; contain:paint; }
.scene-effects * { pointer-events:none; }
.fx-light { position:absolute; width:230px; height:230px; border-radius:50%; background:radial-gradient(ellipse, #f4cc8670, #dba44b19 40%, transparent 70%); opacity:.28; mix-blend-mode:screen; }
.fx-light-two,.fx-steam { display:none; }
.fx-rain { position:absolute; inset:-660px; background-image:url('assets/effects/rain.png'); background-repeat:repeat; background-size:640px 640px; opacity:.24; will-change:transform; }
.fx-rain-back { background-size:320px 320px; animation:rainFallBack 1.15s linear infinite; opacity:.17; }
.fx-rain-front { animation:rainFallFront 1.45s linear infinite; }
@keyframes rainFallBack { to { transform:translate3d(0,320px,0); } }
@keyframes rainFallFront { to { transform:translate3d(0,640px,0); } }
.has-ground-fog .moving-fog { display:none; }
.fx-ground-fog { position:absolute; inset:42% -16% -14%; background:url('assets/effects/fog.png') center bottom / 100% 100% no-repeat; mix-blend-mode:screen; will-change:transform; pointer-events:none; }
.fx-fog-back { opacity:.38; animation:groundFogBack 18s -6s linear infinite alternate; }
.fx-fog-front { inset:61% -22% -12%; opacity:.28; animation:groundFogFront 13s -4s linear infinite alternate; }
.fx-fog-dense .fx-fog-back { inset:30% -16% -13%; opacity:.46; }
.fx-fog-dense .fx-fog-front { inset:49% -22% -12%; opacity:.36; }
.sponsor-slide .scene-effects { bottom:var(--footer-safe); }
.sponsor-slide .fx-ground-fog { inset:47% -18% -15%; opacity:.38; }
.sponsor-slide .fx-fog-front { inset:66% -22% -12%; opacity:.28; }
@keyframes groundFogBack { from{transform:translate3d(-12%,2%,0) scale(1.08)} to{transform:translate3d(12%,-1%,0) scale(1.08)} }
@keyframes groundFogFront { from{transform:translate3d(13%,1%,0) scale(1.1)} to{transform:translate3d(-13%,-2%,0) scale(1.1)} }
.fx-london .fx-light-one { left:57%; top:12%; width:220px; height:360px; animation:gasLamp 7s ease-in-out infinite; }
.fx-london .fx-light-two { display:block; left:65%; top:-2%; width:300px; height:330px; animation:gasLamp 8s -3s ease-in-out infinite; }
@keyframes gasLamp { 0%,100%{opacity:.22} 45%{opacity:.4} 72%{opacity:.28} }
[data-slide-id="london-1891"] .scene-art { animation:none; transform:none; }
[data-slide-id="london-1891"] .moving-fog { inset:60% -15% -20%; }
.fx-hound .fx-light { display:none; }
.fx-hound .fx-rain-front { opacity:.31; }
[data-slide-id="case-flaky"] .fog-front { inset:56% -18% -22%; opacity:.22; }
[data-slide-id="case-flaky"] .fog-back { inset:40% -18% -22%; opacity:.19; }
.fx-lens .fx-light-one { left:43%; top:47%; width:240px; height:240px; background:radial-gradient(ellipse,#b7e7b587,#65b98028 38%,transparent 68%); }
.fx-enter .fx-lens .fx-light-one { animation:lensFocus 1.15s ease-out both; }
@keyframes lensFocus { 0%{opacity:0;scale:.8} 40%{opacity:.7} 100%{opacity:.22;scale:1} }
.fx-engine .fx-light { left:65%; top:43%; width:190px; height:190px; }
.fx-steam { position:absolute; width:420px; height:440px; opacity:.17; background:radial-gradient(ellipse at 45% 65%,#eee5c640,transparent 53%),radial-gradient(ellipse at 60% 35%,#c9d3c333,transparent 50%); filter:blur(18px); animation:steamDrift 7s ease-in-out infinite; }
.fx-engine .fx-steam { display:block; left:59%; top:17%; }
.fx-railway .fx-steam { display:block; left:0; top:6%; width:780px; height:530px; animation-duration:9s; }
.fx-railway .fx-light { display:none; }
@keyframes steamDrift { 0%,100%{opacity:.1;transform:translate3d(8px,22px,0)} 55%{opacity:.25;transform:translate3d(-20px,-40px,0)} }
.fx-lock .fx-light { left:64%; top:63%; width:460px; height:140px; background:radial-gradient(ellipse,#a5dca653,transparent 68%); }
.fx-enter .fx-lock .fx-light { animation:lockGlow 1.1s ease-out both; }
@keyframes lockGlow { from{opacity:0} 55%{opacity:.75} to{opacity:.26} }
.fx-projector .fx-light { left:54%; top:58%; width:490px; height:110px; rotate:18deg; border-radius:0; background:linear-gradient(90deg,transparent,#f6dfa622); clip-path:polygon(0 0,100% 39%,100% 60%,0 100%); opacity:.45; }
.fx-enter .fx-projector .fx-light { animation:projectorLight 1.4s ease-out both; }
@keyframes projectorLight { from{opacity:0} to{opacity:.45} }
.fx-sorting .fx-light { left:65%; top:55%; width:235px; height:360px; rotate:25deg; background:radial-gradient(ellipse,#78d5974d,transparent 68%); }
.fx-sorting .fx-light-two { display:block; left:82%; top:55%; background:radial-gradient(ellipse,#db9d6847,transparent 68%); }
.fx-enter .fx-sorting .fx-light-one { animation:laneGlow 1.25s ease-out both; }
.fx-enter .fx-sorting .fx-light-two { animation:laneGlow 1.25s .25s ease-out both; }
@keyframes laneGlow { from{opacity:0} 40%{opacity:.8} to{opacity:.22} }

/* Existing reveal steps receive accents, never extra clicks or partial code. */
.comic-panel { transition:border-color 300ms,box-shadow 300ms; }
.comic-panel.is-speaking { border-color:#d5b577; box-shadow:inset 0 0 60px #d9b86c14; }
.watson-panel.is-speaking { border-color:#80b692; box-shadow:inset 0 0 60px #70cb9118; }
.fx-cue .focus-line { animation:lineEvidence 1.2s ease-out both; }
@keyframes lineEvidence { 0%,25%{background:#75b28930} to{background:#75b28910} }
[data-slide-id="watson-rules"] .fx-cue .manuscript { animation:documentIn 400ms ease-out both; }
.ramp-bar.fx-cue i { transform-origin:bottom; animation:rampGrow 450ms var(--fx-delay,0ms) ease-out both; }
@keyframes rampGrow { from{transform:scaleY(.02)} to{transform:scaleY(1)} }
.fx-cue .clock-explanation { position:relative; }
.clock-explanation::after { content:""; display:block; width:100%; height:4px; margin-top:26px; background:var(--brand-text); transform-origin:left; }
.fx-cue .clock-explanation::after { animation:totpWindow 1.5s ease-in-out both; }
@keyframes totpWindow { 0%{transform:scaleX(.17);background:var(--amber)} 46%{transform:scaleX(0);background:var(--amber)} 48%{transform:scaleX(1);background:var(--brand-text)} 100%{transform:scaleX(1)} }
[data-slide-id="commit-window"] .fx-cue .argument,
.fx-cue .ci-jobs .argument,
.proof-good.fx-cue .process-step { animation:evidenceGlow 1s ease-out both; }
.proof-bad.fx-cue .process-step { animation:redEvidence 1s ease-out both; }
@keyframes evidenceGlow { from{box-shadow:inset 0 0 0 2px #83ba8b99,0 0 28px #63ad7b25} to{box-shadow:inset 0 0 0 1px transparent,0 0 0 transparent} }
@keyframes redEvidence { from{box-shadow:inset 0 0 0 2px #e9544daa,0 0 28px #e9544d20} to{box-shadow:inset 0 0 0 1px transparent,0 0 0 transparent} }
.fx-cue .film-timeline .process-step { animation:evidenceGlow 650ms var(--fx-delay,0ms) ease-out both; }
.fx-cue .verdict { animation:verdictIn 500ms 140ms ease-out both; }
@keyframes verdictIn { from{opacity:.25;transform:translateY(6px)} to{opacity:1;transform:none} }
[data-slide-id="performance-verdict"][data-reveal-index="3"] .metric-warning { animation:evidenceGlow 650ms ease-out both; }
[data-slide-id="green-red-green"] .fx-cue .verdict { animation-delay:220ms; }

/* A single solved marker is stamped. Map geometry and other pins stay fixed. */
.fx-enter .just-solved b { animation:solvedPin 850ms var(--deck-transition-duration,450ms) ease-out both!important; }
.fx-enter .just-solved .map-check,
.fx-enter .just-solved .map-case-status { animation:caseStamp 350ms var(--deck-transition-duration,450ms) ease-out both; }
@keyframes solvedPin { from{box-shadow:0 0 0 8px #e4bd7655,0 0 44px #e4bd7670} to{box-shadow:none} }
@keyframes caseStamp { from{opacity:0;scale:1.18} 65%{opacity:1;scale:.98} to{opacity:1;scale:1} }
.case-map .fx-map-departure b { box-shadow:0 0 0 7px #dabc7438,0 0 44px #e4bd76aa!important; border-color:#e4bd76; }
@keyframes documentIn { from{opacity:0;transform:translate3d(0,26px,0) rotate(-.25deg)} to{opacity:1;transform:none} }
html[data-transition="document"]::view-transition-old(root) { animation-name:deckFadeOut; }
html[data-transition="document"]::view-transition-new(root) { animation-name:documentIn; }
html[data-transition="document"] .fallback-enter { animation-name:documentIn; }
::view-transition-old(root),::view-transition-new(root),.fallback-enter { animation-duration:var(--deck-transition-duration,450ms); }

/* Compact controls stay outside the 1920x1080 composition when letterboxed. */
.deck-hud { gap:12px; flex-wrap:nowrap; align-items:center; color:#a8b5ab; background:#060b0899; padding:4px 8px; border:0; border-radius:3px; font-size:10px; line-height:1.2; white-space:nowrap; pointer-events:auto; }
.hud-left { align-items:center; flex-wrap:nowrap; gap:12px; flex-shrink:0; }
.hud-help { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:right; color:#93a097; font-size:9px; }
body:hover .deck-hud { opacity:0; }
body.hud-visible .deck-hud { opacity:.38; }
body .deck-hud:hover,.deck-hud:focus-within,body:hover .deck-hud:focus-within { opacity:.92; }
@media(max-width:600px) { #musicStatus { display:none; } }
.fx-static .scene-effects,.editing-text .scene-effects { display:none; }
.fx-static *, .fx-static *::after { animation:none!important; transition:none!important; }
.deck-hidden .stage * { animation-play-state:paused!important; }
html[data-motion="reduce"] .scene-effects { display:none; }
html[data-motion="reduce"]::view-transition-old(root),html[data-motion="reduce"]::view-transition-new(root) { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .scene-effects { display:none; } }
@media print { .scene-effects { display:none; } }

/* Phones use a stable, low-memory rendering path. The slide content stays intact. */
html[data-rendering="mobile-safe"] .scene-effects,
html[data-rendering="mobile-safe"] .moving-fog { display:none!important; }
html[data-rendering="mobile-safe"] * { will-change:auto!important; }
html[data-rendering="mobile-safe"] .case-map a span { backdrop-filter:none; }