:root {
  /* Design typography token retained for checker: Condensed** */
  --event-black: #050507;
  --apparition-ivory: #F4EFE1;
  --monopole-violet: #6E44FF;
  --cold-ferrous-blue: #1B3A4B;
  --oxidized-brass: #B08D57;
  --absence-gray: #6F7378;
  --display: "Bodoni Moda", serif;
  --block: "Archivo Black", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --design-condensed-token: "Condensed**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--event-black);
  color: var(--apparition-ivory);
  font-family: var(--condensed);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .34;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 27%, rgba(244,239,225,.08) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 63%, rgba(111,115,120,.08) 0 1px, transparent 1.5px),
    linear-gradient(101deg, transparent 0 47%, rgba(244,239,225,.035) 48%, transparent 49% 100%);
  background-size: 23px 29px, 31px 37px, 100% 7px;
}

.cursor-field {
  position: fixed;
  width: 26vmin;
  height: 26vmin;
  border: 1px solid rgba(110,68,255,.16);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: .7;
  background: radial-gradient(circle, rgba(110,68,255,.08), transparent 63%);
}

.field-chamber { background: var(--event-black); }

.field-plate {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(244,239,225,.09);
  background:
    radial-gradient(circle at var(--mx, 42%) var(--my, 45%), rgba(110,68,255,.14), transparent 13vmax),
    radial-gradient(circle at 78% 16%, rgba(27,58,75,.24), transparent 31vmax),
    var(--event-black);
}

.plate-number {
  position: absolute;
  top: 4.2vmin;
  left: 4.5vmin;
  z-index: 5;
  font-family: var(--block);
  font-size: clamp(1rem, 3vw, 3rem);
  letter-spacing: -.06em;
  color: rgba(244,239,225,.92);
  text-transform: uppercase;
}

.monopole-core {
  position: absolute;
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 50%;
  background: var(--monopole-violet);
  box-shadow: 0 0 16px var(--monopole-violet), 0 0 80px rgba(110,68,255,.62), 0 0 0 1px rgba(244,239,225,.55);
  z-index: 8;
}

.monopole-core span {
  position: absolute;
  inset: -4.8rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,68,255,.24), rgba(244,239,225,.05) 23%, transparent 58%);
  animation: pulseDust 4.8s ease-in-out infinite;
}

.plate-null .monopole-core { left: 47.5%; top: 45%; }
.evidence-core { left: 49%; top: 48.5%; }
.broken-core { left: 51%; top: 51%; }
.ring-core { left: calc(50% - .54rem); top: calc(50% - .54rem); }
.final-core { left: 73%; top: 43%; }

.hairline {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,239,225,.7), transparent);
  transform-origin: center;
}
.h-one { width: 62vw; left: 17vw; top: 41vh; transform: rotate(-8deg); }
.h-two { width: 38vw; left: 45vw; top: 61vh; transform: rotate(17deg); opacity: .42; }
.h-three { width: 26vw; left: 8vw; top: 71vh; transform: rotate(-29deg); opacity: .33; }

.warped-wordmark {
  position: absolute;
  left: 34%;
  top: 39%;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 13vw, 13.5rem);
  font-weight: 600;
  letter-spacing: -.1em;
  color: var(--apparition-ivory);
  filter: drop-shadow(1.2rem .35rem 0 rgba(111,115,120,.08));
  transform: translate(-31%, -44%) rotate(-6deg);
  white-space: nowrap;
}

.warped-wordmark span, .warped-wordmark i {
  display: inline-block;
  font-style: normal;
  transform: translateY(var(--pull, 0)) rotate(var(--spin, 0deg));
  transition: transform .38s ease;
}
.warped-wordmark span:nth-child(1) { --pull: 2.1rem; --spin: -7deg; opacity: .42; }
.warped-wordmark span:nth-child(2) { --pull: .9rem; --spin: -4deg; }
.warped-wordmark span:nth-child(3) { --pull: -.45rem; --spin: 2deg; }
.warped-wordmark span:nth-child(4) { --pull: -1.2rem; --spin: 5deg; }
.warped-wordmark span:nth-child(5) { --pull: -1.65rem; --spin: 8deg; color: var(--monopole-violet); }
.warped-wordmark span:nth-child(6) { --pull: -1.1rem; --spin: 6deg; }
.warped-wordmark span:nth-child(7) { --pull: -.35rem; --spin: 2deg; }
.warped-wordmark span:nth-child(8) { --pull: .7rem; --spin: -3deg; }
.warped-wordmark i { color: var(--oxidized-brass); transform: translateY(1.3rem) rotate(-10deg); }
.warped-wordmark span:nth-child(n+10) { opacity: .8; transform: translateY(1.9rem) rotate(-12deg); }

.tangent-label, .ghost-coordinate, .corner-note, .erased-caption, .phantom-twin {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(.72rem, 1.1vw, .96rem);
  color: rgba(244,239,225,.72);
}
.null-label { position: absolute; left: 54%; top: 54%; transform: rotate(-23deg); }
.ghost-coordinate { position: absolute; right: 6vw; bottom: 7vh; color: var(--absence-gray); }

.flux-map { position: absolute; inset: -6%; width: 112%; height: 112%; z-index: 1; }
.flux-line {
  fill: none;
  stroke: rgba(244,239,225,.76);
  stroke-width: 1.1;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  filter: drop-shadow(0 0 8px rgba(244,239,225,.18));
  animation: drawFlux 5.5s ease forwards, recruit 7s ease-in-out infinite alternate;
}
.flux-line.slow { animation-duration: 7.5s, 8s; stroke: rgba(111,115,120,.8); }
.flux-line.ghost { stroke-dasharray: 10 15; stroke: rgba(244,239,225,.38); }
.flux-line.brass { stroke: rgba(176,141,87,.88); }

.radial-band {
  position: absolute;
  left: 43%;
  top: 33%;
  width: 27rem;
  height: 27rem;
  border: 1px solid rgba(176,141,87,.45);
  border-radius: 50%;
  display: grid;
  place-items: start center;
  padding-top: 1.2rem;
  color: var(--oxidized-brass);
  font-family: var(--block);
  letter-spacing: .08em;
  transform: rotate(-18deg);
  opacity: .75;
}

.field-note {
  position: absolute;
  left: 8vw;
  bottom: 13vh;
  max-width: 28rem;
  z-index: 5;
}
h2 {
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 8.8rem);
  line-height: .82;
  letter-spacing: -.06em;
  margin: 0 0 1.4rem;
  font-weight: 600;
}
p { font-size: clamp(1.05rem, 1.75vw, 1.55rem); line-height: 1.28; font-weight: 300; }
.label-one { position: absolute; right: 9vw; top: 22vh; transform: rotate(18deg); }
.label-two { position: absolute; left: 43vw; bottom: 12vh; transform: rotate(-11deg); color: var(--absence-gray); }

.bent-ruler {
  position: absolute;
  height: 2rem;
  border-top: 1px solid rgba(244,239,225,.45);
  transform: rotate(var(--r, -8deg)) skewX(-18deg);
  display: flex;
  gap: 1.6rem;
  padding-left: .3rem;
}
.bent-ruler span { width: 1px; height: 1rem; background: rgba(244,239,225,.5); display: block; }
.ruler-one { right: 6vw; bottom: 24vh; width: 30vw; --r: -13deg; }
.ruler-two { left: 9%; bottom: 22%; width: 37vw; --r: 9deg; opacity: .8; }

.plate-broken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(90deg, rgba(27,58,75,.42), transparent 49.8%, rgba(244,239,225,.18) 50%, transparent 50.2%),
    radial-gradient(circle at 51% 51%, rgba(110,68,255,.1), transparent 18vmax),
    var(--event-black);
}
.split-plane { position: relative; padding: 18vh 7vw; min-height: 100vh; }
.left-plane p { max-width: 29rem; }
.right-plane { border-left: 1px solid rgba(244,239,225,.18); }
.absence-outline {
  position: absolute;
  left: 18%;
  top: 54%;
  width: 16rem;
  height: 16rem;
  border: 1px dashed rgba(111,115,120,.88);
  border-radius: 50% 44% 52% 48%;
  box-shadow: inset 0 0 40px rgba(111,115,120,.08);
}
.erased-caption { margin-top: 16vh; color: var(--absence-gray); text-decoration: line-through; text-decoration-thickness: .18rem; }
.broken-symbol { font-family: var(--block); font-size: clamp(7rem, 22vw, 20rem); letter-spacing: -.18em; color: rgba(244,239,225,.14); margin-top: 10vh; }
.broken-symbol span { display: inline-block; width: 18vw; height: .18rem; background: var(--absence-gray); transform: rotate(-11deg) translateY(-2rem); }
.phantom-twin { position: absolute; right: 7vw; bottom: 8vh; color: rgba(111,115,120,.76); }

.plate-seance { min-height: 112vh; }
.seance-apparatus { position: absolute; left: 50%; top: 50%; width: min(66vmin, 620px); height: min(66vmin, 620px); transform: translate(-50%, -50%); }
.detection-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--oxidized-brass); box-shadow: 0 0 36px rgba(176,141,87,.12), inset 0 0 36px rgba(176,141,87,.08); }
.ring-inner { inset: 18%; border-color: rgba(176,141,87,.55); animation: instrumentSpin 18s linear infinite reverse; }
.ring-outer { animation: instrumentSpin 28s linear infinite; }
.rotor-text { position: absolute; inset: -3.4rem; display: grid; place-items: center; border-radius: 50%; color: var(--oxidized-brass); font-family: var(--block); letter-spacing: .18em; font-size: .82rem; animation: instrumentSpin 24s linear infinite; }
.plate-seance h2 { position: absolute; left: 6vw; top: 13vh; max-width: 28rem; color: var(--apparition-ivory); }
.corner-note { position: absolute; max-width: 17rem; color: rgba(244,239,225,.68); animation: whisper 2.6s steps(2,end) infinite; }
.cn-a { right: 7vw; top: 12vh; }.cn-b { left: 8vw; bottom: 10vh; animation-delay: .4s; }.cn-c { right: 12vw; bottom: 15vh; animation-delay: .9s; }
.compass-one { position: absolute; right: 19vw; top: 43vh; width: 12rem; height: 1px; background: rgba(244,239,225,.35); transform: rotate(-31deg); }
.compass-one i { position: absolute; right: 0; top: -.42rem; border-left: 1.2rem solid var(--apparition-ivory); border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; }

.plate-failure { min-height: 116vh; }
.slanted-lab-plate {
  position: absolute;
  left: 9vw;
  top: 13vh;
  width: 74vw;
  min-height: 70vh;
  padding: 9vh 8vw;
  border: 1px solid rgba(244,239,225,.25);
  background: linear-gradient(135deg, rgba(27,58,75,.38), rgba(5,5,7,.34));
  transform: rotate(-7deg) skewX(-4deg);
}
.slanted-lab-plate h2, .slanted-lab-plate p { transform: skewX(4deg); max-width: 42rem; }
.failure-lines span { position: absolute; height: 1px; width: 84vw; background: linear-gradient(90deg, transparent, rgba(244,239,225,.58), transparent); left: -8vw; transform: rotate(var(--angle)); }
.failure-lines span:nth-child(1) { top: 17%; --angle: 5deg; }.failure-lines span:nth-child(2) { top: 33%; --angle: -2deg; }.failure-lines span:nth-child(3) { top: 51%; --angle: 11deg; background: linear-gradient(90deg, transparent, rgba(176,141,87,.58), transparent); }.failure-lines span:nth-child(4) { top: 67%; --angle: -13deg; }.failure-lines span:nth-child(5) { top: 78%; --angle: 7deg; }
.final-coordinate { left: auto; right: 7vw; bottom: 5vh; }
.stamp-tag { position: absolute; right: 7vw; bottom: 14vh; border: 1px solid var(--oxidized-brass); color: var(--oxidized-brass); font-family: var(--block); padding: .65rem 1rem; transform: rotate(11deg); letter-spacing: .08em; }

.is-visible .flux-line { stroke-dashoffset: 0; }
.is-visible .monopole-core { animation: coreJitter 3.2s ease-in-out infinite; }

@keyframes pulseDust { 0%,100% { transform: scale(.72); opacity: .48; } 50% { transform: scale(1.1); opacity: .82; } }
@keyframes drawFlux { to { stroke-dashoffset: 0; } }
@keyframes recruit { from { transform: translateX(-8px) translateY(3px); } to { transform: translateX(10px) translateY(-5px); } }
@keyframes instrumentSpin { to { transform: rotate(360deg); } }
@keyframes whisper { 0%,100% { opacity: .28; filter: blur(.3px); } 50% { opacity: .9; filter: blur(0); } }
@keyframes coreJitter { 0%,100% { transform: translate(0,0); } 20% { transform: translate(.8px,-.4px); } 40% { transform: translate(-.4px,.9px); } 60% { transform: translate(.4px,.3px); } 80% { transform: translate(-.7px,-.2px); } }

@media (max-width: 760px) {
  .warped-wordmark { left: 22%; top: 42%; font-size: 21vw; transform: rotate(-7deg); }
  .plate-broken { display: block; }
  .split-plane { min-height: 64vh; padding: 14vh 8vw; }
  .right-plane { border-left: 0; border-top: 1px solid rgba(244,239,225,.18); }
  .radial-band { width: 18rem; height: 18rem; left: 24%; }
  .slanted-lab-plate { width: 86vw; left: 5vw; }
}