:root {
  --acid: #bdff1c;
  --green: #3ee10f;
  --forest: #14250a;
  --ink: #091006;
  --cream: #f5f0dc;
  --red: #f0442e;
  --olive: #40551f;
  --line: rgba(9, 16, 6, .22);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --mono: "Courier New", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--acid);
  font-family: var(--mono);
  font-size: 16px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.scroll-progress {
  position: fixed; inset: 0 auto auto 0; z-index: 120; width: calc(var(--scroll, 0) * 100%); height: 5px;
  background: var(--red); box-shadow: 0 0 18px rgba(240,68,46,.75); pointer-events: none;
}
.grain {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: 90px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 72px); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em; }
.brand > span:last-child > span { color: var(--red); }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 2px solid currentColor; border-radius: 50%; transform: rotate(-7deg); font-size: .95rem;
}
.topbar nav { display: flex; gap: clamp(16px, 3vw, 42px); font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.topbar nav a { position: relative; }
.topbar nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.topbar nav a:hover::after, .topbar nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero {
  min-height: 100svh; position: relative; display: grid; grid-template-columns: .88fr 1.12fr;
  padding: 130px clamp(22px, 6vw, 90px) 72px; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(circle at 72% 35%, rgba(255,255,255,.55), transparent 27%),
    linear-gradient(116deg, var(--acid) 0 48%, #9df50b 48% 100%);
  background-size: 130% 130%, 100% 100%;
  animation: acid-breathe 9s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 54vw; aspect-ratio: 1; right: -13vw; bottom: -28vw;
  border: 8vw solid rgba(9,16,6,.055); border-radius: 50%;
}
.hero-copy { align-self: center; z-index: 3; max-width: 670px; }
.eyebrow { margin: 0 0 18px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .88; letter-spacing: -.025em; margin: 0; }
h1 { font-size: clamp(4.6rem, 8.8vw, 10rem); }
h1 em, h2 em { color: var(--red); font-style: normal; }
[data-kinetic] { animation: type-glow 5s ease-in-out 1.3s infinite; }
.word { display: inline-block; white-space: nowrap; }
.glyph {
  display: inline-block; opacity: 0; vertical-align: baseline;
  transform: translateY(.42em) rotate(3deg) scaleY(.8); filter: blur(5px);
  transition: opacity .42s ease, transform .52s cubic-bezier(.2,.8,.2,1), filter .42s ease;
  transition-delay: calc(var(--i) * 12ms);
}
[data-kinetic].visible .glyph { opacity: 1; transform: translateY(0) rotate(0) scaleY(1); filter: none; }
[data-kinetic].visible .word:hover .glyph:nth-child(odd) { transform: translateY(-.045em) rotate(-1deg); }
[data-kinetic].visible .word:hover .glyph:nth-child(even) { transform: translateY(.02em) rotate(1deg); }
.lede { max-width: 590px; margin: 30px 0 34px; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.knit-button {
  --button-bg: #314819; position: relative; min-height: 58px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  color: var(--cream); background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.13) 0 2px, transparent 2px 7px), var(--button-bg);
  border: 3px solid var(--ink); border-radius: 17px 8px 16px 9px; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px rgba(255,255,255,.11);
  font-weight: 700; cursor: pointer; transition: transform .18s, box-shadow .18s; letter-spacing: .04em;
  background-position: 0 0, 0 0, 0 0;
  animation: knit-shift 7s linear infinite;
}
.knit-button::before, .knit-button::after { content: "× × × × × × ×"; position: absolute; left: 10px; right: 10px; overflow: hidden; height: 8px; color: rgba(255,255,255,.42); font-size: 7px; line-height: 8px; letter-spacing: 8px; white-space: nowrap; }
.knit-button::before { top: 2px; } .knit-button::after { bottom: 2px; }
.knit-button.primary { --button-bg: var(--red); }
.knit-button.dark { --button-bg: var(--ink); }
.knit-button:hover, .knit-button:focus-visible { transform: translateY(3px) rotate(-1deg); box-shadow: 0 2px 0 var(--ink), inset 0 0 0 2px rgba(255,255,255,.11); }
.contract { font-size: .72rem; margin-top: 20px; opacity: .72; word-break: break-all; }

.hero-art { min-height: 560px; position: relative; align-self: end; display: flex; align-items: flex-end; justify-content: center; z-index: 2; transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hero-art img { position: relative; z-index: 2; width: min(48vw, 700px); max-height: 78svh; object-fit: contain; object-position: center bottom; filter: saturate(1.08) contrast(1.04) drop-shadow(22px 20px 0 rgba(9,16,6,.18)); animation: frong-breathe 4.4s ease-in-out infinite; transform-origin: 50% 80%; will-change: transform; }
.halo { position: absolute; z-index: 1; width: min(39vw, 590px); aspect-ratio: 1; top: 2%; border: 3px solid rgba(9,16,6,.35); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.12), 0 0 0 31px rgba(9,16,6,.1), 0 0 0 70px rgba(255,255,255,.08); animation: halo-pulse 4.4s ease-in-out infinite; }
.ambient-stitches { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-stitches i { position: absolute; display: block; width: 22px; height: 22px; border: 3px dashed rgba(9,16,6,.22); border-radius: 45% 55% 48% 52%; animation: stitch-float 8s ease-in-out infinite; }
.ambient-stitches i:nth-child(1) { left: 8%; top: 20%; animation-delay: -1s; }
.ambient-stitches i:nth-child(2) { left: 42%; top: 12%; width: 34px; height: 34px; animation-delay: -4s; }
.ambient-stitches i:nth-child(3) { left: 48%; top: 72%; animation-delay: -6s; }
.ambient-stitches i:nth-child(4) { right: 7%; top: 18%; width: 46px; height: 46px; animation-delay: -2s; }
.ambient-stitches i:nth-child(5) { right: 4%; bottom: 8%; animation-delay: -5s; }
.stitch-note { position: absolute; z-index: 4; padding: 8px 11px; background: var(--cream); border: 2px solid var(--ink); font-weight: 700; font-size: .67rem; box-shadow: 4px 4px 0 var(--ink); }
.note-a { left: 4%; top: 28%; transform: rotate(-6deg); } .note-b { right: -2%; bottom: 24%; transform: rotate(5deg); }
.scroll-cue { position: absolute; left: clamp(22px, 6vw, 90px); bottom: 26px; display: flex; align-items: center; gap: 14px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.scroll-cue span { font-size: 1.3rem; color: var(--red); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

.lore-section {
  min-height: 100svh; position: relative; padding: 12vh clamp(22px, 8vw, 130px); display: grid; place-items: center;
  color: var(--cream); background-color: var(--forest); background-image: linear-gradient(90deg, rgba(13,29,7,.94), rgba(20,37,10,.7)), url("frong-lore-bg.png"); background-size: cover; background-position: center;
  overflow: hidden;
}
.section-number { position: absolute; left: 3vw; top: 10vh; color: rgba(245,240,220,.11); font: 22vw/.8 var(--display); transform: translateY(var(--drift, 0px)); }
.lore-card { position: relative; z-index: 2; width: min(900px, 88vw); margin-left: 14vw; padding: clamp(30px, 6vw, 76px); background: rgba(8,16,5,.67); border: 1px solid rgba(245,240,220,.28); backdrop-filter: blur(12px); box-shadow: 18px 18px 0 rgba(189,255,28,.16); }
.lore-card h2, .code-panel h2, .signal-inner h2, .chapter h2, .trail-end h2 { font-size: clamp(3.2rem, 7vw, 7.5rem); }
.lore-card > p:not(.eyebrow) { max-width: 720px; line-height: 1.75; color: rgba(245,240,220,.78); }
.text-link { display: inline-flex; gap: 18px; margin-top: 24px; color: var(--acid); font-weight: 700; border-bottom: 2px solid var(--acid); padding-bottom: 6px; }
.thread-line { position: absolute; left: 10%; top: -5%; bottom: -5%; width: 7px; background: var(--red); transform: rotate(8deg); transform-origin: top; box-shadow: 0 0 30px rgba(240,68,46,.45); animation: thread-sway 5s ease-in-out infinite alternate; }

.code-section { min-height: 86svh; padding: 12vh clamp(22px, 8vw, 130px); display: grid; place-items: center; background: var(--cream); }
.code-panel { width: min(1120px, 100%); border: 3px solid var(--ink); padding: clamp(28px, 6vw, 72px); box-shadow: 14px 14px 0 var(--red); }
.code-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.ca-box { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; border: 3px solid var(--ink); background: white; }
.ca-box code { min-width: 0; padding: 22px; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.ca-box button { padding: 0 30px; color: var(--cream); background: var(--ink); border: 0; cursor: pointer; font-weight: 700; }
.ca-box button:hover { background: var(--red); }
.microcopy { grid-column: 1 / -1; margin: -30px 0 0; font-size: .72rem; opacity: .62; }
.signal-section { color: var(--cream); background: var(--red); overflow: hidden; }
.ticker { display: flex; width: max-content; padding: 16px 0; color: var(--ink); background: var(--acid); border-block: 3px solid var(--ink); font-family: var(--display); font-size: 1.5rem; animation: ticker 18s linear infinite; }
.ticker span { white-space: nowrap; padding-right: 12px; }
@keyframes ticker { to { transform: translateX(-50%); } }
.signal-inner { min-height: 72svh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 80px 22px; }
.signal-inner .knit-button { margin-top: 36px; min-width: 210px; }

footer { min-height: 140px; padding: 35px clamp(22px, 5vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 30px; background: var(--ink); color: var(--cream); font-size: .66rem; letter-spacing: .07em; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; padding: 16px 20px; color: var(--cream); background: var(--ink); border: 2px solid var(--acid); box-shadow: 6px 6px 0 var(--red); font-weight: 700; transform: translateY(130px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.toast.show { transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.hero-art.reveal { transform: translate3d(var(--mx, 0), calc(var(--my, 0px) + 26px), 0); }
.hero-art.reveal.visible { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }

/* Lore page */
.lore-page { background: var(--forest); color: var(--cream); }
.darkbar { color: var(--cream); border-color: rgba(245,240,220,.22); }
.trail-hero { min-height: 100svh; position: relative; display: grid; align-items: center; padding: 130px clamp(22px, 8vw, 130px) 80px; background-image: linear-gradient(90deg, rgba(9,16,6,.92) 0 38%, rgba(9,16,6,.18) 78%), url("frong-hero-bg.png"); background-size: cover; background-position: center, center calc(50% + var(--bg-shift, 0px)); }
.trail-copy { max-width: 880px; position: relative; z-index: 2; }
.trail-copy p:last-child { font-size: 1.15rem; opacity: .8; }
.scroll-cue.light { color: var(--cream); }
.chapters { background: var(--cream); color: var(--ink); padding: 12vh clamp(22px, 8vw, 130px); }
.chapter { max-width: 1050px; margin: 0 auto; padding: 90px 0; display: grid; grid-template-columns: 150px 1fr; gap: 50px; border-bottom: 2px solid var(--ink); }
.chapter > span { font: 8rem/.75 var(--display); color: var(--red); }
.chapter p:last-child { max-width: 720px; line-height: 1.8; }
.trail-end { min-height: 75svh; display: grid; place-content: center; justify-items: center; gap: 28px; text-align: center; padding: 80px 22px; background: var(--acid); color: var(--ink); }
.dark-footer { border-top: 1px solid rgba(245,240,220,.2); }

@keyframes acid-breathe { to { background-position: 70% 40%, 0 0; } }
@keyframes type-glow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: .018em .018em 0 rgba(240,68,46,.2); } }
@keyframes knit-shift { to { background-position: 40px 0, -40px 0, 0 0; } }
@keyframes frong-breathe { 0%, 100% { transform: translateY(9%) rotate(-.35deg) scale(1); } 50% { transform: translateY(7.6%) rotate(.35deg) scale(1.012); } }
@keyframes halo-pulse { 50% { transform: scale(1.045) rotate(3deg); opacity: .68; } }
@keyframes stitch-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-28px) rotate(130deg); } }
@keyframes thread-sway { to { transform: rotate(10deg) translateX(9px); } }

@media (max-width: 900px) {
  .topbar { height: 74px; }
  .topbar nav a:not(:last-child) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 110px; }
  .hero-copy { align-self: start; }
  .hero-art { min-height: 430px; margin-top: -30px; }
  .hero-art img { width: min(82vw, 610px); max-height: 58svh; }
  .halo { width: min(68vw, 500px); }
  .note-a { left: 0; } .note-b { right: 0; }
  .scroll-cue { display: none; }
  .lore-card { margin-left: 0; width: 100%; }
  .code-panel { grid-template-columns: 1fr; }
  .code-panel h2 { font-size: clamp(3.5rem, 12vw, 6rem); }
  footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(4.1rem, 21vw, 6.6rem); }
  .hero { padding-inline: 18px; }
  .hero-art { min-height: 360px; }
  .hero-art img { width: 100vw; }
  .stitch-note { display: none; }
  .knit-button { width: 100%; }
  .lore-section, .code-section { padding-inline: 18px; }
  .lore-card { padding: 28px 20px; box-shadow: 8px 8px 0 rgba(189,255,28,.16); }
  .lore-card h2, .signal-inner h2, .trail-end h2 { font-size: clamp(3.3rem, 17vw, 5rem); }
  .code-panel { padding: 28px 18px; box-shadow: 8px 8px 0 var(--red); }
  .ca-box { grid-template-columns: 1fr; }
  .ca-box button { padding: 16px; }
  .microcopy { margin-top: -24px; }
  .chapter { grid-template-columns: 1fr; gap: 20px; padding: 64px 0; }
  .chapter > span { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}