:root {
  --paper: #eeeae0;
  --ink: #0a0a09;
  --signal: #ef3326;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: geometricPrecision;
}

a { color: inherit; }
.site-shell { position: relative; min-height: 320vh; background: var(--ink); }

.skip-link {
  position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .75rem 1rem;
  transform: translateY(-180%); background: var(--paper); color: var(--ink);
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.tunnel-stage {
  --travel: 0; --reveal: 0; --cue-opacity: 1; position: fixed; inset: 0; overflow: hidden;
  background: var(--ink); isolation: isolate;
}

.tunnel {
  position: absolute; inset: 0; overflow: hidden; perspective: 540px;
  perspective-origin: 50% 50%; background: var(--ink);
  opacity: calc(1 - var(--reveal)); filter: contrast(1.08);
}

.tunnel::before, .tunnel::after {
  position: absolute; z-index: -1; content: ''; background: var(--paper);
}
.tunnel::before { inset: 0 0 auto; height: 15vh; clip-path: polygon(0 0,100% 0,70% 100%,30% 100%); }
.tunnel::after { inset: auto 0 0; height: 15vh; clip-path: polygon(30% 0,70% 0,100% 100%,0 100%); }

.tunnel-grain {
  position: absolute; z-index: 90; inset: -30%; pointer-events: none; opacity: .11;
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 30% 20%,transparent 0 2px,#000 3px 4px),repeating-linear-gradient(91deg,transparent 0 5px,rgb(0 0 0 / 25%) 6px);
  transform: rotate(.001deg);
}

.tunnel-frame {
  --depth: calc(var(--frame-index) * -92px); position: absolute; inset: 6.5vh 5.5vw;
  transform: translateZ(calc(var(--depth) + (var(--travel) * 1180px)));
  transform-style: preserve-3d; border: clamp(3px,.45vw,8px) solid var(--paper);
  background: transparent; will-change: transform;
}

.frame-word {
  position: absolute; display: block; overflow: hidden; background: var(--paper);
  color: var(--ink); font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.1rem,3.8vw,4.8rem); font-stretch: condensed; font-weight: 950;
  letter-spacing: -.08em; line-height: .78; text-align: center; white-space: nowrap;
}

.frame-word-top, .frame-word-bottom {
  right: -1px; left: -1px; height: clamp(2rem,6.8vh,6.5rem); padding-top: .12em;
}
.frame-word-top { top: -1px; }
.frame-word-bottom { bottom: -1px; transform: rotate(180deg); }
.frame-word-left, .frame-word-right {
  top: -1px; bottom: -1px; width: clamp(2.2rem,6vw,6.8rem); padding-top: .2em;
  writing-mode: vertical-rl;
}
.frame-word-left { left: -1px; transform: rotate(180deg); }
.frame-word-right { right: -1px; }

.portal {
  position: absolute; z-index: 80; top: 50%; left: 50%; display: grid;
  width: clamp(4.5rem,9vw,9rem); aspect-ratio: 1; place-content: center;
  transform: translate(-50%,-50%) scale(calc(1 + (var(--travel) * 22)));
  background: var(--signal); color: var(--ink); font-size: clamp(.5rem,.85vw,.9rem);
  font-weight: 950; letter-spacing: -.05em; line-height: .82; text-align: center;
  will-change: transform;
}
.portal span { display: block; }

.entry-cue {
  position: absolute; z-index: 96; right: clamp(1rem,2.5vw,2.5rem);
  bottom: clamp(1rem,2.5vw,2.5rem); display: grid; justify-items: center; gap: .12rem;
  opacity: var(--cue-opacity); color: var(--paper); pointer-events: none;
}
.cue-track {
  position: relative; display: block; width: .35rem; height: 2.2rem;
  border: 1px solid var(--paper); background: var(--ink); overflow: hidden;
}
.cue-chevron {
  display: block; font-size: 1rem; font-weight: 950; line-height: .55;
  text-shadow: 0 1px 0 var(--ink),1px 0 0 var(--ink),0 -1px 0 var(--ink),-1px 0 0 var(--ink);
}
.cue-pulse {
  position: absolute; top: .2rem; left: 50%; width: .12rem; height: .55rem;
  background: var(--signal); transform: translateX(-50%);
  animation: cue-descent 1.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue-descent {
  0% { opacity: 0; transform: translate(-50%,-.5rem); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,1.55rem); }
}

.human-message {
  position: absolute; z-index: 95; inset: 0; display: grid; place-items: center;
  padding: clamp(1.5rem,6vw,7rem); opacity: var(--reveal); background: var(--signal);
  color: var(--ink); pointer-events: none;
  transform: scale(calc(.96 + (var(--reveal) * .04))); will-change: opacity,transform;
}
.human-message[data-active] { pointer-events: auto; }
.human-message:focus { outline: none; }
.message-inner { width: min(62rem,100%); }
.message-inner h1 {
  margin: 0 0 clamp(2.2rem,7vh,6rem); font-size: clamp(2.4rem,9vw,9.5rem);
  font-weight: 950; letter-spacing: -.085em; line-height: .78;
}
.message-inner p {
  max-width: 42ch; margin: 0 0 1.25em; font-size: clamp(1.2rem,2.3vw,2.1rem);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
}
.scroll-track { height: 320vh; }

@media (max-width: 640px) {
  .site-shell, .scroll-track { min-height: 260vh; }
  .tunnel { perspective: 380px; }
  .tunnel-frame { inset: 4vh 4vw; }
  .frame-word-top, .frame-word-bottom { height: 8vh; }
  .frame-word-left, .frame-word-right { width: 11vw; }
  .entry-cue { right: 1rem; bottom: max(1rem,env(safe-area-inset-bottom)); }
  .message-inner h1 { max-width: 7ch; line-height: .85; }
  .human-message {
    align-items: center;
    padding-block: max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-bottom));
  }
  .message-inner h1 { margin-bottom: clamp(1.5rem,5vh,2.5rem); }
  .message-inner p { font-size: clamp(1.05rem,5vw,1.35rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-shell, .scroll-track { min-height: 100vh; height: 100vh; }
  .tunnel { opacity: .2; }
  .tunnel-frame { transform: translateZ(var(--depth)); }
  .portal { transform: translate(-50%,-50%) scale(5); }
  .human-message { opacity: 1; background: rgb(239 51 38 / 94%); pointer-events: auto; transform: none; }
  .entry-cue { display: none; }
}

@media (forced-colors: active) {
  .human-message { background: Canvas; color: CanvasText; }
  .tunnel { display: none; }
}