/* Scènes cinématiques en couches */
.scene { position: relative; overflow: hidden; background: #000; isolation: isolate; }
.scene-stage, .scene-set, .scene-particles, .scene-fog { position: absolute; inset: 0; }
.scene-set { transition: opacity 1.1s ease, filter 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.scene-set.entering { opacity: 0; filter: blur(14px) brightness(2); transform: scale(1.08); }
.scene-set.leaving { opacity: 0; filter: blur(10px); transform: scale(.96); }
.layer { position: absolute; inset: -4%; will-change: transform; }
.layer svg { width: 100%; height: 100%; display: block; }
.scene-particles { width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.scene-fog {
  z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 30% 85%, rgba(var(--fog-rgb, 25,226,122),.10), transparent 70%),
    radial-gradient(ellipse 50% 25% at 75% 80%, rgba(var(--fog-rgb, 125,255,183),.07), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.85), transparent 35%),
    linear-gradient(to bottom, rgba(0,0,0,.7), transparent 25%);
}

.scene.flash::before { content: ''; position: absolute; inset: 0; z-index: 5; background: var(--tint, #19e27a); mix-blend-mode: screen; animation: flash .7s ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: .55; } to { opacity: 0; } }
.scene.glitching .scene-stage { animation: sceneGlitch .6s steps(2) 1; }
@keyframes sceneGlitch {
  0% { transform: translate(0); filter: hue-rotate(0); }
  20% { transform: translate(-12px, 3px); filter: hue-rotate(90deg) saturate(3); }
  40% { transform: translate(10px, -4px); clip-path: inset(20% 0 30% 0); }
  60% { transform: translate(-6px, 2px); clip-path: inset(50% 0 10% 0); }
  80% { transform: translate(4px, 0); clip-path: none; }
  100% { transform: translate(0); filter: none; }
}

/* Animations des éléments SVG */
.led { animation: led 2.4s infinite steps(1); }
@keyframes led { 0%, 70% { opacity: 1; } 71%, 85% { opacity: .15; } 86% { opacity: 1; } }
.flick { animation: flick 2.8s infinite; }
@keyframes flick { 0%, 100% { opacity: .9; } 45% { opacity: .2; } 50% { opacity: 1; } 55% { opacity: .35; } }
.pix { animation: pix 9s linear infinite; }
@keyframes pix { from { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(-420px); opacity: 0; } }
.page { animation: page 16s ease-in-out infinite; }
@keyframes page { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -60px); } }
.scroll { animation: scrollUp 14s linear infinite; }
@keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-500px); } }
.scan { animation: scanY 4s linear infinite; }
@keyframes scanY { from { transform: translateY(-40px); } to { transform: translateY(440px); } }
.spin { animation: spin 18s linear infinite; }
.spin-rev { animation: spin 40s linear infinite reverse; }
.spin-slow { animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 2.2s ease-in-out infinite; }
.glow { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
.arc { animation: arc 1.6s infinite steps(1); }
@keyframes arc { 0%, 60% { opacity: 0; } 61%, 75% { opacity: 1; } 76% { opacity: 0; } 85% { opacity: .8; } 90% { opacity: 0; } }
.flow { animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -116; } }
.grid-move { animation: gridMove 3s linear infinite; }
@keyframes gridMove { from { transform: translateY(0); } to { transform: translateY(24px); } }
.monolith { animation: mono 6s ease-in-out infinite; }
@keyframes mono { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ═══ V1.2 Lot A — animations des décors enrichis ═══
   Uniquement opacity / transform / petites propriétés de remplissage. */
.neon-flicker { animation: neon 7s infinite steps(1); }
@keyframes neon { 0%, 86%, 90%, 94%, 100% { opacity: .85; } 87%, 92% { opacity: .15; } }
.vault-spin { animation: spin 26s linear infinite; }
.lock-blink { animation: lockBlink 1.4s infinite steps(1); }
@keyframes lockBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.keylit { animation: keyLit 2.2s infinite; }
@keyframes keyLit { 0%, 12% { fill: #19e27a; fill-opacity: .55; } 22%, 100% { fill: #0a1510; fill-opacity: 1; } }
.code-blink { animation: lockBlink 1.1s infinite steps(1); }
.floor-sweep { animation: sweep 9s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(-420px); } to { transform: translateX(420px); } }
.book-ghost { animation: bookGhost 8s infinite; }
@keyframes bookGhost { 0%, 55%, 100% { fill-opacity: 0; } 70%, 80% { fill-opacity: .35; } }
.spine-glow { animation: glow 3.4s ease-in-out infinite; }
.erase { opacity: 0; animation: erase 9s infinite; }
@keyframes erase { 0%, 50% { opacity: 0; } 58%, 76% { opacity: 1; } 84%, 100% { opacity: 0; } }
.erase-flash { opacity: .9; }
.restore-scan { animation: restoreScan 4.5s linear infinite; }
@keyframes restoreScan { from { transform: translateY(0); } to { transform: translateY(190px); } }
.osc { animation: osc 2.4s linear infinite; }
@keyframes osc { to { stroke-dashoffset: -320; } }
.cursor-blink { animation: lockBlink .9s infinite steps(1); }
.keytap { animation: keyTap 4.4s infinite; }
@keyframes keyTap { 0%, 6% { fill: #19e27a; fill-opacity: .45; } 12%, 100% { fill: #07100b; fill-opacity: 1; } }
.target { animation: lockBlink 1.6s infinite steps(1); }
.coord-cycle { animation: coordCycle 9s infinite steps(1); }
@keyframes coordCycle { 0%, 33% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
.globe-roll { animation: globeRoll 40s linear infinite; }
@keyframes globeRoll { from { transform: translateX(0); } to { transform: translateX(var(--roll)); } }
.scanring { animation: scanRing 5s ease-in-out infinite; }
@keyframes scanRing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-480px); } }
.unstable { animation: unstable 6s infinite; }
@keyframes unstable { 0%, 88%, 100% { transform: translate(0, 0); } 90% { transform: translate(4px, -3px); } 92% { transform: translate(-5px, 2px); } 94% { transform: translate(3px, 3px); } 96% { transform: translate(0, 0); } }
.beacon { animation: beacon 3s ease-in-out infinite alternate; }
@keyframes beacon { from { transform: rotate(10deg); } to { transform: rotate(150deg); } }
.alarm-blink { animation: alarm 1.2s ease-in-out infinite; }
@keyframes alarm { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.alarm-wash { animation: wash 6s infinite steps(1); }
@keyframes wash { 0%, 89%, 92%, 95%, 100% { opacity: 0; } 90%, 93% { opacity: .06; } }
.needle { animation: needle 5s ease-in-out infinite; }
@keyframes needle { 0%, 100% { transform: rotate(-35deg); } 40% { transform: rotate(48deg); } 46% { transform: rotate(30deg); } 52% { transform: rotate(62deg); } 70% { transform: rotate(10deg); } }

/* Mode léger (petits écrans, appareils modestes) : détails décoratifs retirés */
.scene[data-detail=low] .hd { display: none; }

/* Mouvement réduit : image fixe et lisible */
.scene[data-motion=reduced] *, .scene[data-motion=reduced] *::before, .scene[data-motion=reduced] *::after { animation: none !important; transition: none !important; }
.scene[data-motion=reduced] .coord-cycle.alt { display: none; }
.scene[data-motion=reduced] .scene-set.entering { opacity: 1; filter: none; transform: none; }

/* Lot D — économies : scène hors de l'écran mise en pause ; fond figé en mode léger (téléphone) */
.scene[data-paused] *, .scene[data-paused] *::before, .scene[data-paused] *::after,
.scene[data-still] .scene-set.frozen *, .scene[data-still] .scene-set.frozen *::before, .scene[data-still] .scene-set.frozen *::after { animation-play-state: paused !important; }