:root {
  --black-mirror: #070707;
  --burnished-chrome: #C9C9C4;
  --dull-nickel: #8A8D8F;
  --polished-edge: #F4F2EA;
  --oxide-blue: #4D6C78;
  --heat-scar: #B65B3A;
  --graphite-plate: #1A1A1B;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--black-mirror);
  color: var(--burnished-chrome);
  font-family: "IBM Plex Mono", monospace;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(244, 242, 234, 0.055), transparent 24vw),
    linear-gradient(90deg, var(--black-mirror), var(--graphite-plate) 49%, var(--black-mirror));
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 0 7.65%, rgba(138, 141, 143, 0.13) 7.66%, transparent 7.76%, transparent 15.35%, rgba(138, 141, 143, 0.055) 15.45%, transparent 15.55%),
    repeating-linear-gradient(0deg, transparent 0 71px, rgba(201, 201, 196, 0.035) 72px, transparent 73px);
  opacity: 0.75;
}

a { color: inherit; }

#particle-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -30%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.23;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain-shift 1.8s steps(3) infinite;
}

.cursor-mark {
  position: fixed;
  width: 9px;
  height: 9px;
  border: 1px solid var(--polished-edge);
  border-left-color: var(--oxide-blue);
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
  opacity: 0.75;
  mix-blend-mode: difference;
}

.shaft-rule {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(201, 201, 196, 0.24), transparent);
  pointer-events: none;
}

.rule-left { left: 15.38vw; }
.rule-right { right: 23.07vw; opacity: 0.55; }

.vertical-shaft { position: relative; z-index: 4; }

.chamber {
  position: relative;
  min-height: 145vh;
  display: block;
}

.chamber:last-child { min-height: 116vh; }

.plate {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background:
    linear-gradient(105deg, rgba(244, 242, 234, 0.035), transparent 13%, rgba(138, 141, 143, 0.04) 31%, transparent 58%),
    var(--black-mirror);
  isolation: isolate;
}

.plate::after {
  content: attr(data-state);
  position: absolute;
  right: 2.5vw;
  top: 2.2vh;
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(138, 141, 143, 0.42);
}

.breath-frame {
  position: relative;
  border: 1px solid transparent;
}

.breath-frame::before,
.breath-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.breath-frame::before {
  background:
    linear-gradient(90deg, var(--burnished-chrome), var(--burnished-chrome)) top left / calc(82% + 4vw) 1px no-repeat,
    linear-gradient(180deg, var(--dull-nickel), var(--dull-nickel)) top left / 1px 73% no-repeat,
    linear-gradient(90deg, var(--dull-nickel), var(--dull-nickel)) bottom right / 69% 1px no-repeat,
    linear-gradient(180deg, var(--polished-edge), var(--polished-edge)) bottom right / 1px 58% no-repeat;
  clip-path: inset(0 calc(42% - var(--scroll) * 15%) 0 0);
  animation: border-breathe 7s ease-in-out infinite;
}

.breath-frame::after {
  inset: 11px -17px -13px 19px;
  border-top: 1px solid rgba(77, 108, 120, 0.43);
  border-right: 1px solid rgba(201, 201, 196, 0.2);
  transform: translateY(calc(var(--scroll) * -10px));
}

.gate-frame {
  grid-column: 2 / span 7;
  grid-row: 4 / span 4;
  min-height: 47vh;
  transform: translate(-3.7vw, 7.5vh);
}

h1 {
  position: absolute;
  left: 3.2vw;
  bottom: 3.3vh;
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: clamp(54px, 12.7vw, 180px);
  font-weight: 700;
  letter-spacing: -0.09em;
  color: var(--polished-edge);
  line-height: 0.75;
  text-shadow: 0 0 21px rgba(244, 242, 234, 0.11);
}

.gate-line,
.gate-meta,
.fold-label,
.exit-meta,
.tick,
.one-copy span {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--dull-nickel);
}

.gate-line { position: absolute; left: 4vw; top: 5vh; }
.gate-meta { position: absolute; left: -0.6vw; top: -2.6vh; color: var(--oxide-blue); }
.corner { position: absolute; width: 22px; height: 1px; background: var(--polished-edge); }
.cut-a { right: 7%; top: -1px; }
.cut-b { left: 13%; bottom: -1px; background: var(--heat-scar); width: 9px; }
.scar { position: absolute; background: rgba(244, 242, 234, 0.42); height: 1px; transform: rotate(-22deg); }
.scar-one { right: 18vw; top: 31vh; width: 94px; }
.tiny-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--heat-scar); box-shadow: 0 0 18px var(--heat-scar); }
.heat { left: 7.9vw; bottom: 14vh; animation: dot-wait 5.5s infinite; }

.well-plate { background: radial-gradient(circle at 35% 45%, rgba(77, 108, 120, 0.1), transparent 31vw), var(--black-mirror); }
.well-grid { grid-column: 2 / span 11; grid-row: 2 / span 7; position: relative; border-left: 1px solid rgba(138, 141, 143, 0.22); }
.tick { position: absolute; color: rgba(201, 201, 196, 0.58); transform: translateY(calc(var(--scroll) * -24px)); }
.t1 { left: 5%; top: 16%; }
.t2 { left: 61%; top: 7%; color: var(--oxide-blue); }
.t3 { left: 21%; bottom: 21%; }
.t4 { right: 4%; top: 48%; }
.t5 { left: 44%; bottom: 8%; color: var(--polished-edge); }
.coordinate-cross { position: absolute; left: 69%; top: 34%; width: 54px; height: 54px; border-top: 1px solid var(--oxide-blue); border-left: 1px solid var(--oxide-blue); opacity: 0.65; animation: cross-drift 8s ease-in-out infinite; }
.well-copy { position: absolute; left: 12%; top: 44%; margin: 0; max-width: 23ch; font-size: clamp(22px, 3vw, 45px); font-family: "Space Mono", monospace; color: var(--burnished-chrome); letter-spacing: -0.045em; }

.fold-plate { background: var(--graphite-plate); }
.chrome-panel { position: absolute; left: 0; right: 0; min-height: 33vh; background: linear-gradient(100deg, #070707 0%, #1A1A1B 30%, rgba(138, 141, 143, 0.38) 48%, #1A1A1B 55%, #070707 100%); box-shadow: inset 0 1px rgba(244, 242, 234, 0.2), inset 0 -1px rgba(7, 7, 7, 0.9); }
.panel-a { top: 9vh; transform: translateY(calc(var(--scroll) * -26px)); }
.panel-b { top: 34vh; left: 11vw; transform: translateY(calc(var(--scroll) * 31px)); opacity: 0.9; }
.panel-c { top: 58vh; right: 17vw; transform: translateY(calc(var(--scroll) * -18px)); opacity: 0.72; }
.slit { position: absolute; height: 34px; overflow: hidden; border-top: 1px solid rgba(244, 242, 234, 0.28); border-bottom: 1px solid rgba(7, 7, 7, 0.9); background: #070707; }
.slit span { display: block; padding: 8px 15px; font-size: 11px; letter-spacing: 0.17em; color: var(--polished-edge); white-space: nowrap; }
.slit-one { left: 7.69vw; top: 27vh; width: 43vw; }
.slit-two { right: -3vw; top: 52vh; width: 57vw; }
.slit-three { left: 30.76vw; bottom: 18vh; width: 31vw; }
.fold-label { position: absolute; left: 2.2vw; bottom: 4vh; color: var(--oxide-blue); }

.one-plate { background: linear-gradient(90deg, #070707 0%, #1A1A1B 62%, #070707 100%); }
.one-border { grid-column: 5 / span 7; grid-row: 2 / span 6; transform: translate(4vw, 3vh) rotate(0.7deg); }
.giant-one { position: absolute; right: -8vw; top: -9vh; font-family: "Space Mono", monospace; font-size: clamp(330px, 64vw, 940px); line-height: 0.82; color: rgba(244, 242, 234, 0.88); letter-spacing: -0.2em; transform: rotate(1.3deg); mix-blend-mode: difference; }
.one-copy { grid-column: 3 / span 5; grid-row: 5 / span 2; z-index: 2; }
.one-copy p { margin: 16px 0 0; max-width: 34ch; font-size: clamp(17px, 1.8vw, 28px); line-height: 1.45; color: var(--burnished-chrome); }
.x-glyph { position: absolute; left: -4vw; top: 12vh; font-family: "Space Mono", monospace; font-size: 21vw; color: rgba(138, 141, 143, 0.13); transform: rotate(-1.5deg); }

.exit-plate { background: linear-gradient(180deg, #070707 0%, #070707 62%, #1A1A1B 100%); }
.horizon { grid-column: 1 / -1; grid-row: 7; height: 1px; align-self: center; background: linear-gradient(90deg, transparent, rgba(244, 242, 234, 0.12), rgba(77, 108, 120, 0.3), transparent); box-shadow: 0 0 42px rgba(201, 201, 196, 0.08); }
.exit-line { grid-column: 3 / span 7; grid-row: 6; align-self: end; margin: 0; font-size: clamp(14px, 1.4vw, 22px); line-height: 1.7; color: rgba(201, 201, 196, 0.72); }
.inscription { grid-column: 9 / span 3; grid-row: 7; align-self: end; justify-self: start; font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: 0.08em; text-decoration: none; color: var(--polished-edge); border-bottom: 1px solid rgba(182, 91, 58, 0.7); padding-bottom: 5px; }
.exit-meta { position: absolute; left: 3vw; bottom: 3vh; }

.chamber.in-view .plate { filter: brightness(1.05); }
.chamber.in-view h1 { animation: title-settle 4.8s ease-in-out infinite; }

@keyframes grain-shift { 0% { transform: translate(0, 0); } 33% { transform: translate(3%, -2%); } 66% { transform: translate(-2%, 3%); } 100% { transform: translate(0, 0); } }
@keyframes border-breathe { 0%, 100% { opacity: 0.45; filter: brightness(0.8); } 50% { opacity: 0.92; filter: brightness(1.2); } }
@keyframes dot-wait { 0%, 46%, 100% { transform: translateY(0); opacity: 0.45; } 58% { transform: translateY(-11px); opacity: 1; } }
@keyframes cross-drift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-18px, 13px); } }
@keyframes title-settle { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(1px,-2px); } }

@media (max-width: 760px) {
  .gate-frame { grid-column: 1 / span 11; transform: translate(-9vw, 10vh); }
  h1 { font-size: 21vw; }
  .well-copy { left: 4%; top: 40%; }
  .slit-one, .slit-two, .slit-three { left: 5vw; right: auto; width: 86vw; }
  .one-copy { grid-column: 2 / span 8; }
  .giant-one { right: -20vw; font-size: 104vw; }
  .exit-line { grid-column: 2 / span 10; }
  .inscription { grid-column: 2 / span 9; grid-row: 8; }
}