/* ============================================================
   SCENE LAYOUT
   Pixel art diorama: background + Minitel overlay + live screen
   Both images are 2400x1792, designed to composite together.
   ============================================================ */

:root {
  /* Screen cutout coordinates (% of the full 2400x1792 image) */
  /* Expanded to fill the transparent cutout fully with no gap */
  --screen-top: 9.4%;
  --screen-left: 20.2%;
  --screen-width: 59.6%;
  --screen-height: 61.7%;
  --screen-bleed: 0.6%;
  --screen-radius: clamp(6px, 0.9vw, 12px);

  /* Internal safe area + mask to keep text off the bezel edges */
  --screen-safe-x: clamp(10px, 1.4vw, 18px);
  --screen-safe-y: clamp(12px, 1.6vw, 20px);
  --screen-mask-x: clamp(6px, 0.9vw, 12px);
  --screen-mask-y: clamp(8px, 1.1vw, 14px);

  /* Native aspect ratio of both images */
  --scene-aspect: 2400 / 1792;
}

/* Full viewport scene */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0810;
}

/* ============================================================
   SCENE FRAME
   Both images and the screen share this coordinate space.
   Sized to cover the viewport while maintaining aspect ratio.
   ============================================================ */

.scene-frame {
  position: absolute;
  /* Cover the viewport, centered */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Always cover viewport while preserving aspect ratio */
  width: max(100vw, 100vh * (2400 / 1792));
  height: max(100vh, 100vw * (1792 / 2400));
}

/* ============================================================
   BACKGROUND: Pixel art French room
   ============================================================ */

.scene-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/scene-background.jpg') center / cover no-repeat;
  image-rendering: pixelated;
}

/* ============================================================
   MINITEL OVERLAY
   Pixel art terminal with transparent screen cutout
   ============================================================ */

.minitel-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url('../assets/images/minitel-overlay.png') center / cover no-repeat;
  image-rendering: pixelated;
}

/* ============================================================
   LIVE SCREEN
   Positioned to align with the transparent screen cutout
   ============================================================ */

.minitel-screen {
  position: absolute;
  top: calc(var(--screen-top) - var(--screen-bleed));
  left: calc(var(--screen-left) - var(--screen-bleed));
  width: calc(var(--screen-width) + (var(--screen-bleed) * 2));
  height: calc(var(--screen-height) + (var(--screen-bleed) * 2));
  z-index: 1;
  overflow: hidden;
  border-radius: var(--screen-radius);
  background: #020202;
}

/* ============================================================
   DESK SURFACE (not needed -- it's in the background image)
   ============================================================ */

.desk-surface {
  display: none;
}

/* ============================================================
   FUNCTION KEYS
   Hover-reveal over the keyboard area of the pixel art
   ============================================================ */

/* Hidden on desktop — navigate via on-screen menu items or keyboard shortcuts.
   Mobile bottom bar is enabled in responsive.css */
.function-keys {
  display: none;
}