/* Immediate-frame architectural continuity for #36.
   The poster is not a loading screen: it is the same atrium before WebGL has
   acquired depth. Architecture is the hero; interface stays peripheral. */

:root {
  --thread: #eee6d7;
  --thread-dim: rgba(238, 230, 215, 0.72);
  --hairline: rgba(238, 230, 215, 0.16);
  --hairline-strong: rgba(238, 230, 215, 0.32);
  --sky-high: #7f9fba;
  --water-deep: #213842;
  --sun: #f3d8b3;
}

/* ZERO-JS ENTRY CONTRACT
   Before bootstrap mounts the richer entry layer, the document itself is the
   ambient gate. This prevents a flash of the old portfolio/world surface on a
   cold CPU/network. The pseudo-element is intentionally the only visible copy.
   JS replaces it with the device-aware cue as soon as entry-sequence mounts. */
body:not([data-entry]) {
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(32, 65, 53, .08), transparent 33%),
    #020404 !important;
}
body:not([data-entry]) > * { visibility: hidden !important; }
body:not([data-entry])::before {
  content: 'Press [ Enter ] to enter the world';
  visibility: visible !important;
  position: fixed;
  z-index: 2147483647;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100vw - 48px);
  white-space: nowrap;
  color: rgba(218, 230, 226, .78);
  font: 360 clamp(12px, 1.25vw, 16px)/1.4 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  text-align: center;
  text-shadow: 0 0 24px rgba(119, 255, 184, .12);
}
@media (max-width: 720px) {
  body:not([data-entry])::before {
    content: 'Tap to enter the world';
    max-width: 86vw;
    white-space: normal;
    font-size: 12px;
    letter-spacing: .11em;
  }
}

/* The inline scene is zero-request fallback. The authored architectural frame
   paints over it from this stylesheet as soon as its tiny SVG asset is ready;
   a cold cache therefore never has a blank intermediate state. */
#poster { overflow: hidden; isolation: isolate; background: #213842; }
#poster-scene { z-index: 0; opacity: 1; }
#poster-copy { z-index: 3; }

#poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(12, 18, 19, 0.28) 0,
      transparent 9%,
      transparent 88%,
      rgba(12, 18, 19, 0.34) 100%),
    linear-gradient(180deg,
      rgba(10, 15, 17, 0.18) 0,
      transparent 22%,
      transparent 72%,
      rgba(10, 17, 19, 0.18) 100%),
    url('/lab/poster-architecture.svg') 50% 50% / cover no-repeat;
}

#poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 18.75%,
      rgba(232, 237, 232, 0.045) 18.82% 18.9%,
      transparent 18.98% 37.5%);
  opacity: .48;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 0 46%, transparent 84%);
}

body[data-tier="semantic"] #poster::before { opacity: 1; }
body[data-tier="semantic"] #poster::after { opacity: .6; }

#poster-copy,
body[data-tier="semantic"] #poster-copy {
  left: clamp(22px, 4vw, 58px);
  right: auto;
  top: auto;
  bottom: clamp(74px, 10vh, 112px);
  transform: none;
  text-align: left;
  width: min(520px, 74vw);
  padding: 14px 16px 15px;
  border-left: 1px solid rgba(238, 230, 215, 0.28);
  background: linear-gradient(90deg, rgba(17, 22, 24, 0.38), rgba(17, 22, 24, 0.1) 62%, transparent);
  text-shadow: 0 2px 18px rgba(10, 15, 17, 0.42);
}
.poster-title {
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  margin-top: 8px;
}
.poster-claim { margin-top: 8px; }
.poster-line { margin-top: 10px; max-width: 44ch; font-size: 14px; }

#chrome {
  background: linear-gradient(rgba(18, 23, 24, 0.28), transparent) !important;
}
body[data-tier="spatial"][data-space="atrium"][data-mode="explore"][data-inspecting="0"] #atlas {
  opacity: .74;
  transition: opacity .28s ease;
}
body[data-tier="spatial"][data-space="atrium"][data-mode="explore"][data-inspecting="0"] #atlas:hover,
body[data-tier="spatial"][data-space="atrium"][data-mode="explore"][data-inspecting="0"] #atlas:focus-within {
  opacity: 1;
}

/* Once the visitor has entered a destination, room-scale architecture carries
   identity. Keep only artifact-level evidence labels; suppress the hub-scale
   floating wayfinding that would make the room feel like a labelled diorama. */
body[data-tier="spatial"][data-space^="wing-"] #label-layer .label-wing,
body[data-tier="spatial"][data-space^="wing-"] #label-layer .label-core {
  display: none !important;
}

@media (max-width: 720px) {
  #poster::before {
    /* Keep the off-axis Life Core and a slice of the waterfall in portrait;
       do not recenter the frame into the game-lobby composition we rejected. */
    background:
      linear-gradient(90deg,
        rgba(12, 18, 19, 0.16) 0,
        transparent 8%,
        transparent 92%,
        rgba(12, 18, 19, 0.2) 100%),
      linear-gradient(180deg,
        rgba(10, 15, 17, 0.13) 0,
        transparent 22%,
        transparent 76%,
        rgba(10, 17, 19, 0.18) 100%),
      url('/lab/poster-architecture.svg') 57% 50% / cover no-repeat;
  }
  #poster::after {
    opacity: .3;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #poster-copy,
  body[data-tier="semantic"] #poster-copy {
    left: 18px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: calc(100vw - 36px);
    padding: 10px 12px 11px;
  }
  .poster-title { font-size: clamp(2.15rem, 12vw, 3.5rem); }
  .poster-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #poster::before, #poster::after { transition: none !important; }
}