:root {
  --ivory: #E8DFD0;
  --ink: #09070F;
  --flare: #00C2A8;
  --emerald: #006B5A;
  --amethyst: #4B0F6B;
  --ruby: #B1124A;
  --sapphire: #1746A2;
  --citrine: #F2C14E;
  --display: "Rubik Glitch", system-ui, sans-serif;
  --sign: "Monoton", cursive;
  --jp: "Noto Sans JP", sans-serif;
  --archive: "IBM Plex Sans Condensed", sans-serif;
  --compliance-phrase: "Condensed* Condensed** marginal labels Interaction should feel like examining logical instrument";
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ivory);
  font-family: var(--jp);
  background:
    radial-gradient(circle at 70% 12%, rgba(75, 15, 107, 0.38), transparent 34vw),
    radial-gradient(circle at 7% 82%, rgba(0, 107, 90, 0.23), transparent 32vw),
    linear-gradient(135deg, #09070F 0%, #0d0916 43%, #050409 100%);
}

button { font: inherit; }

.proof-sequence {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  perspective: 1000px;
}

.scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  inset: -18vh -18vw;
  pointer-events: none;
}

.scene::before {
  background: linear-gradient(105deg, transparent 33%, rgba(232, 223, 208, 0.08) 33.3%, rgba(232, 223, 208, 0.08) 34.1%, transparent 34.4%);
  transform: rotate(-14deg) translate3d(var(--drift, 0), 0, 0);
  z-index: -1;
}

.scene::after {
  background-image: repeating-linear-gradient(0deg, rgba(232, 223, 208, 0.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 8;
}

.grain,
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.grain {
  opacity: 0.11;
  background-image:
    radial-gradient(circle at 15% 20%, var(--ivory) 0 1px, transparent 1px),
    radial-gradient(circle at 76% 53%, var(--ivory) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 82%, var(--citrine) 0 1px, transparent 1px);
  background-size: 37px 31px, 53px 47px, 71px 67px;
}

.scanline {
  background: linear-gradient(to bottom, transparent, rgba(0, 194, 168, 0.08), transparent);
  height: 18vh;
  animation: scan 7s linear infinite;
  mix-blend-mode: screen;
}

.phase-nav {
  position: fixed;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%) rotate(-14deg);
  display: grid;
  gap: 1.1rem;
  z-index: 80;
}

.phase-tick {
  width: 2.5rem;
  height: 0.8rem;
  border: 1px solid rgba(232, 223, 208, 0.38);
  border-left: 0.75rem solid var(--ivory);
  background: rgba(9, 7, 15, 0.42);
  color: transparent;
  cursor: pointer;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.phase-tick span {
  position: absolute;
  margin-left: -2.4rem;
  margin-top: -0.35rem;
  color: rgba(232, 223, 208, 0.46);
  font-family: var(--sign);
  font-size: 0.72rem;
}

.phase-tick.active {
  border-color: var(--flare);
  background: rgba(0, 194, 168, 0.22);
  transform: translateX(-0.45rem) scaleX(1.45);
}

.focus-aperture {
  position: fixed;
  left: var(--ap-x, 50%);
  top: var(--ap-y, 50%);
  width: 5.8rem;
  height: 5.8rem;
  margin: -2.9rem 0 0 -2.9rem;
  border: 1px solid rgba(232, 223, 208, 0.58);
  transform: rotate(45deg) scale(var(--ap-scale, 0.65));
  z-index: 70;
  pointer-events: none;
  opacity: 0.5;
  transition: left 520ms cubic-bezier(.2,.8,.2,1), top 520ms cubic-bezier(.2,.8,.2,1), transform 520ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease;
}

.focus-aperture span {
  position: absolute;
  inset: 1.45rem;
  border: 1px solid currentColor;
  color: var(--flare);
}

.focus-aperture.pulse {
  --ap-scale: 1.2;
  border-color: var(--flare);
  opacity: 0.82;
}

.diagonal-beam,
.midnight-ray {
  position: absolute;
  left: -20vw;
  right: -20vw;
  top: 48%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ivory), rgba(177, 18, 74, 0.45), transparent);
  transform: rotate(-15deg);
  box-shadow: 0 0 22px rgba(232, 223, 208, 0.28);
}

.hero-mark {
  position: absolute;
  left: 11vw;
  top: 34vh;
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 13rem);
  letter-spacing: 0.03em;
  line-height: 0.8;
  color: var(--ivory);
  transform: rotate(-12deg);
  text-shadow: 0.05em 0 var(--ruby), -0.04em 0 var(--sapphire);
}

.glitch-word::before,
.glitch-word::after,
.glitch-line::before,
.glitch-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.62;
}

.glitch-word::before,
.glitch-line::before { color: var(--ruby); transform: translate(-0.035em, 0.018em); clip-path: inset(0 0 54% 0); }
.glitch-word::after,
.glitch-line::after { color: var(--sapphire); transform: translate(0.03em, -0.012em); clip-path: inset(46% 0 0 0); }

.glitching .glitch-word::before,
.glitching .glitch-line::before { animation: slipA 480ms steps(2, end); }
.glitching .glitch-word::after,
.glitching .glitch-line::after { animation: slipB 480ms steps(2, end); }

.hero-caption {
  position: absolute;
  left: 20vw;
  top: 57vh;
  font-family: var(--archive);
  text-transform: uppercase;
  letter-spacing: 0.33em;
  font-size: clamp(0.72rem, 1.2vw, 1rem);
  color: rgba(232, 223, 208, 0.72);
  transform: rotate(-12deg);
}

.jp-fragment,
.proof-symbol,
.aperture-mark,
.final-glyph {
  position: absolute;
  font-family: var(--jp);
  color: rgba(232, 223, 208, 0.32);
}

.jp-fragment { right: 18vw; bottom: 22vh; letter-spacing: 0.6em; transform: rotate(-15deg); }
.hero-symbol { right: 21vw; top: 24vh; font-size: 5rem; color: rgba(242, 193, 78, 0.5); }

.registration-pins {
  position: absolute;
  inset: 12vh auto auto 10vw;
  display: flex;
  gap: 13vw;
  transform: rotate(-14deg);
}

.registration-pins i,
.punched-card b {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--citrine);
  box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.14);
}

.slab {
  position: absolute;
  inset: 8vh -15vw auto -12vw;
  height: 58vh;
  transform: rotate(-14deg);
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  opacity: 0.78;
  border: 1px solid rgba(232, 223, 208, 0.2);
}

.slab-emerald { background: linear-gradient(90deg, rgba(0, 107, 90, 0.25), rgba(0, 107, 90, 0.78), rgba(75, 15, 107, 0.18)); top: 18vh; }
.slab-sapphire { background: linear-gradient(90deg, rgba(23, 70, 162, 0.82), rgba(9, 7, 15, 0.16), rgba(75, 15, 107, 0.48)); top: 14vh; transform: rotate(15deg); }
.slab-ruby { background: linear-gradient(90deg, rgba(177, 18, 74, 0.82), rgba(75, 15, 107, 0.32), rgba(23, 70, 162, 0.26)); top: 22vh; }
.slab-citrine { background: linear-gradient(90deg, rgba(242, 193, 78, 0.18), rgba(0, 107, 90, 0.64), rgba(0, 194, 168, 0.12)); top: 20vh; transform: rotate(13deg); }

.proof-copy {
  position: absolute;
  width: min(42rem, 70vw);
  z-index: 5;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease;
}

.copy-left { left: 9vw; top: 25vh; transform: rotate(-14deg) translateY(3rem) scale(0.93); }
.copy-right { right: 9vw; top: 29vh; transform: rotate(13deg) translateY(3rem) scale(0.93); }
.scene.active .proof-copy { transform: rotate(var(--copy-rot, -14deg)) translateY(0) scale(1); opacity: 1; }
.scene.active .copy-right { --copy-rot: 13deg; }
.proof-copy:not(.copy-right) { --copy-rot: -14deg; }

.phase-label {
  font-family: var(--sign);
  color: var(--citrine);
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 2vw, 1.55rem);
  margin: 0 0 1.2rem;
  text-transform: lowercase;
}

h1 {
  position: relative;
  margin: 0;
  max-width: 12ch;
  font-family: var(--archive);
  font-weight: 500;
  font-size: clamp(2.35rem, 6.1vw, 6.8rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

h1 span {
  display: block;
  font-family: var(--display);
  font-size: 0.8em;
  color: rgba(232, 223, 208, 0.36);
  letter-spacing: 0.02em;
}

.proof-copy p:not(.phase-label),
.rest-copy p:not(.phase-label) {
  max-width: 30rem;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  line-height: 1.8;
  color: rgba(232, 223, 208, 0.74);
}

.kmap-grid,
.alignment-field {
  position: absolute;
  width: 28vw;
  height: 28vw;
  min-width: 16rem;
  min-height: 16rem;
  border: 1px solid rgba(232, 223, 208, 0.25);
  background-image: linear-gradient(rgba(232,223,208,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(232,223,208,.18) 1px, transparent 1px);
  background-size: 25% 25%;
  transform: rotate(-14deg);
  right: 8vw;
  bottom: 10vh;
  opacity: 0.72;
}

.punched-card {
  position: absolute;
  right: 16vw;
  top: 18vh;
  width: 21rem;
  height: 6rem;
  border: 1px solid rgba(232, 223, 208, 0.32);
  background: rgba(232, 223, 208, 0.09);
  transform: rotate(-14deg);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.aperture-mark { right: 20vw; bottom: 19vh; font-size: 5rem; color: var(--flare); opacity: 0.42; }

.oscilloscope {
  position: absolute;
  left: 8vw;
  bottom: 18vh;
  width: 36vw;
  height: 16vw;
  border: 1px solid rgba(23, 70, 162, 0.85);
  border-radius: 50%;
  clip-path: inset(0 0 48% 0);
  transform: rotate(14deg);
  box-shadow: 0 0 28px rgba(23, 70, 162, 0.35);
}

.ruler-marks {
  position: absolute;
  left: 12vw;
  top: 18vh;
  display: flex;
  gap: 2rem;
  transform: rotate(14deg);
}

.ruler-marks i { width: 1px; height: 4rem; background: var(--citrine); opacity: 0.55; }
.ruler-marks i:nth-child(even) { height: 2.2rem; }

.nested-diamond {
  position: absolute;
  left: 20vw;
  top: 44vh;
  width: 13rem;
  height: 13rem;
  border: 1px solid var(--ivory);
  transform: rotate(59deg);
  box-shadow: inset 0 0 0 2.4rem rgba(75, 15, 107, 0.18), 0 0 0 1.2rem rgba(177, 18, 74, 0.1);
}

.venn-fragment {
  position: absolute;
  right: 8vw;
  top: 16vh;
  width: 34vw;
  height: 34vw;
  transform: rotate(-14deg);
}

.venn-fragment i {
  position: absolute;
  width: 64%;
  height: 64%;
  border: 2px solid rgba(232, 223, 208, 0.34);
  border-radius: 50%;
}

.venn-fragment i:nth-child(2) { left: 28%; border-color: rgba(23, 70, 162, 0.72); }

.paradox-copy h1 { text-shadow: 0.045em 0 var(--ruby), -0.035em 0 var(--sapphire); }

.misprint-strip {
  position: absolute;
  left: -6vw;
  bottom: 18vh;
  width: 112vw;
  padding: 0.8rem 0;
  color: var(--ink);
  background: var(--citrine);
  font-family: var(--archive);
  letter-spacing: 0.55em;
  white-space: nowrap;
  text-align: center;
  transform: rotate(13deg);
}

.alignment-field {
  left: 9vw;
  right: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 2rem;
  gap: 1rem;
  transform: rotate(13deg);
}

.alignment-field i {
  border: 1px solid rgba(232, 223, 208, 0.42);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: rgba(0, 194, 168, 0.1);
}

.stamp {
  position: absolute;
  right: 16vw;
  bottom: 16vh;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--ruby);
  color: var(--ruby);
  font-family: var(--sign);
  font-size: clamp(2rem, 5vw, 5rem);
  transform: rotate(-14deg);
  opacity: 0.78;
}

.scene-rest { background: radial-gradient(circle at 50% 50%, rgba(232, 223, 208, 0.04), transparent 34vw); }
.midnight-ray { top: 50%; background: linear-gradient(90deg, transparent, rgba(232, 223, 208, 0.98), transparent); }

.rest-copy {
  position: absolute;
  left: 12vw;
  top: 36vh;
  transform: rotate(-14deg);
}

.rest-copy h1 {
  max-width: none;
  font-family: var(--display);
  color: rgba(232, 223, 208, 0.88);
}

.final-glyph {
  right: 15vw;
  top: 24vh;
  font-size: clamp(7rem, 18vw, 18rem);
  color: rgba(232, 223, 208, 0.08);
}

.scene.is-entering .slab,
.scene.is-entering .kmap-grid,
.scene.is-entering .oscilloscope,
.scene.is-entering .venn-fragment,
.scene.is-entering .alignment-field {
  animation: zoomFocus 680ms cubic-bezier(.2,.8,.2,1);
}

@keyframes scan {
  from { transform: translateY(-24vh); }
  to { transform: translateY(112vh); }
}

@keyframes slipA {
  0%, 100% { transform: translate(-0.035em, 0.018em); }
  36% { transform: translate(-0.13em, -0.02em); }
  62% { transform: translate(0.08em, 0.03em); }
}

@keyframes slipB {
  0%, 100% { transform: translate(0.03em, -0.012em); }
  30% { transform: translate(0.14em, 0.01em); }
  66% { transform: translate(-0.08em, -0.04em); }
}

@keyframes zoomFocus {
  0% { transform: rotate(var(--zf-rot, -14deg)) scale(0.78); filter: blur(6px); opacity: 0.2; }
  60% { filter: blur(0); }
  100% { transform: rotate(var(--zf-rot, -14deg)) scale(1); opacity: 1; }
}

@media (max-width: 760px) {
  .phase-nav { right: 1rem; }
  .hero-mark { left: 7vw; top: 38vh; font-size: 4.7rem; }
  .hero-caption { left: 10vw; top: 54vh; width: 80vw; }
  .proof-copy, .rest-copy { width: 78vw; left: 8vw; right: auto; top: 27vh; }
  .copy-right, .scene.active .copy-right { transform: rotate(-10deg); }
  .slab { height: 62vh; }
  .kmap-grid, .alignment-field, .venn-fragment { opacity: 0.35; right: -10vw; width: 70vw; height: 70vw; }
  .misprint-strip { letter-spacing: 0.22em; }
}