/* Lifelines — animated stage scenes + avatar helpers (pairs with js/scene.js) */

/* the app must sit above the fixed scene layer */
#app { position: relative; z-index: 1; }

#scene-root { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #17142b; }
.scene-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  animation: scnFadeIn 1.4s ease both;
}
.scene-layer.scene-out { animation: scnFadeOut 1.4s ease both; }
@keyframes scnFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scnFadeOut { from { opacity: 1; } to { opacity: 0; } }

.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* readability veil: darker + desaturated in the middle, richer at the edges and horizon */
.scene-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 55% at 50% 44%, rgba(18, 14, 38, .58) 0%, rgba(18, 14, 38, .34) 55%, rgba(18, 14, 38, 0) 100%),
    linear-gradient(180deg, rgba(18, 14, 38, .22) 0%, rgba(18, 14, 38, .06) 40%, rgba(18, 14, 38, 0) 70%, rgba(18, 14, 38, .2) 100%);
}

/* ---- generic SVG animation helpers (durations/delays set inline) ---- */
.scn-fb { transform-box: fill-box !important; transform-origin: center; }
.scn-o { transform-origin: 0 0; }

.scn-drift      { animation: scnDrift 120s linear infinite; }
.scn-drift-rev  { animation: scnDriftRev 60s linear infinite; }
.scn-spin       { animation: scnSpin 60s linear infinite; }
.scn-twinkle    { animation: scnTwinkle 4s ease-in-out infinite; }
.scn-blink      { animation: scnBlink 9s steps(1, end) infinite; opacity: var(--o, .8); }
.scn-beacon     { animation: scnBeacon 1.8s ease-in-out infinite; }
.scn-sway       { animation: scnSway 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.scn-swing      { animation: scnSwing 3s ease-in-out infinite alternate; }
.scn-kite       { animation: scnKite 7s ease-in-out infinite; }
.scn-rise       { animation: scnRise 70s linear infinite; }
.scn-flap       { animation: scnFlap .6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 70%; }
.scn-bob        { animation: scnBob 4s ease-in-out infinite; }
.scn-flutter-path { animation: scnFlutterPath 14s ease-in-out infinite; }
.scn-shoot      { animation: scnShoot 11s ease-in infinite; }
.scn-firefly    { animation: scnFirefly 8s ease-in-out infinite alternate; }
.scn-car        { animation: scnCar 12s linear infinite; }
.scn-car-rev    { animation: scnCarRev 12s linear infinite; }
.scn-smoke      { animation: scnSmoke 7s ease-out infinite; }
.scn-fall       { animation: scnFall 18s linear infinite; }
.scn-flutter    { animation: scnFlutter 3s ease-in-out infinite alternate; }
.scn-wave       { animation: scnWave 9s linear infinite; }
.scn-foam       { animation: scnFoam 6s ease-in-out infinite alternate; }
.scn-skate      { animation: scnSkate 16s linear infinite; }
.scn-hop        { animation: scnHop 16s ease-in-out infinite; }

@keyframes scnDrift { from { transform: translateX(-320px); } to { transform: translateX(1920px); } }
@keyframes scnDriftRev { from { transform: translateX(1900px); } to { transform: translateX(-300px); } }
@keyframes scnSpin { to { transform: rotate(360deg); } }
@keyframes scnTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes scnBlink { 0% { opacity: var(--o, .8); } 55% { opacity: .06; } 80% { opacity: var(--o, .8); } }
@keyframes scnBeacon { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes scnSway { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes scnSwing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes scnKite { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(14px, -16px) rotate(4deg); } 65% { transform: translate(-10px, 8px) rotate(-3deg); } }
@keyframes scnRise { from { transform: translateY(0); } to { transform: translateY(-1100px); } }
@keyframes scnFlap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
@keyframes scnBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes scnFlutterPath { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(120px, -60px); } 50% { transform: translate(260px, -10px); } 75% { transform: translate(120px, 30px); } }
@keyframes scnShoot { 0%, 82% { transform: translate(0, 0); opacity: 0; } 84% { opacity: 1; } 100% { transform: translate(520px, 170px); opacity: 0; } }
@keyframes scnFirefly { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, -24px); } 100% { transform: translate(-14px, -8px); } }
@keyframes scnCar { from { transform: translateX(-200px); } to { transform: translateX(1800px); } }
@keyframes scnCarRev { from { transform: translateX(1800px); } to { transform: translateX(-200px); } }
@keyframes scnSmoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(30px, -90px) scale(2.4); opacity: 0; } }
@keyframes scnFall { 0% { transform: translate(0, -40px); } 25% { transform: translate(50px, 220px); } 50% { transform: translate(10px, 470px); } 75% { transform: translate(80px, 710px); } 100% { transform: translate(40px, 960px); } }
@keyframes scnFlutter { from { transform: rotate(-50deg) scaleX(1); } to { transform: rotate(70deg) scaleX(.45); } }
@keyframes scnWave { from { transform: translateX(0); } to { transform: translateX(-200px); } }
@keyframes scnFoam { from { transform: translateY(0); opacity: .5; } to { transform: translateY(8px); opacity: 1; } }
@keyframes scnSkate { from { transform: translateX(-160px); } to { transform: translateX(1780px); } }
@keyframes scnHop { 0%, 46%, 54%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-34px) rotate(-6deg); } }

@media (prefers-reduced-motion: reduce) {
  .scene-svg * { animation: none !important; }
}

/* ---- avatar helpers ---- */
.av-svg { display: block; flex: none; overflow: visible; }
.av-svg.av-dead { filter: drop-shadow(0 0 6px rgba(255, 230, 150, .35)); }