/* ═══════════════════════════════════════════════════════════════
   SCENE BACKGROUNDS — Illustrated Lo-Fi Animated Environments
   Inspired by Discord Lo-Fi Activity aesthetic
═══════════════════════════════════════════════════════════════ */

.scene-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene-layer { position: absolute; inset: 0; }
.scene-particles { position: absolute; inset: 0; overflow: hidden; }
.scene-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.scene-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.22) 0%, transparent 50%);
}

/* ── Shared keyframes ─────────────────────────────────────────── */
@keyframes wave-roll {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(6%) scaleY(1.15); }
  100% { transform: translateX(0) scaleY(1); }
}
@keyframes wave-roll-r {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(-5%) scaleY(1.1); }
  100% { transform: translateX(0) scaleY(1); }
}
@keyframes star-twinkle {
  0%,100% { opacity: 1; }
  40% { opacity: 0.35; }
  70% { opacity: 0.75; }
}
@keyframes star-twinkle-b {
  0%,100% { opacity: 0.7; }
  30% { opacity: 1; }
  65% { opacity: 0.2; }
}
@keyframes float-gentle {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes palm-sway {
  0%,100% { transform-origin: bottom center; transform: rotate(0deg); }
  30% { transform-origin: bottom center; transform: rotate(1.5deg); }
  70% { transform-origin: bottom center; transform: rotate(-1deg); }
}
@keyframes aurora-shift {
  0%,100% { opacity: 0.55; transform: scaleX(1) scaleY(1); }
  50% { opacity: 0.80; transform: scaleX(1.06) scaleY(1.04); }
}
@keyframes moon-glow {
  0%,100% { box-shadow: 0 0 28px 8px rgba(220,210,255,0.28), 0 0 70px 20px rgba(200,185,255,0.10); }
  50% { box-shadow: 0 0 40px 14px rgba(220,210,255,0.38), 0 0 100px 35px rgba(200,185,255,0.15); }
}
@keyframes fire-flicker {
  0%,100% { transform: scaleX(1) scaleY(1); opacity: 0.95; filter: brightness(1); }
  25% { transform: scaleX(1.18) scaleY(0.9); opacity: 1; filter: brightness(1.1); }
  60% { transform: scaleX(0.85) scaleY(1.12); opacity: 0.85; filter: brightness(0.95); }
}
@keyframes rain-fall {
  0%   { background-position: 0 0; }
  100% { background-position: 25px 180px; }
}
@keyframes drops-run {
  0%   { transform: translateY(-2%); opacity: 0.8; }
  100% { transform: translateY(12%); opacity: 0; }
}
@keyframes car-right {
  0%   { left: -12%; }
  100% { left: 112%; }
}
@keyframes car-left {
  0%   { right: -12%; }
  100% { right: 112%; }
}
@keyframes neon-flicker {
  0%,93%,97%,100% { opacity: 1; }
  95% { opacity: 0.15; }
  96% { opacity: 0.9; }
  98% { opacity: 0.35; }
}
@keyframes bokeh-drift {
  0%,100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-10px) scale(1.08); opacity: 0.75; }
}
@keyframes steam-up {
  0%   { transform: translateY(0) scaleX(1); opacity: 0; }
  30%  { opacity: 0.55; }
  100% { transform: translateY(-80px) scaleX(2.5) rotate(8deg); opacity: 0; }
}
@keyframes firefly-dance {
  0%,100% { transform: translate(0,0); opacity: 0; }
  20%,80% { opacity: 1; }
  50% { transform: translate(18px,-22px); opacity: 0.9; }
}
@keyframes mist-breathe {
  0%,100% { opacity: 0.45; transform: scaleX(1); }
  50% { opacity: 0.75; transform: scaleX(1.06); }
}
@keyframes trees-sway {
  0%,100% { transform: skewX(0deg); }
  50% { transform: skewX(0.6deg); }
}
@keyframes foam-pulse {
  0%,100% { opacity: 0.55; transform: scaleY(1); }
  50% { opacity: 0.85; transform: scaleY(1.2); }
}
@keyframes ocean-glint {
  0%,100% { opacity: 0; }
  50% { opacity: 0.6; }
}
@keyframes reader-breathe {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}


/* ════════════════════════════════════════════════════════════
   🌊  BEACH NIGHT  (matches the Discord lo-fi screenshot)
════════════════════════════════════════════════════════════ */

.scene-beach .scene-media-video {
  opacity: 1;
  filter: saturate(1.04) contrast(1.02);
}

.scene-beach .l1,
.scene-beach .l2,
.scene-beach .l3,
.scene-beach .scene-particles,
.scene-beach .scene-overlay {
  opacity: 0;
}



/* ════════════════════════════════════════════════════════════
   🌧️  LOFI RAIN  — Window with rain, city lights outside
════════════════════════════════════════════════════════════ */

.scene-rain .l1 {
  background: linear-gradient(162deg,
    #080e1c 0%,
    #0e1828 30%,
    #131f35 60%,
    #0a1020 100%);
}

/* Room interior warmth + window glow */
.scene-rain .l2 {
  background:
    /* Warm lamp glow (top left) */
    radial-gradient(ellipse 25% 30% at 8% 15%, rgba(255,200,100,0.12) 0%, transparent 100%),
    /* Window cold light from outside */
    radial-gradient(ellipse 55% 70% at 50% 48%, rgba(80,140,220,0.06) 0%, transparent 100%),
    /* Desk lamp (bottom right) */
    radial-gradient(ellipse 20% 25% at 88% 85%, rgba(255,180,80,0.10) 0%, transparent 100%);
}

/* Window frame */
.scene-rain .l2::before {
  content: '';
  position: absolute;
  top: 8%; left: 20%; right: 20%; bottom: 20%;
  border: 3px solid rgba(60,90,130,0.45);
  background:
    /* Glass tint */
    rgba(80,120,180,0.04);
  box-shadow:
    inset 0 0 60px rgba(60,100,180,0.06),
    0 0 0 1px rgba(60,90,130,0.25);
}

/* Window cross bar */
.scene-rain .l2::after {
  content: '';
  position: absolute;
  top: 8%; left: 50%; right: 50%; bottom: 20%;
  transform: translateX(-50%);
  width: 3px;
  background: rgba(60,90,130,0.45);
}

/* Rain streaks */
.scene-rain .l3 {
  background: repeating-linear-gradient(
    105deg,
    transparent,
    transparent 2px,
    rgba(160,210,255,0.045) 2px,
    rgba(160,210,255,0.045) 3px
  );
  animation: rain-fall 0.55s linear infinite;
}

/* Use uploaded rainy pixel city video for traffic scene */
.scene-traffic .scene-media-video {
  opacity: 1;
  filter: saturate(1.04) contrast(1.02);
  object-position: center center;
  transform: scale(1.08);
  transform-origin: center;
}

.scene-traffic .l1,
.scene-traffic .l2,
.scene-traffic .l3,
.scene-traffic .scene-particles,
.scene-traffic .scene-overlay {
  opacity: 0;
}

/* Rain drops on glass */
.scene-rain .l3::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 2.5px 9px at 18% 22%, rgba(160,215,255,0.55) 0%, transparent 100%),
    radial-gradient(ellipse 2px 7px at 28% 58%, rgba(150,205,250,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 3px 10px at 42% 15%, rgba(160,215,255,0.50) 0%, transparent 100%),
    radial-gradient(ellipse 2px 8px at 55% 70%, rgba(150,205,250,0.55) 0%, transparent 100%),
    radial-gradient(ellipse 2.5px 9px at 65% 38%, rgba(160,215,255,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 2px 6px at 74% 62%, rgba(150,205,250,0.40) 0%, transparent 100%),
    radial-gradient(ellipse 3px 11px at 82% 25%, rgba(160,215,255,0.50) 0%, transparent 100%);
  animation: drops-run 2.8s ease-in-out infinite;
}

/* City outside window — blurry lights + building silhouettes */
.scene-rain .l3::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background:
    /* Building silhouettes */
    linear-gradient(transparent 10%, rgba(5,10,22,0.92) 40%, rgba(3,6,16,0.97) 100%),
    /* City glow blobs */
    radial-gradient(ellipse 60px 80px at 15% 65%, rgba(60,140,255,0.18) 0%, transparent 100%),
    radial-gradient(ellipse 45px 60px at 32% 75%, rgba(255,180,60,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 70px 90px at 50% 60%, rgba(60,140,255,0.12) 0%, transparent 100%),
    radial-gradient(ellipse 40px 55px at 68% 72%, rgba(255,80,100,0.12) 0%, transparent 100%),
    radial-gradient(ellipse 55px 75px at 82% 65%, rgba(60,140,255,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 35px 50px at 94% 70%, rgba(200,100,255,0.10) 0%, transparent 100%);
}

/* Steamy breath on glass */
.scene-rain .scene-particles::before {
  content: '';
  position: absolute; bottom: 22%; left: 38%; right: 38%;
  height: 4px;
  background: rgba(200,230,255,0.15);
  border-radius: 50%;
  filter: blur(6px);
  animation: steam-up 4s ease-in-out infinite;
}

/* Use uploaded rainy street video for rain scene */
.scene-rain .scene-media-video {
  opacity: 1;
  filter: saturate(1.04) contrast(1.02);
  object-position: center center;
  transform: scale(1.08);
  transform-origin: center;
}

.scene-rain .l1,
.scene-rain .l2,
.scene-rain .l3,
.scene-rain .scene-particles,
.scene-rain .scene-overlay {
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════
   🚗  CITY TRAFFIC — Neon night skyline, wet road, cars
════════════════════════════════════════════════════════════ */

.scene-traffic .l1 {
  background: linear-gradient(180deg,
    #030008 0%,
    #0c0020 35%,
    #180040 65%,
    #200050 100%);
}

/* Stars + purple sky glow */
.scene-traffic .l2 {
  background:
    /* Horizon neon bloom */
    radial-gradient(ellipse 100% 22% at 50% 100%, rgba(140,0,220,0.38) 0%, transparent 100%),
    radial-gradient(ellipse 60% 15% at 30% 100%, rgba(80,0,180,0.22) 0%, transparent 100%),
    radial-gradient(ellipse 60% 15% at 70% 100%, rgba(200,0,200,0.18) 0%, transparent 100%),
    /* Faint stars */
    radial-gradient(1px 1px at  8%  6%, rgba(255,255,255,0.80), transparent),
    radial-gradient(1px 1px at 19% 12%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 30%  4%, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px at 44%  9%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 57%  3%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 79%  7%, rgba(255,255,255,0.80), transparent),
    radial-gradient(1px 1px at 91% 11%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 35% 22%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 84% 16%, rgba(255,255,255,0.70), transparent);
  animation: star-twinkle 6s ease-in-out infinite;
}

/* Neon signs */
.scene-traffic .l2::before {
  content: '';
  position: absolute; top: 30%; left: 18%;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,40,200,0.90);
  box-shadow:
    0 0 12px 4px rgba(255,40,200,0.70),
    0 0 40px 15px rgba(255,0,200,0.30),
    50px 80px 0 rgba(60,180,255,0.90),
    50px 80px 12px 4px rgba(60,180,255,0.60),
    50px 80px 40px 15px rgba(0,150,255,0.25),
    180px 25px 0 rgba(255,200,0,0.90),
    180px 25px 10px 3px rgba(255,200,0,0.60),
    180px 25px 35px 12px rgba(255,150,0,0.20);
  animation: neon-flicker 3.5s ease-in-out infinite;
}

.scene-traffic .l2::after {
  content: '';
  position: absolute; top: 22%; left: 60%;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,220,180,0.90);
  box-shadow:
    0 0 10px 3px rgba(0,220,180,0.70),
    0 0 35px 12px rgba(0,200,160,0.25),
    90px 45px 0 rgba(255,60,120,0.90),
    90px 45px 10px 3px rgba(255,60,120,0.65),
    90px 45px 35px 12px rgba(255,0,100,0.22);
  animation: neon-flicker 4.5s ease-in-out infinite 1.2s;
}

/* Building skyline silhouette */
.scene-traffic .l3 {
  background:
    /* Wet road */
    linear-gradient(transparent 72%, #08001a 72%, #060012 100%),
    /* Road reflections — neon puddles */
    radial-gradient(ellipse 180px 18px at 50% 84%, rgba(160,0,255,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 120px 12px at 25% 88%, rgba(60,100,255,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 100px 10px at 75% 86%, rgba(255,0,180,0.10) 0%, transparent 100%);
}

.scene-traffic .l3::before {
  content: '';
  position: absolute; bottom: 28%; left: 0; right: 0; height: 46%;
  background: #070014;
  clip-path: polygon(
    0% 100%, 0% 58%,
    3% 58%, 3% 38%, 5% 38%, 5% 22%, 7% 22%, 7% 38%, 9% 38%, 9% 52%,
    11% 52%, 11% 28%, 13% 28%, 13% 18%, 15% 18%, 15% 10%, 17% 10%, 17% 28%,
    19% 28%, 19% 38%, 21% 38%, 21% 52%,
    24% 52%, 24% 30%, 26% 30%, 26% 40%, 28% 40%, 28% 15%, 30% 15%, 30% 8%, 32% 8%, 32% 20%,
    34% 20%, 34% 38%, 36% 38%, 36% 48%,
    39% 48%, 39% 22%, 41% 22%, 41% 32%, 43% 32%, 43% 55%,
    46% 55%, 46% 18%, 48% 18%, 48% 6%, 50% 6%, 50% 18%, 52% 18%, 52% 35%,
    54% 35%, 54% 48%, 56% 48%, 56% 28%, 58% 28%, 58% 20%, 60% 20%, 60% 35%,
    62% 35%, 62% 50%, 65% 50%, 65% 25%, 67% 25%, 67% 38%, 69% 38%, 69% 55%,
    71% 55%, 71% 30%, 73% 30%, 73% 18%, 75% 18%, 75% 30%, 77% 30%, 77% 42%,
    79% 42%, 79% 55%, 82% 55%, 82% 32%, 84% 32%, 84% 22%, 86% 22%, 86% 15%,
    88% 15%, 88% 28%, 90% 28%, 90% 42%, 92% 42%, 92% 55%,
    95% 55%, 95% 38%, 97% 38%, 97% 58%, 100% 58%, 100% 100%
  );
}

/* Window lights on buildings */
.scene-traffic .l3::after {
  content: '';
  position: absolute; bottom: 28%; left: 0; right: 0; height: 46%;
  background:
    radial-gradient(2px 3px at  6% 60%, rgba(255,240,180,0.7), transparent),
    radial-gradient(2px 3px at 10% 40%, rgba(255,240,180,0.5), transparent),
    radial-gradient(2px 3px at 16% 70%, rgba(100,180,255,0.6), transparent),
    radial-gradient(2px 3px at 22% 55%, rgba(255,240,180,0.7), transparent),
    radial-gradient(2px 3px at 29% 45%, rgba(255,200,100,0.5), transparent),
    radial-gradient(2px 3px at 35% 65%, rgba(255,240,180,0.6), transparent),
    radial-gradient(2px 3px at 42% 38%, rgba(100,180,255,0.7), transparent),
    radial-gradient(2px 3px at 49% 22%, rgba(255,240,180,0.6), transparent),
    radial-gradient(2px 3px at 55% 48%, rgba(255,100,180,0.5), transparent),
    radial-gradient(2px 3px at 61% 35%, rgba(255,240,180,0.7), transparent),
    radial-gradient(2px 3px at 68% 55%, rgba(100,180,255,0.6), transparent),
    radial-gradient(2px 3px at 75% 42%, rgba(255,240,180,0.5), transparent),
    radial-gradient(2px 3px at 81% 28%, rgba(255,200,100,0.7), transparent),
    radial-gradient(2px 3px at 88% 58%, rgba(255,240,180,0.6), transparent),
    radial-gradient(2px 3px at 94% 45%, rgba(100,180,255,0.5), transparent);
  animation: neon-flicker 8s ease-in-out infinite 0.5s;
}

/* Moving headlights */
.scene-traffic .scene-particles::before {
  content: '';
  position: absolute; top: 73%; left: -12%;
  width: 70px; height: 10px;
  background: radial-gradient(ellipse at center,
    rgba(255,235,180,0.95) 0%,
    rgba(255,210,120,0.50) 40%,
    transparent 75%);
  border-radius: 50%;
  box-shadow: 42px 2px 0 rgba(255,235,180,0.80);
  filter: blur(1px);
  animation: car-right 9s linear infinite;
}

/* Moving tail lights */
.scene-traffic .scene-particles::after {
  content: '';
  position: absolute; top: 79%; right: -12%;
  width: 55px; height: 8px;
  background: radial-gradient(ellipse at center,
    rgba(255,60,60,0.90) 0%,
    rgba(200,30,30,0.45) 40%,
    transparent 75%);
  border-radius: 50%;
  box-shadow: -38px 0 0 rgba(255,60,60,0.75);
  filter: blur(1px);
  animation: car-left 13s linear infinite 3s;
}


/* ════════════════════════════════════════════════════════════
   ☕  COZY CAFE — Warm amber, bokeh, steam
════════════════════════════════════════════════════════════ */

.scene-cafe .l1 {
  background: linear-gradient(165deg,
    #110400 0%,
    #220800 25%,
    #3a1200 50%,
    #501a04 70%,
    #6b2808 100%);
}

/* Warm window glows + lantern */
.scene-cafe .l2 {
  background:
    /* Large window (left) */
    radial-gradient(ellipse 30% 55% at 18% 38%, rgba(255,190,80,0.18) 0%, transparent 100%),
    /* Smaller window (right) */
    radial-gradient(ellipse 20% 35% at 78% 28%, rgba(255,170,60,0.12) 0%, transparent 100%),
    /* Hanging lantern */
    radial-gradient(ellipse 8% 12% at 50% 15%, rgba(255,200,90,0.22) 0%, transparent 100%),
    /* Floor warmth */
    radial-gradient(ellipse 80% 20% at 50% 100%, rgba(200,80,20,0.10) 0%, transparent 100%);
}

/* Bokeh circles (out-of-focus lights) */
.scene-cafe .l2::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 48px at 10% 35%, rgba(255,150,50,0.22) 0%, transparent 100%),
    radial-gradient(circle 32px at 25% 65%, rgba(255,130,40,0.18) 0%, transparent 100%),
    radial-gradient(circle 56px at 40% 42%, rgba(255,170,60,0.20) 0%, transparent 100%),
    radial-gradient(circle 28px at 60% 72%, rgba(255,110,30,0.16) 0%, transparent 100%),
    radial-gradient(circle 42px at 72% 38%, rgba(255,150,50,0.22) 0%, transparent 100%),
    radial-gradient(circle 22px at 85% 60%, rgba(255,130,40,0.18) 0%, transparent 100%),
    radial-gradient(circle 36px at 92% 28%, rgba(255,160,55,0.20) 0%, transparent 100%);
  animation: bokeh-drift 7s ease-in-out infinite;
}

/* Table silhouette + mug */
.scene-cafe .l2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 28%;
  background: #0e0400;
  clip-path: polygon(
    0% 100%, 0% 30%,
    100% 30%, 100% 100%
  );
}

/* Wood grain texture on floor/table */
.scene-cafe .l3 {
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(100,40,10,0.05) 40px,
      rgba(100,40,10,0.05) 41px
    ),
    linear-gradient(transparent 72%, rgba(60,20,5,0.4) 72%);
}

/* Steam wisps */
.scene-cafe .l3::before {
  content: '';
  position: absolute; bottom: 34%; left: 44%;
  width: 6px; height: 70px;
  background: linear-gradient(transparent, rgba(255,220,180,0.28), transparent);
  border-radius: 3px;
  filter: blur(4px);
  animation: steam-up 3s ease-in-out infinite;
}

.scene-cafe .l3::after {
  content: '';
  position: absolute; bottom: 36%; left: 52%;
  width: 5px; height: 55px;
  background: linear-gradient(transparent, rgba(255,210,160,0.22), transparent);
  border-radius: 3px;
  filter: blur(3px);
  animation: steam-up 4s ease-in-out infinite 1.2s;
}

/* Dust motes / particles */
.scene-cafe .scene-particles::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 40%, rgba(255,200,100,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 25%, rgba(255,180,80,0.4), transparent),
    radial-gradient(2px 2px at 60% 55%, rgba(255,200,100,0.5), transparent),
    radial-gradient(1.5px 1.5px at 75% 30%, rgba(255,180,80,0.4), transparent),
    radial-gradient(2px 2px at 88% 45%, rgba(255,200,100,0.5), transparent);
  animation: float-gentle 8s ease-in-out infinite;
}

/* Use uploaded coffee pixel video for cafe scene */
.scene-cafe .scene-media-video {
  opacity: 1;
  filter: saturate(1.04) contrast(1.02);
  object-position: center center;
  transform: scale(1.08);
  transform-origin: center;
}

.scene-cafe .l1,
.scene-cafe .l2,
.scene-cafe .l3,
.scene-cafe .scene-particles,
.scene-cafe .scene-overlay {
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════
   🐸  MINECRAFT-STYLE RAINY SWAMP — blocky marsh mood
════════════════════════════════════════════════════════════ */

.scene-forest .l1 {
  background: linear-gradient(180deg,
    #1f3128 0%,
    #2f4638 25%,
    #3c5542 55%,
    #2a3f31 100%);
}

/* Pixel sky haze + distant biome fog */
.scene-forest .l2 {
  background:
    radial-gradient(ellipse 75% 25% at 50% 90%, rgba(118,150,124,0.32) 0%, transparent 100%),
    linear-gradient(180deg, rgba(210,235,220,0.06) 0%, rgba(120,160,140,0.02) 40%, transparent 100%);
}

/* Blocky tree silhouettes */
.scene-forest .l2::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 42%;
  background:
    linear-gradient(#20362a 0 0) 3% 100% / 6% 82% no-repeat,
    linear-gradient(#2f4a37 0 0) 1% 28% / 12% 26% no-repeat,
    linear-gradient(#21372a 0 0) 19% 100% / 6% 88% no-repeat,
    linear-gradient(#33513c 0 0) 14% 24% / 16% 32% no-repeat,
    linear-gradient(#20382b 0 0) 39% 100% / 7% 84% no-repeat,
    linear-gradient(#34523d 0 0) 33% 26% / 18% 34% no-repeat,
    linear-gradient(#1f3529 0 0) 62% 100% / 7% 86% no-repeat,
    linear-gradient(#35533f 0 0) 55% 22% / 18% 36% no-repeat,
    linear-gradient(#22392c 0 0) 82% 100% / 6% 80% no-repeat,
    linear-gradient(#324f3b 0 0) 76% 28% / 16% 30% no-repeat,
    linear-gradient(#21372a 0 0) 95% 100% / 5% 78% no-repeat,
    linear-gradient(#2c4735 0 0) 90% 32% / 10% 24% no-repeat;
  image-rendering: pixelated;
}

/* Hanging vines */
.scene-forest .l2::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(38,74,51,0.65) 0 0) 22% 18% / 2px 25% no-repeat,
    linear-gradient(rgba(38,74,51,0.65) 0 0) 27% 20% / 2px 22% no-repeat,
    linear-gradient(rgba(38,74,51,0.65) 0 0) 58% 16% / 2px 26% no-repeat,
    linear-gradient(rgba(38,74,51,0.65) 0 0) 63% 20% / 2px 20% no-repeat,
    linear-gradient(rgba(38,74,51,0.65) 0 0) 84% 24% / 2px 18% no-repeat;
  image-rendering: pixelated;
}

/* Water + shore blocks */
.scene-forest .l3 {
  overflow: visible;
  background:
    linear-gradient(to bottom, transparent 66%, rgba(32,64,54,0.72) 66%, rgba(23,49,43,0.92) 100%),
    linear-gradient(90deg,
      rgba(48,77,59,0.92) 0 12%,
      rgba(32,60,47,0.86) 12% 23%,
      rgba(52,83,63,0.9) 23% 34%,
      rgba(29,56,45,0.84) 34% 47%,
      rgba(50,80,61,0.9) 47% 59%,
      rgba(30,58,46,0.86) 59% 73%,
      rgba(52,82,64,0.9) 73% 86%,
      rgba(28,56,44,0.86) 86% 100%
    );
  image-rendering: pixelated;
}

/* Gentle wave sheen */
.scene-forest .l3::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 20%;
  background: repeating-linear-gradient(
    90deg,
    rgba(148,190,175,0.18) 0 12px,
    rgba(148,190,175,0.08) 12px 24px
  );
  opacity: 0.45;
  animation: bokeh-drift 7s ease-in-out infinite;
  image-rendering: pixelated;
}

/* Pixel rain */
.scene-forest .l3::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    102deg,
    transparent,
    transparent 6px,
    rgba(202,230,220,0.14) 6px,
    rgba(202,230,220,0.14) 8px
  );
  animation: rain-fall 0.45s linear infinite;
}

/* Rain splash pixels */
.scene-forest .scene-particles::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(210,240,230,0.18) 0 0) 18% 82% / 10px 2px no-repeat,
    linear-gradient(rgba(210,240,230,0.18) 0 0) 36% 86% / 8px 2px no-repeat,
    linear-gradient(rgba(210,240,230,0.16) 0 0) 49% 84% / 11px 2px no-repeat,
    linear-gradient(rgba(210,240,230,0.18) 0 0) 66% 88% / 9px 2px no-repeat,
    linear-gradient(rgba(210,240,230,0.16) 0 0) 82% 83% / 10px 2px no-repeat;
  animation: bokeh-drift 5.5s ease-in-out infinite;
  image-rendering: pixelated;
}

/* Distant lightning fog pulse */
.scene-forest .scene-particles::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(215,240,230,0.12) 0%, transparent 62%);
  animation: mist-breathe 9s ease-in-out infinite;
}

/* Use uploaded Minecraft swamp video instead of generated layers */
.scene-forest .scene-media-video {
  opacity: 1;
  filter: saturate(1.04) contrast(1.02);
  object-position: center 60%;
  transform: scale(1.16);
  transform-origin: center;
}

.scene-forest .l1,
.scene-forest .l2,
.scene-forest .l3,
.scene-forest .scene-particles {
  opacity: 0;
}

.scene-forest .l1 {
  opacity: 0.35;
}

.scene-forest .scene-overlay {
  opacity: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.12) 45%, transparent 70%);
}

/* Night Sky uses uploaded video only */
.scene-nightsky .scene-media-video {
  opacity: 1 !important;
  filter: saturate(1.03) contrast(1.02);
  object-position: center center;
  transform: scale(1.08);
  transform-origin: center;
}

.scene-nightsky .l1,
.scene-nightsky .l2,
.scene-nightsky .l3,
.scene-nightsky .scene-particles,
.scene-nightsky .scene-overlay {
  opacity: 0 !important;
}