:root {
  /* Font tokens from DESIGN.md: Mono** Sans** Grotesk** */
  --cream: #F3E5C8;
  --burgundy: #5A1021;
  --wine: #8A2E3B;
  --blackberry: #171013;
  --olive: #59613A;
  --amber: #F0A84A;
  --rose: #C87972;
  --bone: #D8C49B;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.projector-vignette,
.grain-field,
.lens-flare {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.projector-vignette {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(23, 16, 19, .16) 78%, rgba(23, 16, 19, .36) 100%);
  mix-blend-mode: multiply;
}

.grain-field {
  opacity: .42;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(23,16,19,.18) 0 1px, transparent 1.3px),
    radial-gradient(circle at 78% 42%, rgba(90,16,33,.16) 0 1px, transparent 1.4px),
    radial-gradient(circle at 31% 84%, rgba(89,97,58,.14) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(216,196,155,.14), transparent 18%, rgba(200,121,114,.09) 45%, transparent 80%);
  background-size: 19px 23px, 31px 29px, 43px 37px, 100% 100%;
}

.lens-flare {
  --x: 16vw;
  --y: 18vh;
  width: 44vmin;
  height: 44vmin;
  inset: auto;
  left: calc(var(--x) - 22vmin);
  top: calc(var(--y) - 22vmin);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(240,168,74,.72) 0 5%, rgba(240,168,74,.35) 16%, rgba(200,121,114,.18) 31%, transparent 62%),
    linear-gradient(135deg, transparent 15%, rgba(240,168,74,.4), transparent 60%);
  filter: blur(11px);
  mix-blend-mode: screen;
  opacity: .82;
  z-index: 18;
  transform: rotate(-18deg);
}

.slide-register {
  position: fixed;
  z-index: 30;
  right: 22px;
  top: 18px;
  display: flex;
  gap: 12px;
  color: var(--cream);
  background: rgba(90, 16, 33, .84);
  border: 1px solid rgba(216,196,155,.55);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  box-shadow: 3px 3px 0 rgba(23,16,19,.22);
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(122deg, rgba(216,196,155,.58), transparent 26%, rgba(243,229,200,.92) 62%, rgba(200,121,114,.16)),
    var(--cream);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 3.2vmin;
  border: 1px solid rgba(90,16,33,.28);
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(216,196,155,.75), inset 0 0 48px rgba(23,16,19,.08);
  z-index: -1;
}

.corner-label,
.closing-mark,
.artifact-mark,
.margin-note,
.mono-kicker,
.stamp {
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.top-left { position: absolute; left: 6vw; top: 6vh; }
.top-right { position: absolute; right: 6vw; top: 7vh; text-align: right; }
.bottom-right { position: absolute; right: 6vw; bottom: 7vh; }

.diagonal-thread {
  position: absolute;
  width: 128vw;
  height: 2px;
  left: -13vw;
  top: 55vh;
  background: linear-gradient(90deg, transparent, var(--rose), var(--amber), var(--burgundy), transparent);
  transform: rotate(-18deg);
  opacity: .55;
}

.hero-card {
  position: absolute;
  left: 9vw;
  top: 26vh;
  width: 78vw;
  min-height: 40vh;
  padding: clamp(22px, 4vw, 56px);
  border-radius: 34px;
  transform: rotate(-4deg);
  background: rgba(243,229,200,.58);
  border: 1px solid rgba(90,16,33,.2);
  box-shadow: 18px 22px 0 rgba(90,16,33,.08), -8px -8px 0 rgba(216,196,155,.52);
}

.glitch-title {
  position: relative;
  margin: 1vh 0 0;
  color: var(--burgundy);
  font-family: var(--display);
  font-size: clamp(72px, 17vw, 240px);
  line-height: .78;
  letter-spacing: -.08em;
  text-shadow: 4px 0 0 rgba(200,121,114,.42), -3px 2px 0 rgba(23,16,19,.12);
  animation: titleTear 7s steps(1, end) infinite;
}

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

.glitch-title::before { color: var(--rose); transform: translate(5px, -2px); clip-path: inset(8% 0 58% 0); }
.glitch-title::after { color: var(--blackberry); transform: translate(-4px, 3px); clip-path: inset(54% 0 16% 0); }

.scene-one.is-visible .glitch-title::before,
.scene-one.is-visible .glitch-title::after { animation: channelBlink 7s steps(1, end) infinite; }

.caption-strip {
  max-width: 560px;
  margin: 18px 0 0 auto;
  padding: 12px 16px;
  color: var(--cream);
  background: rgba(90,16,33,.92);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.32;
  transform: rotate(2deg);
}

.sprockets { position: absolute; top: 16vh; bottom: 16vh; width: 18px; background: repeating-linear-gradient(to bottom, transparent 0 18px, rgba(90,16,33,.36) 18px 31px, transparent 31px 49px); opacity: .42; }
.sprockets-left { left: 3.7vw; }
.sprockets-right { right: 3.7vw; }

.botanical,
.bramble,
.moth { position: absolute; pointer-events: none; }

.fern-one {
  width: 44vw;
  height: 62vh;
  right: -7vw;
  top: 17vh;
  opacity: .28;
  background: repeating-linear-gradient(112deg, transparent 0 17px, var(--olive) 18px 23px, transparent 24px 42px);
  clip-path: polygon(42% 0, 50% 0, 57% 100%, 48% 100%, 44% 64%, 4% 76%, 43% 53%, 10% 38%, 44% 43%, 16% 14%, 46% 31%);
  filter: blur(.5px);
}

.diagonal-band {
  position: absolute;
  left: 14vw;
  top: 30vh;
  width: min(760px, 72vw);
  padding: clamp(28px, 5vw, 68px);
  color: var(--cream);
  background: linear-gradient(135deg, rgba(90,16,33,.96), rgba(138,46,59,.86));
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  transform: rotate(7deg);
  box-shadow: 28px 18px 0 rgba(240,168,74,.22);
}

h2 {
  margin: 8px 0 14px;
  font-family: var(--display);
  font-size: clamp(44px, 8vw, 118px);
  line-height: .86;
  letter-spacing: -.055em;
}

p { font-size: clamp(17px, 2vw, 23px); line-height: 1.42; }

.scene-two { background: linear-gradient(145deg, var(--cream), var(--bone) 58%, rgba(240,168,74,.28)); }
.film-corner { position: absolute; width: 26vmin; height: 26vmin; border: 2px solid rgba(90,16,33,.38); border-radius: 32px; }
.film-corner-a { left: 5vw; bottom: 8vh; border-top: 0; border-right: 0; }
.film-corner-b { right: 8vw; top: 18vh; border-bottom: 0; border-left: 0; }

.moth { width: 70px; height: 46px; background: var(--blackberry); opacity: .62; clip-path: polygon(50% 45%, 8% 2%, 0 54%, 42% 72%, 50% 100%, 58% 72%, 100% 54%, 92% 2%); }
.moth-a { right: 18vw; top: 28vh; transform: rotate(19deg); }
.moth-b { right: 32vw; bottom: 17vh; transform: scale(.65) rotate(-28deg); background: var(--olive); }
.moth-c { left: 12vw; bottom: 26vh; transform: scale(.48) rotate(12deg); background: var(--wine); }
.mask-moth.is-jump { animation: mothMask .52s steps(2, end); }
.left-note { position: absolute; left: 6vw; bottom: 14vh; color: var(--wine); transform: rotate(-9deg); }

.scene-three { background: linear-gradient(30deg, rgba(23,16,19,.94), rgba(90,16,33,.86) 44%, var(--cream) 44.4%, var(--cream)); color: var(--cream); }
.scene-three::before { border-color: rgba(243,229,200,.22); }
.bramble { width: 80vw; height: 18vh; background: repeating-linear-gradient(166deg, transparent 0 22px, rgba(89,97,58,.8) 23px 27px, transparent 28px 43px); clip-path: polygon(0 42%, 11% 30%, 23% 49%, 34% 19%, 48% 54%, 64% 28%, 77% 62%, 100% 40%, 100% 76%, 0 78%); filter: blur(.2px); }
.bramble-top { right: -9vw; top: 12vh; transform: rotate(-9deg); }
.bramble-bottom { left: -10vw; bottom: 10vh; transform: rotate(174deg); }

.split-frame { position: absolute; right: 10vw; top: 22vh; width: min(700px, 74vw); height: 55vh; }
.ghost-frame { position: absolute; inset: 0; border-radius: 28px; border: 1px solid rgba(216,196,155,.65); }
.ghost-frame-back { transform: translate(-18px, 16px) rotate(-6deg); background: rgba(200,121,114,.28); }
.ghost-frame-front { padding: clamp(28px, 4vw, 60px); color: var(--burgundy); background: rgba(243,229,200,.9); transform: rotate(2deg); box-shadow: 0 0 0 8px rgba(216,196,155,.26); }
.ghost-frame-front.is-jitter { animation: frameJitter .42s steps(2, end); }
.tear-line { position: absolute; left: -8vw; top: 52vh; width: 116vw; height: 20px; background: linear-gradient(90deg, transparent, var(--rose), var(--cream), transparent); clip-path: polygon(0 36%, 8% 15%, 18% 53%, 29% 23%, 42% 66%, 57% 20%, 70% 58%, 86% 35%, 100% 72%, 100% 100%, 0 100%); opacity: .62; transform: rotate(-12deg); }
.registration-cross { position: absolute; font-family: var(--mono); font-size: 44px; color: var(--rose); }
.cross-one { left: 8vw; top: 24vh; }.cross-two { right: 18vw; bottom: 13vh; }

.scene-four { background: radial-gradient(ellipse at 70% 30%, rgba(240,168,74,.24), transparent 38%), linear-gradient(160deg, var(--bone), var(--cream) 45%, rgba(89,97,58,.22)); }
.return-card { position: absolute; left: 9vw; bottom: 14vh; width: min(780px, 78vw); padding: clamp(30px, 5vw, 70px); color: var(--cream); background: rgba(23,16,19,.9); border: 1px solid var(--bone); border-radius: 38px 38px 8px 38px; transform: rotate(-3deg); box-shadow: 18px -16px 0 rgba(90,16,33,.36); }
.specimen-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.specimen-tabs span { padding: 9px 12px; color: var(--blackberry); background: var(--bone); font-family: var(--mono); font-size: 12px; transform: rotate(-2deg); }
.specimen-tabs span:nth-child(2) { background: var(--rose); transform: rotate(2deg); }
.specimen-tabs span:nth-child(3) { background: var(--amber); transform: rotate(-1deg); }
.moon-scratch { position: absolute; right: 12vw; top: 23vh; width: 22vmin; height: 22vmin; border-radius: 50%; border: 3px solid transparent; border-left-color: var(--burgundy); transform: rotate(38deg); opacity: .44; }

.scene.is-visible .botanical,
.scene.is-visible .bramble,
.scene.is-visible .moth { animation: botanicalJitter .8s steps(2, end); }

@keyframes titleTear { 0%, 91%, 93%, 100% { transform: translate(0,0) skew(0); } 92% { transform: translate(8px,-2px) skew(-6deg); } }
@keyframes channelBlink { 0%, 91%, 93%, 100% { opacity: 0; } 92% { opacity: .85; } }
@keyframes botanicalJitter { 0%, 100% { translate: 0 0; } 35% { translate: 4px -2px; } 60% { translate: -3px 2px; } }
@keyframes frameJitter { 0%, 100% { transform: rotate(2deg) translate(0,0); } 45% { transform: rotate(1deg) translate(6px,-3px); } 70% { transform: rotate(3deg) translate(-4px,2px); } }
@keyframes mothMask { 0%, 100% { clip-path: polygon(50% 45%, 8% 2%, 0 54%, 42% 72%, 50% 100%, 58% 72%, 100% 54%, 92% 2%); } 50% { clip-path: polygon(50% 0, 88% 24%, 80% 78%, 58% 62%, 50% 100%, 42% 62%, 20% 78%, 12% 24%); } }

@media (max-width: 720px) {
  .slide-register { right: 12px; top: 12px; }
  .hero-card { left: 7vw; top: 29vh; width: 86vw; }
  .caption-strip { margin-left: 0; }
  .diagonal-band, .split-frame, .return-card { width: 84vw; left: 8vw; right: auto; }
  .split-frame { top: 29vh; }
}