:root {
  --paper: #F7F1E6;
  --plum: #21152F;
  --violet: #33235A;
  --indigo: #5C6BC0;
  --lavender: #A9B7E8;
  --teal: #4D9AA0;
  --gold: #C9A45A;
  --rose: #B87AA2;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--plum);
  background: var(--paper);
  font-family: "Quicksand", system-ui, sans-serif;
}

body {
  cursor: crosshair;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 18% 28%, rgba(51, 35, 90, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 62%, rgba(184, 122, 162, .09) 0 1px, transparent 1.8px),
    radial-gradient(circle at 44% 86%, rgba(77, 154, 160, .08) 0 1px, transparent 1.6px),
    repeating-linear-gradient(92deg, rgba(33, 21, 47, .025) 0 1px, transparent 1px 6px);
  background-size: 31px 31px, 43px 43px, 37px 37px, 100% 100%;
}

.cursor-bloom {
  position: fixed;
  width: 180px;
  height: 180px;
  z-index: 19;
  pointer-events: none;
  border-radius: 47% 53% 58% 42%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(169, 183, 232, .35), rgba(184, 122, 162, .18) 42%, transparent 70%);
  transition: opacity .45s ease;
}

.manuscript {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.manuscript::-webkit-scrollbar { display: none; }

.reason-leaf {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  background:
    linear-gradient(110deg, rgba(247, 241, 230, .96), rgba(247, 241, 230, .82)),
    var(--paper);
}

.reason-leaf::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(201, 164, 90, .28);
  clip-path: polygon(0 0, 92% 0, 100% 16%, 100% 100%, 8% 100%, 0 84%);
}

.leaf-inner {
  position: absolute;
  z-index: 3;
  max-width: 620px;
}

.intro-inner { left: 11vw; top: 32vh; }
.corner-left { left: 10vw; top: 21vh; }
.corner-top { left: 12vw; top: 13vh; max-width: 760px; }
.corner-right { right: 9vw; top: 18vh; text-align: right; }
.night-copy { left: 12vw; bottom: 16vh; color: var(--paper); }
.final-copy { left: 10vw; top: 18vh; }

.mono-label,
.fold-tab,
.floating-shard,
.closing-mark,
.side-hint,
.tick span {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mono-label {
  margin: 0 0 22px;
  color: var(--gold);
}

h1,
h2 {
  font-family: "Nunito Sans", system-ui, sans-serif;
  margin: 0;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: .94;
}

.wordmark {
  font-size: clamp(58px, 9vw, 148px);
  color: var(--violet);
  opacity: 0;
  filter: blur(12px);
  animation: dryWord 2.8s .3s forwards ease-out;
}

h2 {
  font-size: clamp(42px, 6vw, 92px);
  color: var(--violet);
}

.night-copy h2 { color: var(--paper); }

p {
  margin: 24px 0 0;
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1.65;
  font-weight: 500;
}

.quiet-line { max-width: 560px; color: rgba(33, 21, 47, .72); }

.wash {
  position: absolute;
  z-index: 1;
  border-radius: 47% 53% 62% 38% / 48% 42% 58% 52%;
  filter: blur(26px);
  opacity: .58;
  animation: bloom 14s infinite alternate ease-in-out;
}

.wash-indigo { width: 54vw; height: 56vh; left: 37vw; top: 14vh; background: radial-gradient(circle, rgba(92, 107, 192, .56), rgba(169, 183, 232, .28) 48%, transparent 72%); }
.wash-rose { width: 36vw; height: 39vh; left: 6vw; bottom: 3vh; background: radial-gradient(circle, rgba(184, 122, 162, .34), transparent 68%); animation-delay: -6s; }
.wash-teal { width: 48vw; height: 60vh; right: 10vw; top: 15vh; background: radial-gradient(circle, rgba(77, 154, 160, .42), rgba(169, 183, 232, .2) 52%, transparent 72%); }
.wash-lavender { width: 72vw; height: 52vh; left: 16vw; bottom: 8vh; background: radial-gradient(circle, rgba(169, 183, 232, .46), rgba(184, 122, 162, .18), transparent 70%); }
.wash-indigo.large { width: 82vw; height: 78vh; left: -8vw; top: 4vh; opacity: .42; }
.wash-clear { width: 54vw; height: 54vh; right: 12vw; bottom: 10vh; background: radial-gradient(circle, rgba(77, 154, 160, .26), rgba(169, 183, 232, .22), transparent 72%); }

.gold-rule,
.gold-fracture {
  position: absolute;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: rotate(-21deg);
  box-shadow: 0 0 20px rgba(201, 164, 90, .3);
}

.rule-one { width: 42vw; right: 4vw; top: 29vh; }
.rule-two { width: 54vw; right: 7vw; bottom: 23vh; }

.diagonal-cut {
  position: absolute;
  z-index: 2;
  background: rgba(247, 241, 230, .52);
  border-left: 1px solid rgba(201, 164, 90, .5);
  border-right: 1px solid rgba(51, 35, 90, .12);
  transform: skewX(-22deg) translateX(-70px);
  opacity: 0;
  transition: transform 1.2s ease, opacity 1.2s ease;
}

.is-visible .diagonal-cut { transform: skewX(-22deg) translateX(0); opacity: 1; }
.cut-a { width: 20vw; height: 118vh; left: 46vw; top: -9vh; }
.cut-b { width: 9vw; height: 90vh; left: 67vw; top: 2vh; transition-delay: .18s; }

.fold-tab {
  position: absolute;
  z-index: 5;
  right: 17vw;
  top: 15vh;
  color: var(--paper);
  background: var(--violet);
  padding: 15px 20px 15px 32px;
  clip-path: polygon(18% 0, 100% 0, 78% 100%, 0 100%);
}

.floating-shard {
  position: absolute;
  z-index: 5;
  padding: 16px 22px;
  color: var(--violet);
  background: rgba(247, 241, 230, .42);
  border: 1px solid rgba(201, 164, 90, .38);
  clip-path: polygon(8% 0, 100% 12%, 78% 100%, 0 82%);
  backdrop-filter: blur(8px);
  animation: drift 8s infinite alternate ease-in-out;
}

.shard-one { right: 15vw; bottom: 22vh; }
.shard-two { right: 35vw; top: 22vh; animation-delay: -2s; }
.shard-three { right: 18vw; top: 22vh; color: var(--paper); border-color: rgba(201, 164, 90, .55); }
.shard-four { right: 39vw; bottom: 19vh; color: var(--paper); animation-delay: -4s; }

.skeleton-script {
  margin-top: 46px;
  width: min(70vw, 780px);
}

.thought-line {
  position: relative;
  height: 28px;
  margin: 24px 0;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(169, 183, 232, .24), rgba(247, 241, 230, .76), rgba(169, 183, 232, .28));
  border-right: 3px solid var(--gold);
  clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%);
}

.thought-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.9s infinite;
}

.thought-line::after {
  content: attr(data-text);
  position: absolute;
  left: 18px;
  top: 4px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--violet);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}

.thought-line.resolved::after { opacity: 1; transform: translateY(0); }
.thought-line.resolved::before { opacity: 0; }
.thought-line.short { width: 56%; }
.thought-line.medium { width: 78%; }

.proof-mark {
  position: absolute;
  right: 18vw;
  top: 23vh;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 18vw;
  color: rgba(51, 35, 90, .08);
}

.triangle-window {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 25vw;
  height: 31vh;
  color: var(--paper);
  background: linear-gradient(145deg, rgba(51, 35, 90, .8), rgba(92, 107, 192, .48));
  border: 1px solid rgba(201, 164, 90, .42);
  clip-path: polygon(50% 0, 100% 100%, 0 78%);
  opacity: 0;
  transform: translateY(48px) rotate(-8deg);
  transition: opacity 1s ease, transform 1s ease;
}

.is-visible .triangle-window { opacity: 1; transform: translateY(0) rotate(-8deg); }
.triangle-window span { font-family: "DM Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.tw-one { left: 9vw; top: 16vh; }
.tw-two { left: 29vw; top: 38vh; transform: translateY(48px) rotate(11deg); transition-delay: .18s; background: linear-gradient(145deg, rgba(77, 154, 160, .65), rgba(92, 107, 192, .48)); }
.tw-three { left: 16vw; bottom: 9vh; transform: translateY(48px) rotate(-19deg); transition-delay: .34s; }
.is-visible .tw-two { transform: translateY(0) rotate(11deg); }
.is-visible .tw-three { transform: translateY(0) rotate(-19deg); }

.ruling-lines {
  position: absolute;
  inset: 11vh 7vw;
  background: repeating-linear-gradient(112deg, transparent 0 72px, rgba(201, 164, 90, .22) 73px, transparent 74px);
}

.leaf-night {
  background: radial-gradient(circle at 54% 52%, #33235A, #21152F 64%);
}

.night-pool {
  position: absolute;
  left: 29vw;
  top: 8vh;
  width: 48vw;
  height: 76vh;
  border-radius: 51% 49% 41% 59%;
  filter: blur(18px);
  background: radial-gradient(circle, rgba(92, 107, 192, .62), rgba(184, 122, 162, .22) 48%, transparent 71%);
  animation: bloom 11s infinite alternate ease-in-out;
}

.fracture-one { width: 70vw; left: 16vw; top: 48vh; transform: rotate(-24deg); }
.fracture-two { width: 38vw; right: 4vw; top: 31vh; transform: rotate(22deg); }

.compass {
  position: absolute;
  right: 16vw;
  top: 24vh;
  width: 310px;
  height: 310px;
  z-index: 5;
  transform: scale(.8) rotate(-18deg);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.is-visible .compass { opacity: 1; transform: scale(1) rotate(0); }
.compass i,
.compass b { position: absolute; display: block; }
.compass i { background: linear-gradient(135deg, var(--violet), var(--indigo)); clip-path: polygon(50% 0, 100% 100%, 0 82%); }
.compass .north { width: 82px; height: 145px; left: 114px; top: 0; }
.compass .east { width: 142px; height: 78px; right: 0; top: 118px; transform: rotate(90deg); background: linear-gradient(135deg, var(--teal), var(--indigo)); }
.compass .south { width: 74px; height: 135px; left: 119px; bottom: 0; transform: rotate(180deg); background: linear-gradient(135deg, var(--rose), var(--violet)); }
.compass .west { width: 130px; height: 76px; left: 0; top: 121px; transform: rotate(-90deg); }
.compass b { width: 18px; height: 18px; left: 146px; top: 146px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 34px rgba(201, 164, 90, .8); }

.closing-mark {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  color: var(--gold);
}

.side-hint {
  position: absolute;
  left: 11vw;
  bottom: 13vh;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
}

.side-hint span {
  width: 34px;
  height: 10px;
  background: var(--gold);
  clip-path: polygon(0 35%, 78% 35%, 78% 0, 100% 50%, 78% 100%, 78% 65%, 0 65%);
  animation: hint 1.8s infinite ease-in-out;
}

.chapter-rail {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 26px;
  display: flex;
  gap: 18px;
  transform: translateX(-50%);
}

.tick {
  position: relative;
  width: 48px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(51, 35, 90, .48);
  cursor: pointer;
}

.tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 18px;
  background: currentColor;
  transform: translateX(-50%) skewX(-24deg);
  transition: height .3s ease, color .3s ease;
}

.tick span { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); opacity: 0; }
.tick.active { color: var(--gold); }
.tick.active::before { height: 30px; }
.tick.active span { opacity: 1; }

.reason-leaf .leaf-inner,
.reason-leaf .floating-shard,
.reason-leaf .gold-rule,
.reason-leaf .gold-fracture {
  transition: opacity .9s ease, transform .9s ease;
}

.reason-leaf:not(.is-visible) .leaf-inner { opacity: .18; transform: translateY(28px); }
.reason-leaf:not(.is-visible) .floating-shard,
.reason-leaf:not(.is-visible) .gold-rule,
.reason-leaf:not(.is-visible) .gold-fracture { opacity: 0; }

@keyframes dryWord {
  0% { opacity: 0; filter: blur(18px); letter-spacing: .14em; }
  100% { opacity: 1; filter: blur(0); letter-spacing: .035em; }
}

@keyframes bloom {
  0% { transform: scale(.92) rotate(-4deg); opacity: .36; }
  100% { transform: scale(1.1) rotate(5deg); opacity: .64; }
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  100% { transform: translate3d(20px, -24px, 0) rotate(4deg); }
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

@keyframes hint {
  50% { transform: translateX(10px); opacity: .55; }
}

@media (max-width: 760px) {
  .leaf-inner { left: 9vw !important; right: 9vw !important; top: 14vh; max-width: none; text-align: left; }
  .night-copy { bottom: auto; color: var(--paper); }
  .compass { right: 8vw; top: 55vh; width: 190px; height: 190px; }
  .compass .north { width: 52px; height: 92px; left: 69px; }
  .compass .east { width: 90px; height: 50px; top: 70px; }
  .compass .south { width: 48px; height: 86px; left: 71px; }
  .compass .west { width: 84px; height: 48px; top: 72px; }
  .compass b { left: 86px; top: 86px; }
  .chapter-rail { gap: 8px; }
  .tick { width: 36px; }
}