/* Cinematic CSS "footage" — layered animated scenes that read as live video.
   Each .scene is a full-bleed living backdrop. Drop a real <video> inside any
   .scene later and it will sit on top; these are the fallback + demo layer. */

.scene{position:absolute;inset:0;overflow:hidden;background:#05070c;isolation:isolate}
.scene>*{position:absolute;inset:0}
.scene .pan>*{position:absolute;inset:0}
.scene video{width:100%;height:100%;object-fit:cover;z-index:5}

/* slow cinematic pan applied to the base gradient layers */
@keyframes drift  {0%{transform:scale(1.12) translate(-2%,0)}100%{transform:scale(1.2) translate(2%,-2%)}}
@keyframes auroraWave{0%{transform:translateX(-6%) skewX(-8deg) scaleY(1)}50%{transform:translateX(4%) skewX(6deg) scaleY(1.25)}100%{transform:translateX(-6%) skewX(-8deg) scaleY(1)}}
@keyframes auroraWave2{0%{transform:translateX(5%) skewX(10deg) scaleY(1.1)}50%{transform:translateX(-5%) skewX(-6deg) scaleY(0.85)}100%{transform:translateX(5%) skewX(10deg) scaleY(1.1)}}
@keyframes fog   {0%{transform:translateX(-10%)}100%{transform:translateX(10%)}}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sunBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5%)}}
@keyframes shimmer{0%{background-position:0 0}100%{background-position:0 -1400px}}

.scene .pan{animation:drift 26s ease-in-out infinite alternate;will-change:transform}
.scene .grain{position:absolute;inset:-50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:.06;mix-blend-mode:overlay;animation:shimmer 7s steps(8) infinite;z-index:8;pointer-events:none}
.scene .vignette{background:radial-gradient(120% 90% at 50% 35%,transparent 40%,rgba(0,0,0,.55) 100%);z-index:7;pointer-events:none}
.scene .stars{background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 70% 20%,#cfe3ff,transparent),radial-gradient(1.6px 1.6px at 45% 60%,#fff,transparent),radial-gradient(1px 1px at 85% 50%,#fff,transparent),radial-gradient(1.3px 1.3px at 30% 80%,#dce8ff,transparent),radial-gradient(1px 1px at 60% 75%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 85%,#fff,transparent);animation:twinkle 5s ease-in-out infinite;z-index:1}

/* ---- AURORA (night, green/violet) ---- */
.scene-aurora{background:linear-gradient(180deg,#04060f 0%,#071427 45%,#0a1f2e 100%)}
.scene-aurora .ridge{background:linear-gradient(180deg,transparent 60%,#020308 78%,#01020a 100%);z-index:3}
.scene-aurora .a1{background:radial-gradient(60% 120% at 50% 0%,rgba(64,255,170,.55),transparent 60%);filter:blur(28px);mix-blend-mode:screen;animation:auroraWave 14s ease-in-out infinite;z-index:2;top:-20%;height:90%}
.scene-aurora .a2{background:radial-gradient(50% 120% at 40% 0%,rgba(120,90,255,.5),transparent 60%);filter:blur(34px);mix-blend-mode:screen;animation:auroraWave2 18s ease-in-out infinite;z-index:2;top:-15%;height:85%}
.scene-aurora .a3{background:radial-gradient(45% 120% at 65% 0%,rgba(80,230,255,.4),transparent 55%);filter:blur(30px);mix-blend-mode:screen;animation:auroraWave 22s ease-in-out infinite reverse;z-index:2;top:-10%;height:80%}

/* ---- FJORD (Ísafjörður, crisp blue dusk) ---- */
.scene-fjord{background:linear-gradient(180deg,#0a1722 0%,#12303f 50%,#0c2330 100%)}
.scene-fjord .sky{background:radial-gradient(80% 70% at 50% 12%,rgba(120,190,225,.55),transparent 60%);z-index:1}
.scene-fjord .mtL{clip-path:polygon(0 100%,0 38%,18% 30%,34% 46%,50% 34%,50% 100%);background:linear-gradient(180deg,#16384a,#0a1c27);z-index:2}
.scene-fjord .mtR{clip-path:polygon(50% 100%,50% 40%,66% 28%,82% 44%,100% 32%,100% 100%);background:linear-gradient(180deg,#1a4153,#0a1c27);z-index:2}
.scene-fjord .water{top:auto;bottom:0;height:34%;background:linear-gradient(180deg,#1d4f63,#0c2b39);z-index:3}
.scene-fjord .water::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(180,225,240,.10) 0 2px,transparent 2px 9px);animation:shimmer 9s linear infinite}
.scene-fjord .haze{background:linear-gradient(180deg,transparent 40%,rgba(180,210,225,.18) 66%,transparent 80%);animation:fog 24s ease-in-out infinite alternate;z-index:4}

/* ---- RIVER (Hvítá Inn, warm countryside dusk) ---- */
.scene-river{background:linear-gradient(180deg,#1a2433 0%,#33425a 40%,#7a6a52 100%)}
.scene-river .sky{background:radial-gradient(90% 80% at 70% 16%,rgba(255,200,140,.6),transparent 55%);z-index:1}
.scene-river .hills{top:auto;bottom:28%;height:30%;clip-path:polygon(0 100%,0 60%,30% 38%,55% 56%,78% 36%,100% 52%,100% 100%);background:linear-gradient(180deg,#3c4a3a,#26302a);z-index:2}
.scene-river .river{top:auto;bottom:0;height:30%;background:linear-gradient(180deg,#9fae8e,#6f7d62);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);z-index:3}
.scene-river .river::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,240,210,.14) 0 2px,transparent 2px 10px);animation:shimmer 8s linear infinite}
.scene-river .haze{background:linear-gradient(180deg,transparent 45%,rgba(255,210,160,.16) 70%,transparent 88%);animation:fog 26s ease-in-out infinite alternate;z-index:4}

/* ---- TRUCK (Hvítá Trucks, khaki / headlamp dusk) ---- */
.scene-truck{background:linear-gradient(180deg,#10130c 0%,#23291a 50%,#3a3a28 100%)}
.scene-truck .sky{background:radial-gradient(90% 70% at 30% 18%,rgba(230,150,70,.5),transparent 55%);z-index:1}
.scene-truck .ground{top:auto;bottom:0;height:42%;background:linear-gradient(180deg,#4a4730,#23261a);z-index:2}
.scene-truck .beam{background:conic-gradient(from 60deg at 22% 70%,transparent 0deg,rgba(255,220,150,.22) 12deg,transparent 26deg);mix-blend-mode:screen;z-index:3;animation:sunBob 9s ease-in-out infinite}
.scene-truck .haze{background:linear-gradient(180deg,transparent 50%,rgba(210,180,120,.14) 78%,transparent 92%);animation:fog 22s ease-in-out infinite alternate;z-index:4}

/* ---- MURAL (Stykkishólmur, painterly art-town) ---- */
.scene-mural{background:linear-gradient(135deg,#3a1030 0%,#7a1e54 45%,#c2456f 100%)}
.scene-mural .blob1{background:radial-gradient(40% 40% at 28% 32%,rgba(255,200,90,.7),transparent 70%);filter:blur(8px);mix-blend-mode:screen;z-index:1;animation:sunBob 12s ease-in-out infinite}
.scene-mural .blob2{background:radial-gradient(38% 38% at 74% 64%,rgba(80,220,210,.65),transparent 70%);filter:blur(8px);mix-blend-mode:screen;z-index:1;animation:sunBob 15s ease-in-out infinite reverse}
.scene-mural .blob3{background:radial-gradient(30% 30% at 60% 22%,rgba(120,120,255,.55),transparent 70%);filter:blur(10px);mix-blend-mode:screen;z-index:1;animation:auroraWave 20s ease-in-out infinite}
.scene-mural .strokes{background:repeating-linear-gradient(115deg,rgba(0,0,0,.10) 0 14px,transparent 14px 34px);mix-blend-mode:multiply;z-index:2}

/* ---- MIDNIGHT SUN (bright golden, endless light) ---- */
.scene-midnight{background:linear-gradient(180deg,#ffd9a0 0%,#ffb877 30%,#f29457 60%,#cf6f4e 100%)}
.scene-midnight .sun{background:radial-gradient(26% 26% at 50% 70%,rgba(255,255,235,.98),rgba(255,220,150,.5) 45%,transparent 70%);mix-blend-mode:screen;z-index:2;animation:sunBob 14s ease-in-out infinite}
.scene-midnight .ridge{top:auto;bottom:0;height:30%;clip-path:polygon(0 100%,0 58%,22% 40%,44% 60%,66% 36%,88% 56%,100% 44%,100% 100%);background:linear-gradient(180deg,#9a5a3e,#5e3424);z-index:3}
.scene-midnight .water{top:auto;bottom:0;height:26%;background:linear-gradient(180deg,rgba(255,210,150,.85),rgba(220,140,90,.9));z-index:2}
.scene-midnight .water::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,240,.35) 0 2px,transparent 2px 8px);animation:shimmer 7s linear infinite}
.scene-midnight .haze{background:linear-gradient(180deg,rgba(255,240,210,.4),transparent 40%);z-index:4}

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