/* ========================================
   SCENE BACKGROUND — Faded fight art behind every panel
   Two layers so we can crossfade on tab switch (game-screen vibe)
   ======================================== */

/* Body must be transparent so fixed negative-z scene layers can show.
   Black fallback lives on the html root. */
html { background: var(--black); }
body { background: transparent; }

/* Home hero originally painted solid black over everything — drop the black
   fill, keep the gold radial glow on top of the scene */
.hero__bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(212, 175, 55, 0.04) 0%, transparent 50%) !important;
}

.scene-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
  /* slow ken burns drift — feels alive, not static */
  animation: sceneDrift 40s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.scene-bg--active {
  opacity: 0.38;
}

@keyframes sceneDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* Dark gradient overlay — pulls content forward, kills any photo glare.
   Sits above the scene bg, below all content. */
.scene-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(8, 8, 10, 0.2) 0%, rgba(8, 8, 10, 0.7) 70%, rgba(8, 8, 10, 0.82) 100%);
}

/* Gold flash on scene change — broadcast cut feel */
.scene-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0) 60%);
  opacity: 0;
}

.scene-flash--fire {
  animation: sceneFlash 320ms var(--ease-out);
}

@keyframes sceneFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Make panels feel more "scene cut" — punchier slide */
.panel--active {
  animation: panelSceneIn 0.45s var(--ease-out);
}

@keyframes panelSceneIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.995);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}