/* ===========================
   MAGISTRALE MANNEN — SCENES CSS
   Background scene styles
   =========================== */

/* Scene background base */
.scene-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.5s ease;
}

.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- SCENE THEMES ---- */

/* LAN Party Scene */
.scene-lan-party {
  background: linear-gradient(180deg,
    #050d18 0%,
    #0a1628 30%,
    #0d1b2a 100%
  );
}

.scene-lan-party::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 60%, rgba(0, 245, 255, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 40%, rgba(244, 162, 97, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ---- SCENE GRID OVERLAY (gaming aesthetic) ---- */
.scene-background.grid-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}

/* ---- SCENE: EXTERIOR (meetup) ---- */
.scene-exterior {
  background: linear-gradient(180deg,
    #1a0533 0%,
    #2d0f52 40%,
    #4a1a7a 70%,
    #1a0533 100%
  );
}

.scene-exterior::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(138, 43, 226, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- SCENE: BEDROOM (character routes) ---- */
.scene-bedroom {
  background: linear-gradient(180deg,
    #0d1b2a 0%,
    #1a2f4a 60%,
    #0d1b2a 100%
  );
}

/* ---- SCENE: GAMING ROOM ---- */
.scene-gaming {
  background: linear-gradient(180deg,
    #050d18 0%,
    #0a1224 100%
  );
}

.scene-gaming::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 68, 68, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 50%, rgba(0, 245, 255, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 20%, rgba(107, 33, 168, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* ---- SCENE: TYME (glitchy) ---- */
.scene-tyme {
  background: #000;
  animation: tyme-bg-glitch 5s step-end infinite;
}

.scene-tyme::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, rgba(255, 0, 255, 0.05) 0%, transparent 50%),
    linear-gradient(-45deg, rgba(0, 255, 255, 0.05) 0%, transparent 50%);
  animation: tyme-overlay-shift 3s linear infinite;
  pointer-events: none;
}

/* ---- SCENE: ENDING ---- */
.scene-ending-good {
  background: radial-gradient(ellipse at center,
    #1a3a1a 0%,
    #0d2a0d 50%,
    #050f05 100%
  );
}

.scene-ending-bad {
  background: radial-gradient(ellipse at center,
    #3a1a1a 0%,
    #2a0d0d 50%,
    #0f0505 100%
  );
}

.scene-ending-true {
  background: radial-gradient(ellipse at center,
    #1a1a3a 0%,
    #0d0d2a 50%,
    #050508 100%
  );
}

/* ---- SCENE TRANSITION OVERLAY ---- */
#transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
}

#transition-overlay.fade {
  background: #000;
  transition: opacity 0.4s ease;
}

#transition-overlay.fade.active {
  opacity: 1;
}

/* ---- PIXEL DISSOLVE CANVAS ---- */
#dissolve-canvas {
  position: absolute;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  opacity: 0;
}

/* ---- CRT SCANLINES (optional effect) ---- */
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 100;
}

/* ---- VIGNETTE ---- */
.scene-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ---- ANIMATED BG ELEMENTS ---- */
.floating-pixel {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-cyan);
  opacity: 0.6;
  animation: pixel-drift linear infinite;
}