.scene-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.scene-layer > * {
  pointer-events: none;
}

.scene-effect {
  --x: 50%;
  --y: 50%;
  --size: 10%;
  --height: 10%;
  --size-px: 16px;
  --opacity: 0.4;
  --speed: 8s;
  --blur: 0px;
  --angle: 0deg;
  --color: #ffffff;
  --snow-density-px: 82px;
  --snow-wind: -24px;
  --snow-drift: 38px;
  --snow-depth: 0.78;
  --snow-sparkle: 0.34;
  --snow-depth-opacity: 0.75;
  --snow-sparkle-low: 0.11;
  --snow-sparkle-mid: 0.18;
  --snow-flake-min: 2px;
  --snow-flake-max: 15px;
  --snow-gust: 50px;
  --snow-speed-field: 11.25s;
  --snow-speed-sparkle: 6.48s;
  position: absolute;
  mix-blend-mode: screen;
}

.scene-image-item {
  --x: 50%;
  --y: 50%;
  --size: 20%;
  --opacity: 1;
  --blur: 0px;
  --angle: 0deg;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;
  transform: translate(-50%, -50%) rotate(var(--angle));
  opacity: var(--opacity);
  filter: blur(var(--blur));
}

.lantern-flicker,
.flash-dot,
.steam-wisp,
.sparkle-burst,
.light-beam,
.glow-orb,
.shimmer-sweep,
.magic-dust,
.spark-trail,
.neon-edge,
.warning-blink,
.window-warmth,
.tiny-bob {
  left: var(--x);
  top: var(--y);
  opacity: var(--opacity);
  filter: blur(var(--blur));
}

.lantern-flicker,
.flash-dot,
.sparkle-burst,
.glow-orb,
.warning-blink,
.tiny-bob {
  width: var(--size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--angle));
  border-radius: 50%;
}

.steam-wisp,
.light-beam,
.shimmer-sweep,
.spark-trail,
.neon-edge,
.magic-dust,
.window-warmth {
  width: var(--size);
  height: var(--height);
  transform: translate(-50%, -50%) rotate(var(--angle));
}

.lantern-flicker {
  background:
    radial-gradient(circle, rgba(255, 246, 188, 0.78) 0%, rgba(255, 187, 72, 0.34) 32%, rgba(255, 143, 28, 0.12) 57%, transparent 74%);
  animation: lantern-flicker var(--speed) ease-in-out infinite;
}

.flash-dot {
  background: var(--color);
  box-shadow:
    0 0 calc(var(--size-px) * 1.4) color-mix(in srgb, var(--color), white 20%),
    0 0 calc(var(--size-px) * 2.8) color-mix(in srgb, var(--color), transparent 20%),
    0 0 calc(var(--size-px) * 5) color-mix(in srgb, var(--color), transparent 54%);
  animation: flash-dot var(--speed) steps(2, end) infinite;
}

.steam-wisp {
  background:
    radial-gradient(ellipse at 24% 60%, rgba(255, 255, 255, 0.64) 0 14%, transparent 33%),
    radial-gradient(ellipse at 48% 48%, rgba(255, 255, 255, 0.55) 0 18%, transparent 38%),
    radial-gradient(ellipse at 72% 46%, rgba(255, 255, 255, 0.46) 0 16%, transparent 35%);
  animation: steam-wisp var(--speed) ease-in-out infinite;
}

.sparkle-burst {
  background:
    radial-gradient(circle at 50% 8%, var(--color) 0 3%, transparent 7%),
    radial-gradient(circle at 84% 28%, var(--color) 0 3%, transparent 7%),
    radial-gradient(circle at 78% 78%, var(--color) 0 3%, transparent 7%),
    radial-gradient(circle at 20% 72%, var(--color) 0 3%, transparent 7%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0 4%, transparent 13%);
  animation: sparkle-burst var(--speed) ease-in-out infinite;
}

.light-beam {
  transform: translate(-50%, -10%) rotate(var(--angle));
  transform-origin: 50% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color), transparent 15%), color-mix(in srgb, var(--color), transparent 85%) 58%, transparent);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  animation: light-beam var(--speed) ease-in-out infinite;
}

.glow-orb {
  background: radial-gradient(circle, color-mix(in srgb, var(--color), white 35%) 0 7%, color-mix(in srgb, var(--color), transparent 22%) 34%, transparent 72%);
  animation: glow-orb var(--speed) ease-in-out infinite;
}

.shimmer-sweep {
  overflow: hidden;
}

.shimmer-sweep::before {
  content: "";
  position: absolute;
  inset: -40% 100% -40% -80%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color), transparent 8%), transparent);
  animation: shimmer-sweep var(--speed) ease-in-out infinite;
}

.spark-trail {
  background:
    radial-gradient(circle at 15% 50%, var(--color) 0 5%, transparent 10%),
    radial-gradient(circle at 38% 50%, var(--color) 0 3%, transparent 8%),
    radial-gradient(circle at 62% 50%, var(--color) 0 2.6%, transparent 7%),
    linear-gradient(90deg, color-mix(in srgb, var(--color), transparent 65%), transparent);
  animation: spark-trail var(--speed) ease-in-out infinite;
}

.neon-edge {
  border: 2px solid var(--color);
  border-radius: 6px;
  box-shadow: 0 0 8px var(--color), 0 0 18px color-mix(in srgb, var(--color), transparent 20%);
  animation: neon-edge var(--speed) ease-in-out infinite;
}

.warning-blink {
  background: var(--color);
  box-shadow: 0 0 10px var(--color), 0 0 24px color-mix(in srgb, var(--color), transparent 30%);
  animation: warning-blink var(--speed) steps(2, end) infinite;
}

.tiny-bob {
  background: radial-gradient(circle, var(--color) 0 18%, transparent 62%);
  animation: tiny-bob var(--speed) ease-in-out infinite;
}

.north-pole-snow {
  left: var(--area-left);
  top: var(--area-top);
  width: var(--area-width);
  height: var(--area-height);
  overflow: hidden;
  opacity: var(--opacity);
  filter: blur(var(--blur));
  isolation: isolate;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--color), transparent 20%) 0 var(--snow-min-core), transparent var(--snow-min-soft)),
    radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 var(--snow-min-b), transparent var(--snow-min-b-soft));
  background-size:
    var(--snow-density-1) var(--snow-density-2),
    var(--snow-density-3) var(--snow-density-4);
  animation: north-pole-snow-field var(--snow-speed-field) linear infinite;
}

.hero .north-pole-snow {
  top: max(0%, calc(var(--area-top) - 15%));
  height: min(100%, calc(var(--area-height) + 35%));
}

.north-pole-snow::before,
.north-pole-snow::after {
  content: "";
  position: absolute;
  inset: -28%;
  transform: rotate(var(--angle));
}

.north-pole-snow::before {
  opacity: var(--snow-depth-opacity);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--color), white 42%) 0 var(--snow-max-a), transparent var(--snow-max-a-soft)),
    radial-gradient(circle, var(--color) 0 var(--snow-max-b), transparent var(--snow-max-b-soft)),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 var(--snow-max-c), transparent var(--snow-max-c-soft));
  background-size:
    var(--snow-density-4) var(--snow-density-5),
    var(--snow-density-6) var(--snow-density-7),
    var(--snow-density-8) var(--snow-density-9);
  animation: north-pole-snow-near var(--speed) cubic-bezier(.35, 0, .65, 1) infinite;
}

.north-pole-snow::after {
  opacity: var(--snow-sparkle);
  background:
    radial-gradient(circle, #ffffff 0 1px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--color), white 60%) 0 1.5px, transparent 4px);
  background-size:
    var(--snow-density-7) var(--snow-density-5),
    var(--snow-density-10) var(--snow-density-11);
  animation: north-pole-snow-sparkle var(--snow-speed-sparkle) ease-in-out infinite;
}

.magic-dust {
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--height);
  transform: translate(-50%, -50%) rotate(var(--angle));
  opacity: var(--opacity);
  filter: blur(var(--blur));
  background:
    radial-gradient(circle at 12% 72%, var(--color) 0 1.8%, transparent 4%),
    radial-gradient(circle at 28% 42%, var(--color) 0 1.4%, transparent 3.6%),
    radial-gradient(circle at 48% 82%, var(--color) 0 1.8%, transparent 4%),
    radial-gradient(circle at 62% 22%, var(--color) 0 1.5%, transparent 3.8%),
    radial-gradient(circle at 82% 56%, var(--color) 0 1.7%, transparent 4%);
  animation: magic-dust var(--speed) linear infinite;
}

.window-warmth {
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--height);
  transform: translate(-50%, -50%) rotate(var(--angle));
  border-radius: 45%;
  opacity: var(--opacity);
  filter: blur(var(--blur));
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color), white 16%) 0 18%, color-mix(in srgb, var(--color), transparent 40%) 48%, transparent 78%);
  animation: window-warmth var(--speed) ease-in-out infinite;
}

@keyframes north-pole-snow-field {
  0% {
    background-position: 0 -20%, 34% -32%;
    transform: translate3d(0, 0, 0) rotate(var(--angle));
  }

  50% {
    transform: translate3d(var(--snow-wind), 0, 0) rotate(var(--angle));
  }

  100% {
    background-position: var(--snow-wind) 120%, var(--snow-wind-reverse) 136%;
    transform: translate3d(0, 0, 0) rotate(var(--angle));
  }
}

@keyframes north-pole-snow-near {
  0% {
    background-position: 0 -28%, 46% -36%, 82% -18%;
    transform: translate3d(0, -4%, 0) rotate(var(--angle));
  }

  38% {
    transform: translate3d(calc(var(--snow-wind) + var(--snow-gust)), 10%, 0) rotate(var(--angle));
  }

  72% {
    transform: translate3d(calc(var(--snow-wind) - var(--snow-drift)), 18%, 0) rotate(var(--angle));
  }

  100% {
    background-position: var(--snow-wind) 118%, var(--snow-wind-reverse) 132%, calc(var(--snow-wind) + var(--snow-drift)) 126%;
    transform: translate3d(var(--snow-wind), 28%, 0) rotate(var(--angle));
  }
}

@keyframes north-pole-snow-sparkle {
  0%,
  100% {
    opacity: var(--snow-sparkle-low);
    transform: translate3d(0, 0, 0) rotate(var(--angle));
  }

  42% {
    opacity: var(--snow-sparkle);
    transform: translate3d(var(--snow-drift-soft), 9%, 0) rotate(calc(0deg - var(--angle)));
  }

  68% {
    opacity: var(--snow-sparkle-mid);
  }
}

@keyframes lantern-flicker {
  0%,
  100% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(0.96);
  }

  18% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.04);
  }

  31% {
    opacity: 0.6;
  }

  47% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }

  68% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(1.01);
  }
}

@keyframes flash-dot {
  0%,
  45% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(0.82);
  }

  46%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes steam-wisp {
  0% {
    opacity: 0;
    transform: translate(-62%, -48%) scale(0.8) rotate(-1deg);
  }

  20% {
    opacity: 0.72;
  }

  58% {
    opacity: 0.56;
    transform: translate(-50%, -52%) scale(1.05) rotate(2deg);
  }

  100% {
    opacity: 0;
    transform: translate(-35%, -57%) scale(1.28) rotate(4deg);
  }
}

@keyframes sparkle-burst {
  0%,
  100% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.74) rotate(0deg);
  }

  42% {
    opacity: var(--opacity);
    transform: translate(-50%, -50%) scale(1.12) rotate(18deg);
  }

  62% {
    opacity: 0.45;
  }
}

@keyframes light-beam {
  0%,
  100% {
    opacity: calc(var(--opacity) * 0.45);
  }

  50% {
    opacity: var(--opacity);
  }
}

@keyframes glow-orb {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.95);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes shimmer-sweep {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(240%);
  }
}

@keyframes magic-dust {
  0% {
    transform: translate(-50%, -42%) rotate(var(--angle));
  }

  100% {
    transform: translate(-50%, -62%) rotate(var(--angle));
  }
}

@keyframes spark-trail {
  0%,
  100% {
    opacity: calc(var(--opacity) * 0.25);
    transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0.75);
  }

  45% {
    opacity: var(--opacity);
    transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(1.12);
  }
}

@keyframes neon-edge {
  0%,
  100% {
    opacity: calc(var(--opacity) * 0.42);
  }

  50% {
    opacity: var(--opacity);
  }
}

@keyframes warning-blink {
  0%,
  48% {
    opacity: calc(var(--opacity) * 0.18);
  }

  49%,
  100% {
    opacity: var(--opacity);
  }
}

@keyframes window-warmth {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle)) scale(0.96);
  }

  50% {
    transform: translate(-50%, -50%) rotate(var(--angle)) scale(1.06);
  }
}

@keyframes tiny-bob {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle));
  }

  50% {
    transform: translate(-50%, -78%) rotate(var(--angle));
  }
}

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

  .scene-effect::before,
  .scene-effect::after {
    animation: none !important;
  }
}