:root {
  color-scheme: dark;
  background: #050504;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(90, 82, 22, 0.14), transparent 42%),
    #050504;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
}

.site-shell {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.poster {
  position: relative;
  width: min(100%, calc((100svh - 20px) * 1.24955));
  aspect-ratio: 1402 / 1122;
  overflow: hidden;
  isolation: isolate;
  background: #090907;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
}

.poster-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 48%;
  animation: corridor-drift 18s ease-in-out infinite alternate;
}

.poster picture,
.poster img {
  display: block;
  width: 100%;
  height: 100%;
}

.poster img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Real click target aligned to the button drawn into the artwork. */
.roblox-hotspot {
  position: absolute;
  left: 29.7%;
  top: 67.45%;
  width: 41.05%;
  height: 10.8%;
  z-index: 8;
  border-radius: 4px;
  outline: 0 solid rgba(255, 246, 151, 0);
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  animation: button-breathe 3.6s ease-in-out infinite;
  transition: box-shadow 140ms ease, background-color 140ms ease, outline-color 140ms ease;
}

.roblox-hotspot:hover,
.roblox-hotspot:focus-visible {
  background: rgba(255, 246, 151, 0.045);
  box-shadow:
    0 0 18px rgba(255, 246, 151, 0.44),
    inset 0 0 0 1px rgba(255, 246, 151, 0.68);
  animation-play-state: paused;
}

.roblox-hotspot:focus-visible {
  outline: 3px solid rgba(255, 246, 151, 0.9);
  outline-offset: 3px;
}

/* Fluorescent lighting that occasionally twitches without hiding the artwork. */
.flicker {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 247, 165, 0.035), transparent 22%),
    rgba(212, 207, 114, 0.018);
  mix-blend-mode: screen;
  animation: fluorescent-flicker 8.5s linear infinite;
}

/* CRT/security-camera texture. */
.scanlines {
  position: absolute;
  inset: -12%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.15;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 1px,
      rgba(0, 0, 0, 0.12) 1px,
      rgba(0, 0, 0, 0.12) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 5px
    );
  animation: scan-drift 11s linear infinite;
}

/* Short, rare horizontal disturbances. */
.glitch {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(219, 255, 150, 0.12) 22%, transparent 48%, rgba(255, 73, 36, 0.1) 71%, transparent 88%);
  filter: blur(0.25px);
}

.glitch-one {
  top: 26%;
  height: 2.5%;
  animation: glitch-one 12s steps(1, end) infinite;
}

.glitch-two {
  top: 58%;
  height: 1.5%;
  animation: glitch-two 15s steps(1, end) infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 47%, rgba(0, 0, 0, 0.16) 75%, rgba(0, 0, 0, 0.46) 115%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 20%, transparent 78%, rgba(0, 0, 0, 0.12));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes corridor-drift {
  0% {
    transform: scale(1.005) translate3d(-0.15%, 0.08%, 0);
  }
  38% {
    transform: scale(1.016) translate3d(0.18%, -0.12%, 0);
  }
  72% {
    transform: scale(1.01) translate3d(-0.08%, -0.02%, 0);
  }
  100% {
    transform: scale(1.021) translate3d(0.12%, 0.1%, 0);
  }
}

@keyframes fluorescent-flicker {
  0%, 4%, 6%, 9%, 13%, 38%, 41%, 68%, 71%, 100% { opacity: 0.58; }
  5% { opacity: 0.18; }
  7% { opacity: 0.86; }
  10% { opacity: 0.38; }
  39% { opacity: 0.92; }
  40% { opacity: 0.22; }
  69% { opacity: 0.82; }
  70% { opacity: 0.34; }
}

@keyframes scan-drift {
  from { transform: translate3d(0, -4%, 0); }
  to { transform: translate3d(-1.5%, 4%, 0); }
}

@keyframes glitch-one {
  0%, 20%, 22%, 63%, 65%, 100% { opacity: 0; transform: translateX(0); }
  20.3% { opacity: 0.65; transform: translateX(-1.1%); }
  20.7% { opacity: 0.2; transform: translateX(0.7%); }
  21.1% { opacity: 0.5; transform: translateX(-0.35%); }
  63.3% { opacity: 0.34; transform: translateX(0.8%); }
  63.7% { opacity: 0.58; transform: translateX(-0.45%); }
}

@keyframes glitch-two {
  0%, 35%, 37%, 81%, 83%, 100% { opacity: 0; transform: translateX(0); }
  35.2% { opacity: 0.42; transform: translateX(0.7%); }
  35.7% { opacity: 0.16; transform: translateX(-0.9%); }
  81.4% { opacity: 0.52; transform: translateX(-0.55%); }
  81.8% { opacity: 0.24; transform: translateX(0.4%); }
}

@keyframes button-breathe {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 246, 151, 0);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 246, 151, 0.16);
  }
}

@media (max-width: 700px) {
  .site-shell {
    padding-inline: 0;
  }

  .poster {
    width: 100%;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-content,
  .flicker,
  .scanlines,
  .glitch,
  .roblox-hotspot {
    animation: none;
  }

  .roblox-hotspot {
    transition: none;
  }
}