/* Pixelated backdrop layer used behind title cards and walk-in scenes. */

.scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Default (no image) backdrop: plum night with a rose horizon glow and a
   lavender top-light. Pure CSS gradients, no asset. */
.scene-bg--gradient {
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 108%, color-mix(in srgb, var(--color-accent-rose) 24%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 45% at 12% 0%, color-mix(in srgb, var(--color-accent-lavender) 16%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--color-bg), var(--color-surface));
  background-position: center;
}

/* ---- Idle sparkle: two layers of soft dots that twinkle and drift upward.
   Each layer is a repeating tile of radial-gradient dots; drifting by exactly
   one tile height (--drift) makes the loop seamless. Transform + opacity only,
   so it stays cheap. Only the gradient backdrop gets it (the title screen);
   levels with a real background image are untouched. ---- */
.scene-bg--gradient::before,
.scene-bg--gradient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--drift) * -1); /* extra height so the drift never shows a gap */
  pointer-events: none;
  background-repeat: repeat;
  will-change: transform, opacity;
}

.scene-bg--gradient::before {
  --drift: 520px;
  background-size: 610px 520px;
  background-image:
    radial-gradient(circle at 48px 71px, var(--color-accent-gold) 0 1.5px, transparent 4px),
    radial-gradient(circle at 233px 29px, var(--color-accent-rose) 0 1px, transparent 3.5px),
    radial-gradient(circle at 391px 134px, var(--color-accent-lavender) 0 1.5px, transparent 4px),
    radial-gradient(circle at 559px 87px, var(--color-text) 0 1px, transparent 3px),
    radial-gradient(circle at 117px 238px, var(--color-accent-lavender) 0 1px, transparent 3.5px),
    radial-gradient(circle at 322px 297px, var(--color-accent-gold) 0 1px, transparent 3.5px),
    radial-gradient(circle at 503px 261px, var(--color-accent-rose) 0 1.5px, transparent 4px),
    radial-gradient(circle at 71px 413px, var(--color-text) 0 1px, transparent 3px),
    radial-gradient(circle at 266px 459px, var(--color-accent-rose) 0 1px, transparent 3.5px),
    radial-gradient(circle at 452px 401px, var(--color-accent-gold) 0 1.5px, transparent 4px);
  animation:
    sparkle-twinkle 5s ease-in-out infinite alternate,
    sparkle-drift 90s linear infinite;
}

.scene-bg--gradient::after {
  --drift: 670px;
  background-size: 830px 670px;
  background-image:
    radial-gradient(circle at 131px 96px, var(--color-accent-rose) 0 2px, transparent 7px),
    radial-gradient(circle at 587px 212px, var(--color-accent-gold) 0 2px, transparent 7px),
    radial-gradient(circle at 342px 388px, var(--color-accent-lavender) 0 2px, transparent 7px),
    radial-gradient(circle at 709px 531px, var(--color-accent-rose) 0 2px, transparent 7px),
    radial-gradient(circle at 76px 574px, var(--color-accent-gold) 0 2px, transparent 7px);
  animation:
    sparkle-twinkle 7s ease-in-out -3s infinite alternate,
    sparkle-drift 140s linear infinite;
}

@keyframes sparkle-twinkle {
  from { opacity: 0.25; }
  to { opacity: 0.95; }
}

@keyframes sparkle-drift {
  to { transform: translateY(calc(var(--drift) * -1)); }
}

.scene-bg__badge {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 1px;
  color: var(--color-bg);
  background: var(--color-accent-gold);
  padding: var(--space-1) var(--space-2);
  z-index: 2;
}