:root {
  --graphite: #111318;
  --chrome: #D7DCE4;
  --mercury: #F7F8F5;
  --cyan: #7DF9FF;
  --magenta: #FF4FD8;
  --brass: #B9975B;
  --violet: #3B2A6F;
  --display: "DynaPuff", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sans: "Nunito Sans", Inter, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--graphite);
  font-family: var(--serif);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 14%, rgba(125, 249, 255, 0.22), transparent 28rem),
    linear-gradient(180deg, var(--mercury) 0%, var(--chrome) 36%, var(--graphite) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background: repeating-linear-gradient(180deg, rgba(17, 19, 24, 0.035) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: 0.32;
}

.flare-wipe {
  position: fixed;
  inset: -25vmax;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(247,248,245,0.96) 0 7%, rgba(125,249,255,0.62) 12%, rgba(255,79,216,0.18) 24%, transparent 46%);
  mix-blend-mode: screen;
  transform: scale(0.45) rotate(0deg);
  transition: opacity 0.28s ease, transform 0.54s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-wiping .flare-wipe {
  opacity: 1;
  transform: scale(1.15) rotate(8deg);
}

a { color: inherit; }

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.dust {
  position: absolute;
  width: 36rem;
  height: 36rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(125, 249, 255, 0.28), rgba(255, 79, 216, 0.08) 38%, transparent 68%);
  filter: blur(20px);
  mix-blend-mode: screen;
  animation: slowSpin 26s linear infinite;
}

.dust-a { top: -12rem; right: -10rem; }
.dust-b { bottom: 12vh; left: -16rem; animation-duration: 34s; }
.dust-c { top: 44vh; right: 12vw; width: 18rem; height: 18rem; animation-duration: 19s; }

.folio-nav {
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--sans);
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.folio-dot {
  width: 2.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: rgba(17, 19, 24, 0.45);
  text-decoration: none;
  border-left: 1px solid rgba(185, 151, 91, 0.5);
  transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.folio-dot.is-active {
  color: var(--magenta);
  transform: translateX(0.35rem);
  border-color: var(--cyan);
}

.progress-rail {
  width: 1px;
  height: 13rem;
  margin: 0.35rem auto 0;
  background: rgba(215, 220, 228, 0.42);
  overflow: hidden;
}

#progressLine {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--cyan), var(--magenta), var(--brass));
}

.plate {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 8vw, 8rem);
}

.plate::after {
  content: "";
  position: absolute;
  inset: 8vh 5vw;
  border: 1px solid rgba(215, 220, 228, 0.38);
  border-radius: 2rem;
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(120deg, transparent, black 16%, black 82%, transparent);
}

.plate-number,
.eyebrow,
.caption-strip {
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.plate-number {
  position: absolute;
  top: 2rem;
  right: clamp(2rem, 6vw, 5rem);
  color: rgba(17, 19, 24, 0.48);
  font-size: 0.72rem;
}

.eyebrow {
  color: var(--brass);
  font-size: 0.72rem;
  margin: 0 0 1rem;
}

.hero-plate {
  background: linear-gradient(135deg, var(--mercury) 0%, #ffffff 52%, var(--chrome) 100%);
}

.hero-copy {
  max-width: 76rem;
  z-index: 3;
}

.glitch-title {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 13.5rem);
  line-height: 0.82;
  letter-spacing: -0.08em;
  background: linear-gradient(120deg, #F7F8F5 0%, #D7DCE4 30%, #7DF9FF 48%, #111318 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1.5rem 2.4rem rgba(17, 19, 24, 0.18));
  animation: titleResolve 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.glitch-title::before { color: var(--magenta); transform: translate(-0.11em, -0.02em); animation: glitchMagenta 1.05s ease-out both; }
.glitch-title::after { color: var(--cyan); transform: translate(0.09em, 0.025em); animation: glitchCyan 1.05s ease-out both; }

.intro {
  width: min(36rem, 82vw);
  margin: 2rem 0 0 clamp(0.25rem, 5vw, 6rem);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.75;
  color: rgba(17, 19, 24, 0.72);
}

.lens-flare {
  position: absolute;
  border-radius: 999px;
  background:
    radial-gradient(circle, #ffffff 0 4%, var(--cyan) 5% 13%, rgba(125, 249, 255, 0.22) 18%, transparent 58%),
    conic-gradient(from 90deg, transparent, rgba(255, 79, 216, 0.28), transparent, rgba(185, 151, 91, 0.18), transparent);
  box-shadow: 0 0 4rem rgba(125, 249, 255, 0.68), 0 0 10rem rgba(255, 79, 216, 0.16);
  mix-blend-mode: screen;
}

.dot-flare { width: 15rem; height: 15rem; top: 16vh; right: 17vw; animation: flarePulse 5.5s ease-in-out infinite; }

.relic,
.archive-card,
.tile,
.chrome-panel,
.release-mark {
  will-change: transform;
}

.relic {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(247, 248, 245, 0.78), rgba(215, 220, 228, 0.35), rgba(17, 19, 24, 0.16));
  border: 1px solid rgba(215, 220, 228, 0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2rem 4rem rgba(17,19,24,0.13);
  font-family: var(--sans);
  font-weight: 900;
  color: rgba(17, 19, 24, 0.52);
  text-transform: uppercase;
}

.relic-one { width: 10rem; height: 6rem; top: 23vh; left: 11vw; transform: rotate(-12deg); animation: orbitA 17s ease-in-out infinite; }
.relic-two { width: 8rem; height: 8rem; bottom: 18vh; right: 18vw; border-radius: 50%; transform: rotate(10deg); animation: orbitB 21s ease-in-out infinite; }
.relic-three { width: 7rem; height: 11rem; top: 13vh; right: 35vw; transform: rotate(18deg); animation: orbitC 19s ease-in-out infinite; }

.caption-strip {
  position: absolute;
  left: clamp(2rem, 8vw, 8rem);
  bottom: 2rem;
  color: rgba(17, 19, 24, 0.52);
  font-size: 0.68rem;
  border-top: 1px solid rgba(185, 151, 91, 0.6);
  padding-top: 0.75rem;
  width: min(45rem, 78vw);
}

.scan-plate {
  background:
    radial-gradient(circle at 70% 30%, rgba(125, 249, 255, 0.23), transparent 25rem),
    linear-gradient(115deg, var(--chrome), var(--mercury) 55%, #eef1f4);
}

.polish-plate {
  background:
    radial-gradient(circle at 22% 74%, rgba(255, 79, 216, 0.22), transparent 24rem),
    linear-gradient(120deg, var(--graphite), #202330 52%, var(--violet));
  color: var(--mercury);
}

.float-plate {
  background:
    radial-gradient(circle at 76% 48%, rgba(125,249,255,0.2), transparent 23rem),
    linear-gradient(135deg, #f4f5f1, var(--chrome));
}

.release-plate {
  background:
    radial-gradient(circle at 50% 50%, rgba(125,249,255,0.32), transparent 19rem),
    radial-gradient(circle at 50% 50%, rgba(255,79,216,0.14), transparent 32rem),
    var(--graphite);
  color: var(--mercury);
}

.giant-word {
  position: absolute;
  right: 3vw;
  bottom: 2vh;
  font-family: var(--display);
  font-size: clamp(8rem, 25vw, 27rem);
  letter-spacing: -0.08em;
  color: rgba(59, 42, 111, 0.16);
  z-index: 0;
}

.giant-word.violet { color: rgba(255, 79, 216, 0.16); left: 8vw; right: auto; }

.editorial-block {
  position: relative;
  z-index: 5;
  width: min(34rem, 86vw);
}

.left-block { margin-left: clamp(1rem, 8vw, 8rem); }
.right-block { margin-left: auto; margin-right: clamp(1rem, 8vw, 8rem); }
.narrow { width: min(30rem, 82vw); }

.editorial-block h2,
.final-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.editorial-block p:not(.eyebrow),
.final-copy p:not(.eyebrow) {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.75;
  color: currentColor;
  opacity: 0.74;
}

.diagonal-bench {
  position: absolute;
  inset: 12vh 8vw;
  transform: rotate(-13deg);
  pointer-events: none;
}

.bench-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), var(--cyan), transparent);
  box-shadow: 0 0 1.7rem rgba(125,249,255,0.5);
}

.focus-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(125, 249, 255, 0.68);
  box-shadow: inset 0 0 2rem rgba(125,249,255,0.16), 0 0 2.4rem rgba(125,249,255,0.22);
}
.ring-a { width: 19rem; height: 19rem; right: 18%; top: 18%; }
.ring-b { width: 8rem; height: 8rem; right: 8%; top: 45%; border-color: rgba(255,79,216,0.45); }

.archive-card {
  position: absolute;
  right: 12vw;
  bottom: 17vh;
  width: min(23rem, 70vw);
  padding: 1.35rem;
  border: 1px solid rgba(185, 151, 91, 0.6);
  background: rgba(247, 248, 245, 0.54);
  backdrop-filter: blur(16px);
  box-shadow: 0 2rem 4rem rgba(17,19,24,0.14);
}

.archive-card span,
.archive-card em { display: block; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; color: var(--brass); font-style: normal; }
.archive-card strong { display: block; margin: 1.3rem 0; font-family: var(--display); font-size: 2.1rem; letter-spacing: -0.04em; }

.chrome-panel {
  position: absolute;
  left: 10vw;
  top: 22vh;
  width: min(39rem, 72vw);
  height: 53vh;
  border-radius: 3rem;
  background:
    linear-gradient(120deg, #F7F8F5 0%, #D7DCE4 30%, #7DF9FF 48%, #111318 100%);
  opacity: 0.82;
  box-shadow: 0 3rem 8rem rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.5);
  mask-image: radial-gradient(circle at 30% 20%, black, black 68%, transparent 100%);
}

.slice {
  position: absolute;
  left: -3%;
  right: -3%;
  height: 1.8rem;
  background: rgba(255, 79, 216, 0.42);
  mix-blend-mode: screen;
  animation: sliceDrift 4.8s ease-in-out infinite;
}
.slice-a { top: 24%; }
.slice-b { top: 48%; background: rgba(125, 249, 255, 0.42); animation-delay: -1.3s; }
.slice-c { top: 70%; height: 0.8rem; background: rgba(247, 248, 245, 0.5); animation-delay: -2.1s; }
.brass { color: rgba(247,248,245,0.58); }

.artifact-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tile {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(247,248,245,0.7), rgba(215,220,228,0.34), rgba(125,249,255,0.2));
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 2rem 5rem rgba(17,19,24,0.15), inset 0 1px 0 rgba(255,255,255,0.85);
  font-family: var(--display);
  color: rgba(17,19,24,0.62);
}

.tile-a { width: 9rem; height: 13rem; right: 29vw; top: 13vh; transform: rotate(11deg); }
.tile-b { width: 8rem; height: 8rem; right: 13vw; top: 37vh; border-radius: 50%; font-size: 4rem; }
.tile-c { width: 14rem; height: 7rem; right: 22vw; bottom: 14vh; transform: rotate(-8deg); }
.tile-d { width: 6rem; height: 11rem; left: 14vw; bottom: 13vh; transform: rotate(18deg); }

.release-mark {
  position: relative;
  width: min(42rem, 72vw);
  height: min(42rem, 72vw);
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.mark-core {
  width: 13rem;
  height: 13rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 4rem;
  letter-spacing: -0.08em;
  color: transparent;
  background: linear-gradient(120deg, #F7F8F5 0%, #D7DCE4 30%, #7DF9FF 48%, #111318 100%);
  -webkit-background-clip: text;
  background-clip: text;
  box-shadow: inset 0 0 0 1px rgba(215,220,228,0.24), 0 0 7rem rgba(125,249,255,0.28);
}

.orbit {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(125,249,255,0.3);
  border-radius: 46% 54% 52% 48%;
  animation: slowSpin 18s linear infinite;
}
.orbit-two { inset: 22%; border-color: rgba(255,79,216,0.34); animation-duration: 24s; animation-direction: reverse; }
.orbit-three { inset: 4%; border-color: rgba(185,151,91,0.22); animation-duration: 31s; }

.final-copy {
  position: absolute;
  left: clamp(2rem, 8vw, 8rem);
  bottom: clamp(3rem, 8vh, 6rem);
  width: min(38rem, 78vw);
}

.archive-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.1rem;
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  text-decoration: none;
  color: var(--graphite);
  background: linear-gradient(120deg, var(--mercury), var(--chrome), var(--cyan));
  border: 1px solid rgba(215,220,228,0.7);
  border-radius: 999px;
  box-shadow: 0 0 2rem rgba(125,249,255,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.archive-tag:hover { transform: translateY(-0.2rem); box-shadow: 0 0 3rem rgba(255,79,216,0.26); }

.plate.is-visible .editorial-block,
.plate.is-visible .final-copy,
.plate.is-visible .archive-card {
  animation: plateEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes titleResolve {
  0% { filter: blur(16px) drop-shadow(0 2rem 3rem rgba(255,79,216,0.35)); transform: scale(1.015); }
  42% { filter: blur(2px) drop-shadow(0 1.5rem 2rem rgba(125,249,255,0.28)); }
  100% { filter: blur(0) drop-shadow(0 1.5rem 2.4rem rgba(17, 19, 24, 0.18)); transform: scale(1); }
}

@keyframes glitchMagenta { 0%, 64% { opacity: 0.75; clip-path: inset(8% 0 62% 0); } 76% { opacity: 0.35; clip-path: inset(45% 0 34% 0); } 100% { opacity: 0; } }
@keyframes glitchCyan { 0%, 58% { opacity: 0.72; clip-path: inset(58% 0 11% 0); } 74% { opacity: 0.4; clip-path: inset(18% 0 54% 0); } 100% { opacity: 0; } }
@keyframes flarePulse { 0%, 100% { transform: scale(0.86) rotate(0deg); opacity: 0.72; } 50% { transform: scale(1.08) rotate(18deg); opacity: 1; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes orbitA { 0%,100% { translate: 0 0; } 50% { translate: 1.5rem -2rem; } }
@keyframes orbitB { 0%,100% { translate: 0 0; } 50% { translate: -2rem 1rem; } }
@keyframes orbitC { 0%,100% { translate: 0 0; } 50% { translate: 1rem 2rem; } }
@keyframes sliceDrift { 0%,100% { transform: translateX(-2%); opacity: 0.15; } 48% { transform: translateX(8%); opacity: 0.6; } }
@keyframes plateEnter { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .folio-nav { left: 0.4rem; }
  .plate { padding-left: 2.8rem; padding-right: 1.25rem; }
  .plate-number { right: 1rem; }
  .caption-strip { left: 2.8rem; width: calc(100vw - 4rem); }
  .archive-card, .chrome-panel { position: relative; inset: auto; margin-top: 2rem; }
  .final-copy { position: relative; left: auto; bottom: auto; margin-top: 2rem; }
  .release-plate { align-content: center; gap: 1rem; }
}