/* ============================================================
   BLADE RUNNER SCENE LAYOUT
   NOSTROMO/Alien 1979 green phosphor — fullscreen CSS-only terminal
   ============================================================ */

/* View switching: hide inactive containers */
body[data-view="landing"] #minitel-view,
body[data-view="landing"] #bladerunner-view,
body[data-view="bladerunner"] #minitel-view,
body[data-view="minitel"] #bladerunner-view {
  display: none;
}

body[data-view="bladerunner"] {
  --br-border-width: clamp(8px, 1.5vw, 16px);
}

/* Full viewport scene */
#bladerunner-view {
  position: fixed;
  inset: 0;
  background: #020604;
  overflow: hidden;
}

/* ============================================================
   TERMINAL FRAME — CSS-only Alien/NOSTROMO bracket border
   ============================================================ */

#bladerunner-view .br-terminal {
  position: absolute;
  inset: var(--br-border-width);
  transform-origin: 50% 46%;
  border: 1px solid rgba(255, 176, 64, 0.25);
  filter: drop-shadow(0 0 15px rgba(255, 176, 64, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 64, 0.08);
}

/* Corner bracket marks — L-shaped brackets at all 4 corners */
#bladerunner-view .br-terminal::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    /* Top-left corner — horizontal */
    linear-gradient(to right, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 0 0 / 100% 1px,
    /* Top-left corner — vertical */
    linear-gradient(to bottom, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 0 0 / 1px 100%,
    /* Top-right corner — horizontal */
    linear-gradient(to left, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 100% 0 / 100% 1px,
    /* Top-right corner — vertical */
    linear-gradient(to bottom, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 100% 0 / 1px 100%,
    /* Bottom-left corner — horizontal */
    linear-gradient(to right, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 0 100% / 100% 1px,
    /* Bottom-left corner — vertical */
    linear-gradient(to top, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 0 100% / 1px 100%,
    /* Bottom-right corner — horizontal */
    linear-gradient(to left, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 100% 100% / 100% 1px,
    /* Bottom-right corner — vertical */
    linear-gradient(to top, rgba(255, 176, 64, 0.3) 20px, transparent 20px) no-repeat 100% 100% / 1px 100%;
}

/* ============================================================
   LIVE SCREEN
   ============================================================ */

#bladerunner-view .br-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #020604;
}

/* Adjust videotex-display padding inside BR screen */
#bladerunner-view .br-screen .videotex-display {
  padding: clamp(12px, 2vw, 24px);
  clip-path: none;
}

/* ============================================================
   SKIP INTRO — positioned in BR view
   ============================================================ */

#bladerunner-view .skip-intro {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  background: rgba(2, 6, 4, 0.8);
  color: #ffc567;
  border: 1px solid rgba(255, 176, 64, 0.3);
  padding: 4px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  border-radius: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

#bladerunner-view .skip-intro:hover {
  opacity: 1;
}

/* ============================================================
   FUNCTION KEYS — hidden on desktop, enabled in responsive.css
   ============================================================ */

#bladerunner-view .function-keys {
  display: none;
}

/* The shared .scene pseudo-elements carry the Minitel room art; the
   Off-world terminal is its own world. */
#bladerunner-view::before,
#bladerunner-view::after {
  content: none;
}

/* Desktop: the tube sits in a room, so leave space around the frame. */
@media (min-width: 900px) {
  body[data-view="bladerunner"] {
    --br-border-width: clamp(18px, 3vh, 36px) clamp(28px, 4vw, 64px) clamp(44px, 7vh, 80px);
  }
}

/* Desktop: a stand under the tube so it sits on the desk instead of floating. */
@media (min-width: 900px) {
  #bladerunner-view .br-terminal::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 34%;
    height: clamp(26px, 5vh, 54px);
    transform: translateX(-50%);
    background:
      linear-gradient(180deg, #1c2226 0%, #2a3236 18%, #12171a 100%);
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: -1;
  }
  #bladerunner-view .br-terminal {
    box-shadow:
      inset 0 0 0 1px rgba(255, 176, 64, 0.08),
      0 30px 60px rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================
   ROOM ART — assets/images/muthur-room.* (2400x1792, Nano Banana).
   The art contains its own recessed monitor; the tube is pinned to that
   recess (left 29% / top 22.5% / width 42% / height 56% of the art) and
   the art is scaled by --art-scale so the recess stays large. Centred
   horizontally, so the tube is always at 50vw. Desktop only.
   ============================================================ */
@media (min-width: 900px) {
  body[data-view="bladerunner"],
  body[data-view="landing"] {
    --art-scale: 1.42;                /* art height = 142vh */
    --art-ratio: 1.3393;              /* 2400 / 1792 */
    --art-h: calc(100vh * var(--art-scale));
    --art-w: calc(var(--art-h) * var(--art-ratio));
    --art-top: calc((100vh - var(--art-h)) / 2);
    --tube-w: calc(var(--art-w) * 0.42);
    --tube-h: calc(var(--art-h) * 0.56);
    --tube-top: calc(var(--art-top) + var(--art-h) * 0.225);
    --tube-radius: clamp(10px, 1.4vw, 20px);
  }
  #bladerunner-view,
  body[data-view="landing"] .land-bg {
    background-color: #05070a;
    background-image: url('../assets/images/muthur-room.jpg');
    background-image: image-set(
      url('../assets/images/muthur-room.avif') type('image/avif'),
      url('../assets/images/muthur-room.webp') type('image/webp'),
      url('../assets/images/muthur-room.jpg') type('image/jpeg')
    );
    background-size: auto var(--art-h);
    background-position: center center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
  }
  #bladerunner-view .br-terminal {
    inset: auto;
    top: var(--tube-top);
    left: 50%;
    width: var(--tube-w);
    height: var(--tube-h);
    margin-left: calc(var(--tube-w) / -2);
    container-type: inline-size;
  }
  #bladerunner-view .br-terminal::after { display: none; }
  body[data-view="landing"] .land-screen {
    inset: auto;
    top: var(--tube-top);
    left: 50%;
    width: var(--tube-w);
    height: var(--tube-h);
    margin-left: calc(var(--tube-w) / -2);
    container-type: inline-size;
  }
  body[data-view="landing"] .land-bg::before,
  body[data-view="landing"] .land-bg::after { display: none; }
}