/* ============================================================
   KINETIC — a manifesto in seven movements
   Palette: bone paper, ink, acid chartreuse, coral
   Type: Fraunces VF (opsz/wght/SOFT/WONK) · Syne · Space Mono
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-roman-100-900.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-100-900.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: block;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-roman-400-800.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-roman-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-roman-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-italic-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: block;
}

:root {
  --bone: #ede6d8;
  --bone-2: #e4dcc9;
  --ink: #171310;
  --ink-soft: rgba(23, 19, 16, 0.62);
  --ink-ghost: rgba(23, 19, 16, 0.34);
  --acid: #c6f222;
  --coral: #ff4f1f;
  --hairline: rgba(23, 19, 16, 0.16);
  --fraunces: 'Fraunces', Georgia, serif;
  --syne: 'Syne', Futura, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: var(--ink) var(--bone-2); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bone-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 0; }

::selection { background: var(--acid); color: var(--ink); }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--fraunces);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-cursor, body.no-cursor a, body.no-cursor button, body.no-cursor input { cursor: none; }

.grain {
  position: fixed; inset: -60px; z-index: 40; pointer-events: none;
  opacity: 0.055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- cursor ---------- */

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  border-radius: 50%; will-change: transform;
}
.cursor-dot { width: 8px; height: 8px; background: var(--ink); }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid var(--ink);
  transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), border-color .35s;
}
body.cursor-hot .cursor-ring { width: 64px; height: 64px; border-color: var(--coral); }
@media (hover: none), (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display: none !important; } }

/* ---------- grid overlay (press G) ---------- */

.grid-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0;
  padding: 0 4vw; opacity: 0; transition: opacity .4s;
}
.grid-overlay i { border-left: 1px solid rgba(198, 242, 34, 0.55); }
.grid-overlay i:last-child { border-right: 1px solid rgba(198, 242, 34, 0.55); }
body.show-grid .grid-overlay { opacity: 1; }

/* ---------- chrome ---------- */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4vw; mix-blend-mode: difference; color: #e8e8e8;
}
.topbar .mark {
  font-family: var(--syne); font-weight: 800; font-size: 19px;
  letter-spacing: 0.06em; text-decoration: none; color: inherit;
}
.topbar .mark sup { color: inherit; font-size: 11px; }
.topbar nav { display: flex; gap: 24px; }
.topbar nav a {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.topbar nav a:hover { border-color: currentColor; }

.progress-line {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 110;
  background: transparent;
}
.progress-line i { display: block; height: 100%; width: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }

/* ---------- preloader ---------- */

#preloader {
  position: fixed; inset: 0; z-index: 300; background: var(--bone);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
}
#preloader .pct {
  font-family: var(--fraunces); font-size: clamp(5rem, 16vw, 12rem); line-height: 1;
  font-variation-settings: 'opsz' 144, 'wght' 100, 'SOFT' 0, 'WONK' 0;
  font-variant-numeric: tabular-nums;
}
#preloader .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- hero ---------- */

main { position: relative; z-index: 1; }

.hero {
  min-height: 100vh; position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden;
}
.hero .blueprint {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 25% 33.34%;
  opacity: .5;
}
.hero h1 {
  font-family: var(--fraunces); font-weight: 400;
  font-size: clamp(4rem, 17.5vw, 15rem); line-height: 0.9;
  letter-spacing: -0.02em; text-transform: uppercase;
  display: flex; user-select: none;
}
.hero h1 .ch { display: inline-block; will-change: transform, font-variation-settings; }
.hero .aster {
  position: absolute; font-family: var(--fraunces); color: var(--coral);
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1;
  right: 14vw; top: 24vh; will-change: transform;
}
.hero .sub {
  margin-top: 4.5vh; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft);
  text-align: center; padding: 0 20px;
}
.hero .sub b { color: var(--ink); font-weight: 400; background: var(--acid); padding: 2px 8px; }
.hero .movements-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between;
  padding: 16px 4vw; gap: 8px; flex-wrap: wrap;
}
.hero .movements-strip span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-ghost);
}
.hero .movements-strip span b { color: var(--ink-soft); font-weight: 400; }
.hero .scroll-cue { animation: cue-blink 1.6s steps(2) infinite; }
.hero .scroll-cue b { color: var(--coral); }
@keyframes cue-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .hero .scroll-cue { animation: none; } }

/* ---------- movement scaffolding ---------- */

section.movement { position: relative; }
.mv-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mv-flow { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.mv-label {
  position: absolute; top: 3.2rem; left: 4vw; z-index: 5;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 14px;
}
.mv-label::before { content: ''; width: 34px; height: 1px; background: var(--ink); }
.mv-num {
  position: absolute; bottom: 2rem; right: 4vw; z-index: 5;
  font-family: var(--fraunces); font-size: clamp(5rem, 11vw, 9rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--ink-ghost);
  font-variation-settings: 'opsz' 144, 'wght' 300;
  user-select: none;
}
.mv-copy {
  position: absolute; bottom: 3rem; left: 4vw; z-index: 5;
  max-width: 34ch; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55;
  color: var(--ink-soft);
}
.mv-copy b { color: var(--ink); font-weight: 500; }
.mv-word {
  font-weight: 400; line-height: 0.86; text-transform: uppercase;
  letter-spacing: -0.02em; user-select: none; text-align: center;
}

/* 01 INERTIA */
#inertia { height: 230vh; background: var(--bone); }
#inertia .mv-word {
  font-family: var(--fraunces);
  font-size: clamp(5rem, 20vw, 19rem);
  font-variation-settings: 'opsz' 144, 'wght' 900, 'SOFT' 0, 'WONK' 0;
  will-change: transform;
}

/* 02 ELASTICITY */
#elasticity { min-height: 160vh; background: var(--bone); }
#elasticity .mv-flow { min-height: 160vh; }
#elasticity .mv-word {
  font-family: var(--fraunces); font-style: italic;
  font-size: clamp(2.6rem, 9.2vw, 8.6rem);
  font-variation-settings: 'opsz' 144, 'wght' 600;
  display: flex;
}
#elasticity .mv-word .ch { display: inline-block; transform-origin: 50% 100%; will-change: transform; }

/* 03 WONK */
#wonk { height: 260vh; background: var(--ink); color: var(--bone); }
#wonk .mv-label, #wonk .mv-copy { color: rgba(237, 230, 216, 0.72); }
#wonk .mv-copy b { color: var(--bone); }
#wonk .mv-label::before { background: var(--acid); }
#wonk .mv-num { -webkit-text-stroke-color: rgba(237, 230, 216, 0.3); }
#wonk .mv-word {
  font-family: var(--fraunces); text-transform: none;
  font-size: clamp(6rem, 26vw, 24rem);
  color: var(--acid);
  font-variation-settings: 'opsz' 144, 'wght' 100, 'SOFT' 0, 'WONK' 0;
}
#wonk .axis-readout {
  position: absolute; top: 50%; right: 4vw; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(237, 230, 216, 0.75);
  display: grid; gap: 10px; text-align: right;
}
#wonk .axis-readout .val { color: var(--acid); }

/* 04 LIQUID */
#liquid { min-height: 150vh; background: var(--bone); }
#liquid .mv-flow { min-height: 150vh; }
#liquid .mv-word {
  font-family: var(--fraunces); font-style: italic; text-transform: none;
  font-size: clamp(4.4rem, 17vw, 15.5rem);
  font-variation-settings: 'opsz' 144, 'wght' 340, 'SOFT' 100, 'WONK' 0;
  filter: url(#liquify);
  color: var(--ink);
  will-change: filter;
}

/* 05 FRACTURE */
#fracture { height: 240vh; }
#fracture .mv-sticky { background: var(--bone); transition: background-color .6s ease; }
#fracture .mv-sticky.dark { background: var(--ink); }
#fracture .mv-sticky.dark .shard { color: var(--bone); transition: color .6s ease; }
#fracture .shard { transition: color .6s ease; }
#fracture .mv-sticky.dark .mv-label, #fracture .mv-sticky.dark .mv-copy { color: rgba(237, 230, 216, 0.72); }
#fracture .mv-sticky.dark .mv-copy b { color: var(--bone); }
#fracture .mv-sticky.dark .mv-num { -webkit-text-stroke-color: rgba(237, 230, 216, 0.3); }
.mv-label, .mv-copy, .mv-num { transition: color .6s ease, -webkit-text-stroke-color .6s ease; }
#fracture .shards { position: relative; width: 100%; text-align: center; }
#fracture .shard {
  font-family: var(--syne); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.6rem, 14.5vw, 13rem); line-height: 0.92; letter-spacing: 0.01em;
  color: var(--ink); white-space: nowrap;
  will-change: transform;
}
#fracture .shard + .shard { position: absolute; left: 0; right: 0; top: 0; }
#fracture .shard:nth-child(3) { color: var(--coral); }

/* 06 VELOCITY */
#velocity { min-height: 190vh; background: var(--acid); }
#velocity .mv-flow { min-height: 190vh; flex-direction: column; gap: 1.2vh; justify-content: center; }
#velocity .mv-label { color: var(--ink-soft); }
#velocity .row {
  white-space: nowrap; will-change: transform;
  font-family: var(--syne); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.8rem, 8.4vw, 8rem); line-height: 1.02; letter-spacing: 0;
  color: var(--ink);
}
#velocity .row.ghost { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
#velocity .row .sep { color: var(--coral); -webkit-text-stroke: 0; padding: 0 1.6vw; }
#velocity .mv-copy { color: var(--ink-soft); }
#velocity .mv-copy b { color: var(--ink); }

/* 07 REST */
#rest { min-height: 150vh; background: var(--bone); }
#rest .mv-flow { min-height: 150vh; flex-direction: column; gap: 5vh; }
#rest .mv-word {
  font-family: var(--fraunces); text-transform: none; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-variation-settings: 'opsz' 30, 'wght' 300;
  color: var(--ink);
}
#rest .beat {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink);
  will-change: transform;
}
#rest .whisper {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-ghost); opacity: 0;
}

/* ---------- colophon ---------- */

.colophon { background: var(--ink); color: var(--bone); padding: 14vh 4vw 6vh; position: relative; }
.colophon .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(237, 230, 216, 0.55); margin-bottom: 7vh;
  display: flex; align-items: center; gap: 14px;
}
.colophon .lbl::before { content: ''; width: 34px; height: 1px; background: var(--acid); }
.colophon .grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: start; }
.playground .sample {
  font-family: var(--fraunces); font-size: clamp(4rem, 10.5vw, 9.5rem); line-height: 1;
  font-variation-settings: 'opsz' 144, 'wght' 500, 'SOFT' 0, 'WONK' 0;
  margin-bottom: 5vh; display: block; color: var(--bone); border: none; background: none;
  width: 100%; text-align: left; padding: 0;
}
.playground .sliders { display: grid; gap: 26px; max-width: 460px; }
.playground .slider-row { display: grid; gap: 10px; }
.playground label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(237, 230, 216, 0.6);
  display: flex; justify-content: space-between;
}
.playground label output { color: var(--acid); }
.playground input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px;
  background: rgba(237, 230, 216, 0.3); outline: none;
}
.playground input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--acid); cursor: pointer;
  border: 3px solid var(--ink);
}
.playground input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--acid);
  cursor: pointer; border: 3px solid var(--ink);
}
.credits { display: grid; gap: 0; }
.credits .row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid rgba(237, 230, 216, 0.14);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.credits .row span:first-child { color: var(--bone); }
.credits .row span:last-child { color: rgba(237, 230, 216, 0.55); text-align: right; }
.colophon .actions { margin-top: 9vh; display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: 16px 30px; border: 1px solid rgba(237, 230, 216, 0.4);
  color: var(--bone); background: transparent; border-radius: 0;
  transition: all .4s cubic-bezier(.16,1,.3,1);
  display: inline-flex; align-items: center; gap: 10px;
}
.btn:hover, .btn:focus-visible { background: var(--acid); color: var(--ink); border-color: var(--acid); outline: none; }
.btn.hot { background: var(--coral); border-color: var(--coral); color: var(--bone); }
.btn.hot:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.colophon .fine {
  margin-top: 8vh; padding-top: 20px; border-top: 1px solid rgba(237, 230, 216, 0.14);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(237, 230, 216, 0.4);
}

/* ---------- footer marquee ---------- */

.footer-marquee { background: var(--ink); border-top: 1px solid rgba(237,230,216,.14); overflow: hidden; padding: 12px 0; }
.footer-marquee .track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(237, 230, 216, 0.5);
}
.footer-marquee .track span { padding: 0 2.2vw; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .colophon .grid2 { grid-template-columns: 1fr; gap: 8vh; }
  #wonk .axis-readout { top: auto; bottom: 9rem; right: 4vw; transform: none; }
}
@media (max-width: 720px) {
  .mv-copy { max-width: 30ch; bottom: 7.5rem; font-size: .95rem; }
  .mv-num { bottom: 1.2rem; }
  .hero .movements-strip { display: none; }
  .hero .aster { right: 8vw; top: 18vh; }
  #velocity .row { font-size: clamp(2.2rem, 11vw, 4rem); }
  .topbar { padding: 16px 5vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .ch, #inertia .mv-word, #elasticity .ch, #rest .beat { transform: none !important; }
}