:root {
  --charcoal: #151311;
  --burnt: #C65A1E;
  --ember: #F07A2B;
  --cream: #F2E7D2;
  --oxide: #6E3520;
  --ash: #8C8177;
  --clay: #A94A23;
  --display: "Space Grotesk", sans-serif;
  --sans: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(198, 90, 30, 0.08), transparent 26rem),
    radial-gradient(circle at 82% 72%, rgba(110, 53, 32, 0.16), transparent 30rem),
    var(--charcoal);
  z-index: -3;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .13;
  z-index: 20;
  background-image: repeating-radial-gradient(circle at 17% 23%, rgba(242, 231, 210, .15) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}

.cursor-line {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 26vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  opacity: .26;
  transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  z-index: 12;
}

.proof-margin {
  position: fixed;
  left: clamp(1rem, 2vw, 2rem);
  top: 0;
  bottom: 0;
  width: 11rem;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 0;
  color: var(--ash);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.domain-mark {
  color: var(--cream);
  text-transform: none;
  letter-spacing: .02em;
  font-family: var(--sans);
  font-weight: 500;
}

.sequence-marker {
  display: grid;
  gap: .72rem;
  border-left: 1px solid rgba(140,129,119,.24);
  padding-left: .9rem;
}

.marker {
  color: var(--ash);
  text-decoration: none;
  transition: color .35s ease, transform .35s ease;
}

.marker span { color: var(--oxide); margin-right: .4rem; }
.marker.active, .marker:hover { color: var(--cream); transform: translateX(.32rem); }
.marker.active span, .marker:hover span { color: var(--ember); }

.inference-wall { width: 100%; }

.panel {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(10, 10vh);
  padding: clamp(1.2rem, 3vw, 3rem);
  isolation: isolate;
}

.coordinate, .coordinate.top {
  grid-column: 13 / 16;
  grid-row: 1;
  align-self: end;
  color: var(--ash);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.proposition, .compression-title, .conclusion-plane h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .84;
}

.opening-proposition {
  grid-column: 3 / 16;
  grid-row: 3 / 8;
  font-size: clamp(4rem, 12vw, 13rem);
  max-width: 11ch;
  z-index: 2;
}

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(4.5rem) rotate(2deg);
  transition: opacity .9s ease, transform .9s cubic-bezier(.19,1,.22,1), color .35s ease;
}

.active .word, .seen .word { opacity: 1; transform: translateY(0) rotate(0deg); }
.word:nth-child(2) { transition-delay: .12s; }
.word:nth-child(3) { transition-delay: .24s; }
.word:nth-child(4) { transition-delay: .36s; }
.muted { color: var(--ash); }

.underlined { position: relative; }
.underlined::after, .hover-term::after {
  content: "";
  position: absolute;
  left: .03em;
  right: .02em;
  bottom: -.08em;
  height: .055em;
  background: var(--burnt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.19,1,.22,1), background .35s ease;
}
.active .underlined::after, .seen .underlined::after { transform: scaleX(1); transition-delay: .55s; }
.hover-term { position: relative; cursor: crosshair; }
.hover-term:hover { color: var(--ember); }
.hover-term:hover::after { transform: scaleX(1); background: var(--ember); transition-delay: 0s; }

.marginalia {
  color: var(--ash);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  max-width: 28rem;
  margin: 0;
  z-index: 3;
}
.opening-note { grid-column: 11 / 15; grid-row: 8; }
.premise-note { grid-column: 3 / 7; grid-row: 8; }
.tension-note { grid-column: 12 / 16; grid-row: 8; }
.resolution-note { grid-column: 3 / 7; grid-row: 8; }

.inference-svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.inference-svg path {
  fill: none;
  stroke: var(--burnt);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.7s cubic-bezier(.19,1,.22,1);
}
.active .inference-svg path, .seen .inference-svg path { stroke-dashoffset: 0; }
.opening-line { left: 4vw; right: 4vw; bottom: 14vh; width: 92vw; height: 12vh; }

.floating-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stone {
  position: absolute;
  display: block;
  background: var(--oxide);
  opacity: .72;
  filter: saturate(.86);
  clip-path: polygon(14% 12%, 68% 4%, 94% 33%, 78% 88%, 24% 78%, 5% 43%);
  animation: floatStone 9s ease-in-out infinite alternate;
  transition: transform .7s cubic-bezier(.19,1,.22,1), background .35s ease;
}
.stone.recalibrate, .aperture.recalibrate, .plane-shadow.recalibrate { transform: translate3d(1.2rem, -.8rem, 0) rotate(4deg) scale(1.04); background: var(--clay); }
.stone-one { width: 12rem; height: 9rem; right: 12vw; top: 12vh; background: var(--ash); opacity: .18; animation-duration: 11s; }
.stone-two { width: 18rem; height: 14rem; left: 13vw; bottom: 8vh; opacity: .22; }
.stone-three { width: 15rem; height: 10rem; right: 7vw; top: 18vh; opacity: .23; }
.stone-four { width: 11rem; height: 13rem; left: 42vw; bottom: 8vh; background: var(--ash); opacity: .16; animation-duration: 12s; }
.stone-five { width: 19rem; height: 9rem; left: 9vw; top: 20vh; opacity: .18; }
.stone-six { width: 20rem; height: 17rem; left: 6vw; top: 13vh; opacity: .12; position: absolute; }

.proof-dot, .proof-arrow, .bracket {
  position: absolute;
  color: var(--ember);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .08em;
  animation: driftMark 8s ease-in-out infinite alternate;
}
.dot-one { left: 22vw; top: 18vh; }
.dot-two { right: 18vw; bottom: 30vh; animation-duration: 10s; }
.dot-three { right: 20vw; top: 64vh; }
.proof-arrow { width: 7rem; height: 1px; background: var(--burnt); right: 23vw; top: 42vh; transform: rotate(-12deg); }
.proof-arrow::after { content: ""; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--burnt); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.bracket-one { left: 58vw; top: 24vh; color: var(--ash); }

.premise-chain {
  grid-column: 2 / 16;
  grid-row: 3 / 7;
  display: grid;
  grid-template-columns: 1fr .35fr 1fr .25fr 1.2fr;
  align-items: center;
  gap: 1.2rem;
  z-index: 2;
}
.clause strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.3vw, 7rem);
  line-height: .93;
  letter-spacing: -.055em;
  font-weight: 700;
}
.label {
  display: block;
  color: var(--ember);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .7rem;
}
.connector-line {
  height: 1px;
  background: var(--burnt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.19,1,.22,1) .45s;
}
.active .connector-line, .seen .connector-line { transform: scaleX(1); }
.connector-line.short { opacity: .65; }

.tension { background: linear-gradient(90deg, rgba(21,19,17,1), rgba(21,19,17,.96)); }
.tension-grid {
  grid-column: 3 / 15;
  grid-row: 2 / 9;
  position: relative;
  z-index: 3;
}
.compression-title {
  position: absolute;
  left: 14%;
  top: 34%;
  max-width: 9ch;
  font-size: clamp(4rem, 10vw, 11rem);
}
.rotated-clause {
  position: absolute;
  color: var(--ash);
  font-family: var(--sans);
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  max-width: 24rem;
  line-height: 1.35;
}
.clause-a { left: 2%; top: 18%; transform: rotate(-3deg); }
.clause-b { right: 2%; bottom: 18%; transform: rotate(2deg); text-align: right; }
.aperture {
  position: absolute;
  left: 52%;
  top: 28%;
  width: clamp(12rem, 24vw, 25rem);
  aspect-ratio: 1 / .74;
  border-radius: 50%;
  background: #151311;
  box-shadow: inset 0 0 0 1px rgba(198,90,30,.38), 0 0 7rem rgba(198,90,30,.11);
  transform: translate(-50%, -50%);
  transition: transform .8s cubic-bezier(.19,1,.22,1), box-shadow .4s ease;
}
.aperture span {
  position: absolute;
  width: 1.4rem;
  height: 1px;
  background: var(--ember);
  left: 50%;
  top: 50%;
  transform-origin: -5rem 0;
}
.aperture span:nth-child(1) { transform: rotate(8deg) translateX(8rem); }
.aperture span:nth-child(2) { transform: rotate(64deg) translateX(8rem); }
.aperture span:nth-child(3) { transform: rotate(123deg) translateX(8rem); }
.aperture span:nth-child(4) { transform: rotate(185deg) translateX(8rem); }
.aperture span:nth-child(5) { transform: rotate(244deg) translateX(8rem); }
.aperture span:nth-child(6) { transform: rotate(306deg) translateX(8rem); }
.crossing-lines { inset: 7vh 3vw; width: 94vw; height: 86vh; opacity: .48; }
.crossing-lines path { stroke-width: 1.2; }

.resolution { align-items: center; }
.conclusion-plane {
  grid-column: 5 / 14;
  grid-row: 3 / 8;
  background: var(--cream);
  color: var(--charcoal);
  padding: clamp(2rem, 5vw, 5rem);
  clip-path: polygon(0 10%, 95% 0, 100% 84%, 8% 100%);
  transform: translateX(12vw) rotate(-1.5deg);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.19,1,.22,1), opacity 1s ease;
  z-index: 2;
}
.active .conclusion-plane, .seen .conclusion-plane { opacity: 1; transform: translateX(0) rotate(-1.5deg); }
.conclusion-plane h2 { margin: 0; font-size: clamp(3rem, 8vw, 9rem); }
.conclusion-plane .underlined::after { background: var(--burnt); }
.plane-shadow {
  position: absolute;
  right: 6vw;
  bottom: 18vh;
  width: 20vw;
  height: 28vh;
  background: var(--clay);
  opacity: .2;
  clip-path: polygon(12% 0, 100% 18%, 82% 100%, 0 72%);
  transition: transform .8s cubic-bezier(.19,1,.22,1);
}
.horizon-line { left: 0; bottom: 11vh; width: 100vw; height: 8vh; }
.horizon-line path { stroke: var(--ember); stroke-width: 2; }

@keyframes floatStone {
  from { transform: translate3d(0,0,0) rotate(-2deg); }
  to { transform: translate3d(1.4rem,-1rem,0) rotate(2deg); }
}

@keyframes driftMark {
  from { transform: translate3d(0,0,0); opacity: .45; }
  to { transform: translate3d(.8rem,-1.6rem,0); opacity: .95; }
}

@media (max-width: 900px) {
  .proof-margin { width: auto; right: 1rem; bottom: auto; height: auto; gap: 1rem; }
  .sequence-marker { display: none; }
  .panel { grid-template-columns: repeat(8, 1fr); padding-top: 5rem; }
  .coordinate, .coordinate.top { grid-column: 2 / 8; }
  .opening-proposition { grid-column: 1 / 9; font-size: clamp(4rem, 20vw, 8rem); }
  .opening-note, .premise-note, .tension-note, .resolution-note { grid-column: 2 / 8; grid-row: 8; }
  .premise-chain { grid-column: 1 / 9; grid-template-columns: 1fr; grid-row: 2 / 8; }
  .connector-line { width: 45vw; }
  .tension-grid { grid-column: 1 / 9; }
  .compression-title { left: 0; top: 35%; }
  .aperture { left: 64%; top: 32%; }
  .conclusion-plane { grid-column: 1 / 9; }
}