/* =============================================
   Scene Surfaces — Floor + Wall
   Textured planes that ground the scene in a physical space.
   ============================================= */

/* ---- Wall plane ---- */
.scene-wall {
  position: absolute;
  left: -20%;
  width: 140%;
  /* Wall fills area above the floor line */
  top: 0;
  height: calc(51% + var(--scene-offset-y) + 142px);
  z-index: 0;
  overflow: hidden;

  /* Dark concrete texture */
  background-image: url('../../public/images/dark-concrete-wall.jpg');
  background-size: 500px auto;
  background-repeat: repeat;

  /* Very dark — wall should recede, not compete with objects */
  filter: brightness(0.25) saturate(0.3);
}

/* Gradient mask: fade wall into void at edges, darken toward top */
.scene-wall::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Top: fade into void */
    linear-gradient(to bottom, var(--void-black) 0%, rgba(16, 16, 19, 0.6) 40%, transparent 70%),
    /* Left edge fade */
    linear-gradient(to right, var(--void-black) 0%, transparent 15%),
    /* Right edge fade */
    linear-gradient(to left, var(--void-black) 0%, transparent 15%);
  pointer-events: none;
  z-index: 1;
}

/* CRT glow on the wall — faint wash behind the TV */
.scene-wall::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 60%;
  background: radial-gradient(
    ellipse at 60% 100%,
    rgba(20, 253, 206, 0.06) 0%,
    rgba(20, 253, 206, 0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
  animation: floor-glow-flicker 4s infinite;
}

/* =============================================
   Floor Surface
   ============================================= */

/* ---- Floor plane ---- */
.scene-floor {
  position: absolute;
  left: -20%;
  width: 140%;
  /* Floor starts just above the NES bottom edge */
  top: calc(51% + var(--scene-offset-y) + 142px);
  height: 70%;
  z-index: 1;
  overflow: hidden;

  /* Dark wood texture */
  background-image: url('../../public/images/dark-wood-floor.jpg');
  background-size: 350px auto;
  background-repeat: repeat;

  /* Visible but moody — not too bright, not invisible */
  filter: brightness(0.55) saturate(0.5);

  /* Perspective tilt: floor recedes into the scene */
  transform-origin: center top;
  transform: perspective(1000px) rotateX(20deg);
}

/* Gradient mask: fade floor into void at the edges and bottom */
.scene-floor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Top edge: gentle fade from void into floor */
    linear-gradient(to bottom, var(--void-black) 0%, transparent 5%),
    /* Bottom: fade back to void */
    linear-gradient(to top, var(--void-black) 0%, rgba(16, 16, 19, 0.8) 30%, transparent 60%),
    /* Left edge fade */
    linear-gradient(to right, var(--void-black) 0%, transparent 10%),
    /* Right edge fade */
    linear-gradient(to left, var(--void-black) 0%, transparent 10%);
  pointer-events: none;
  z-index: 1;
}

/* CRT glow reflection on the floor surface */
.scene-floor::after {
  content: "";
  position: absolute;
  /* Positioned under the TV area */
  top: 0;
  left: 25%;
  width: 50%;
  height: 50%;
  background: radial-gradient(
    ellipse at 60% 0%,
    rgba(20, 253, 206, 0.12) 0%,
    rgba(20, 253, 206, 0.05) 35%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 2;
  animation: floor-glow-flicker 4s infinite;
}

@keyframes floor-glow-flicker {
  0% { opacity: 1; }
  3% { opacity: 0.85; }
  6% { opacity: 1; }
  42% { opacity: 1; }
  44% { opacity: 0.7; }
  45% { opacity: 1; }
  76% { opacity: 1; }
  77% { opacity: 0.8; }
  79% { opacity: 0.6; }
  80% { opacity: 1; }
}

/* =============================================
   Scene Props — CD, etc.
   ============================================= */

.scene-cd {
  position: absolute;
  width: 160px;
  z-index: 690; /* behind NES (700) */
  filter: brightness(0.7) saturate(0.75);
  pointer-events: none;
  box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.scene-cd-egoist {
  left: calc(50% + var(--scene-offset-x) + 466px);
  top: calc(51% + var(--scene-offset-y) + 15px);
}

.scene-cd-bebop {
  left: calc(50% + var(--scene-offset-x) + 290px);
  top: calc(51% + var(--scene-offset-y) + 7px);
  filter: brightness(0.75) saturate(0.75);
  overflow: hidden;
}

/* Faked shadow from the clock falling on the right side */
.scene-cd-bebop::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 2px;
}