/* ============================================================
   nock_niel — stylesheet
   Design tokens live in :root. Sections are ordered to match
   the page: loader → nav → hero → marquee → content sections →
   footer, followed by the animation utility layers.
   ============================================================ */

/* ============ RESET & TOKENS ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red: #E10600;
  --red-dark: #A30400;
  --black: #0A0A0A;
  --ink: #141414;
  --paper: #F4F1EA;
  --grey: #8A8A8A;
  --display: Impact, "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--black);
  color: var(--paper);
  overflow-x: hidden;
  line-height: 1.5;
}

::selection { background: var(--red); color: #fff; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

section { position: relative; overflow: hidden; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.slash { color: var(--red); }

/* ============ LOADER ============ */
#loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  transition: opacity .5s ease, visibility .5s ease;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-target { width: 84px; height: 84px; position: relative; }
.loader-target span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--paper);
  animation: ringPulse 1.1s ease-out infinite;
}
.loader-target span:nth-child(2) { animation-delay: .18s; border-color: var(--red); }
.loader-target span:nth-child(3) { animation-delay: .36s; }
.loader-target i {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
  background: var(--red); border-radius: 50%;
  transform: translate(-50%, -50%);
}
@keyframes ringPulse {
  0% { transform: scale(.3); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
#loader p {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .35em; font-size: 12px; color: var(--grey);
}

/* loader bow: nock → draw → release cycle, synced with the SMIL string */
.loader-shot { display: flex; align-items: center; gap: 40px; }
.loader-bow { width: 120px; height: 100px; overflow: visible; }
.loader-arrow { animation: nockDraw 1.7s infinite; }
@keyframes nockDraw {
  0%   { transform: translateX(0);      opacity: 1; animation-timing-function: cubic-bezier(.4,0,.6,1); }
  38%  { transform: translateX(-16px);  opacity: 1; }
  46%  { transform: translateX(-16px);  opacity: 1; animation-timing-function: cubic-bezier(.7,0,1,1); }
  54%  { transform: translateX(120px);  opacity: 1; }
  60%  { transform: translateX(120px);  opacity: 0; }
  61%  { transform: translateX(0);      opacity: 0; }
  78%  { transform: translateX(0);      opacity: 1; }
  100% { transform: translateX(0);      opacity: 1; }
}

/* ============ SCROLL PROGRESS ============ */
#progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%;
  background: var(--red); z-index: 900;
}

/* ============ NAV ============ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  transition: background .3s ease, padding .3s ease;
}
nav.scrolled { background: rgba(10,10,10,.92); backdrop-filter: blur(8px); padding: 12px 28px; }
.nav-logo {
  font-family: var(--display); font-size: 20px; letter-spacing: .04em;
  text-decoration: none; text-transform: uppercase;
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  text-decoration: none; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--paper);
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  background: var(--red); color: #fff !important; padding: 10px 18px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: background .2s ease;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--red-dark); }
@media (max-width: 760px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ============ HERO ============ */
#hero {
  min-height: 100svh;
  background:
    radial-gradient(ellipse 90% 60% at 75% 15%, rgba(225,6,0,.16), transparent 60%),
    var(--black);
}
.hero-stage {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 90px;
}
/* scroll journey: hero pins while the bow zooms/rotates between text scenes */
.journey-on #hero { height: 300svh; }
.journey-on .hero-stage {
  height: 100svh; min-height: 0;
  overflow: hidden; will-change: transform;
}
/* touch devices pin via position:sticky (compositor-smooth, no JS lag);
   #hero must not clip for sticky to work — the stage clips instead */
.touch-pin #hero { overflow: visible; }
.touch-pin .hero-stage { position: sticky; top: 0; }
.scene-1 { position: relative; z-index: 2; }
.scene-next { display: none; }
.journey-on .scene-next {
  display: flex; position: absolute; inset: 0; z-index: 2;
  flex-direction: column; justify-content: center; padding-top: 90px;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.journey-on .scene-1 { will-change: transform, opacity; }
.scene-title {
  font-size: clamp(52px, 11vw, 170px); color: var(--paper); line-height: .92;
}
.scene-title .outline { color: transparent; -webkit-text-stroke: 2px var(--paper); font-style: normal; }
.scene-title .red { color: var(--red); font-style: normal; }
.scene-sub { margin-top: 4vh; max-width: 560px; font-size: 17px; color: #cfcabf; }
.scene-sub strong { color: var(--paper); }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 700; color: var(--grey); margin-bottom: 3vh;
}
.hero-kicker::before { content: ""; width: 42px; height: 2px; background: var(--red); }
.hero-title {
  font-size: clamp(64px, 14vw, 220px);
  color: var(--paper);
}
.hero-title em { font-style: normal; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: riseUp .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
}
.hero-title .red { color: var(--red); }
@keyframes riseUp { to { transform: translateY(0); } }

.hero-sub {
  margin-top: 4vh; max-width: 520px; font-size: 17px; color: #cfcabf;
  opacity: 0; animation: fadeIn 1s ease .7s forwards;
}
.hero-sub strong { color: var(--paper); }
.hero-name {
  margin-top: 2vh; font-size: 13px; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 700; color: var(--grey);
  opacity: 0; animation: fadeIn 1s ease .9s forwards;
}
.hero-name b { color: var(--red); }
@keyframes fadeIn { to { opacity: 1; } }

/* ============ HERO BACKGROUND BOW ============ */
.bow-bg {
  position: absolute; top: 50%; left: 50%;
  height: 82vh; aspect-ratio: 460 / 620;
  z-index: 1; pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.bow-drift { width: 100%; height: 100%; animation: bowDrift 16s ease-in-out infinite; }
.bow-art { width: 100%; height: 100%; opacity: .5; animation: bowIn 2.4s cubic-bezier(.16,1,.3,1) .5s both; }
@keyframes bowIn {
  from { opacity: 0; transform: scale(1.35) rotate(6deg); }
  to   { opacity: .5; transform: scale(1) rotate(0deg); }
}
/* sway centers on -8deg: bow tilted forward, stabilizers pointing up */
@keyframes bowDrift {
  0%, 100% { transform: rotate(-10.5deg) translateY(-10px); }
  50%      { transform: rotate(-5.5deg) translateY(10px); }
}
@media (max-width: 900px) {
  .bow-bg { height: 64vh; }
  .bow-art { opacity: .18; }
  .hero-kicker, .hero-sub, .hero-name, .scene-sub {
    text-shadow: 0 1px 3px rgba(10,10,10,.95), 0 4px 20px rgba(10,10,10,.8);
  }
  .hero-sub, .scene-sub { font-size: 16px; line-height: 1.7; color: #ded9cd; }
  .hero-name { font-size: 12px; line-height: 2; }
  .hero-kicker { font-size: 12px; line-height: 1.8; }
}

/* ============ MARQUEE ============ */
.marquee {
  background: var(--red); color: #fff;
  padding: 14px 0; overflow: hidden; white-space: nowrap;
  transform: rotate(-1.2deg) scale(1.02);
  position: relative; z-index: 5;
}
.marquee-track {
  display: inline-block;
  animation: scrollX 22s linear infinite;
  font-family: var(--display); font-size: 22px; letter-spacing: .06em;
  text-transform: uppercase;
}
.marquee-track span { margin: 0 26px; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ============ REVEAL UTILITY ============ */
.reveal {
  opacity: 0; transform: translateY(48px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

/* ============ SECTION HEADINGS ============ */
.sec-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 700; color: var(--red); margin-bottom: 22px;
}
.sec-label::before { content: ""; width: 34px; height: 2px; background: var(--red); }
.sec-title { font-size: clamp(44px, 8vw, 110px); margin-bottom: 30px; }

/* ============ ABOUT ============ */
#about { background: var(--paper); color: var(--ink); padding: 120px 0; }
#about .sec-title .ghost {
  color: transparent; -webkit-text-stroke: 2px var(--ink);
}
.about-grid {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-copy p { margin-bottom: 20px; font-size: 18px; color: #3c3a35; }
.about-copy p strong { color: var(--ink); }
.about-copy .big-quote {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.05;
  color: var(--ink); margin: 34px 0; padding-left: 20px;
  border-left: 6px solid var(--red);
}
.story-photo {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--red);
}

/* ============ STATS ============ */
#stats {
  background: var(--black); padding: 110px 0;
  background-image: linear-gradient(rgba(225,6,0,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(225,6,0,.05) 1px, transparent 1px);
  background-size: 60px 60px;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  border: 1px solid #2a2a2a; padding: 34px 26px;
  background: rgba(20,20,20,.6);
  transition: border-color .3s ease, transform .3s ease;
}
.stat:hover { border-color: var(--red); transform: translateY(-6px); }
.stat .num {
  font-family: var(--display); font-size: clamp(44px, 5.5vw, 72px);
  color: var(--paper); line-height: 1;
}
.stat .num .suffix { color: var(--red); }
.stat .lbl {
  margin-top: 12px; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700; color: var(--grey);
}
.stat.countdown { border-color: var(--red); background: rgba(225,6,0,.08); }

/* ============ JOURNEY / TIMELINE ============ */
#journey { background: var(--ink); padding: 120px 0; }
#journey .sec-title .ghost { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.timeline { position: relative; margin-top: 60px; padding-left: 36px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 3px; background: #2c2c2c;
}
.tl-progress {
  position: absolute; left: 8px; top: 6px; width: 3px; height: 0;
  background: var(--red); z-index: 1;
}
.tl-item { position: relative; padding: 0 0 54px 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -36px; top: 4px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--black); border: 4px solid var(--red);
  transition: border-color .5s ease, box-shadow .5s ease;
}
.tl-item.future::before { border-color: #4a4a4a; }
.tl-item.future.passed::before { border-color: var(--red); }
.tl-item.finale::before {
  background: var(--red); border-color: var(--red);
  box-shadow: 0 0 0 6px rgba(225,6,0,.25);
}
.tl-year {
  font-family: var(--display); color: var(--red); font-size: 15px;
  letter-spacing: .2em; margin-bottom: 6px;
}
.tl-item.future .tl-year { color: #6b6b6b; }
.tl-item h3 { font-size: clamp(26px, 3.6vw, 44px); color: var(--paper); margin-bottom: 8px; }
.tl-item.future h3 { color: #7d7d7d; }
.tl-item.finale h3 { color: var(--red); font-size: clamp(34px, 5vw, 62px); }
.tl-item p { max-width: 560px; color: #a9a49a; font-size: 16px; }
.tl-tag {
  display: inline-block; margin-top: 10px; font-size: 10px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase; color: #fff;
  background: #333; padding: 5px 10px;
}
.tl-item.finale .tl-tag { background: var(--red); }

/* ============ PARTNER ============ */
#partner { background: var(--red); color: #fff; padding: 120px 0; }
#partner .sec-label { color: #fff; }
#partner .sec-label::before { background: #fff; }
#partner .sec-title .ghost { color: transparent; -webkit-text-stroke: 2px #fff; }
.partner-lede { max-width: 640px; font-size: 19px; margin-bottom: 56px; color: #ffd9d7; }
.partner-lede strong { color: #fff; }
.partner-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px;
}
@media (max-width: 860px) { .partner-grid { grid-template-columns: 1fr; } }
.p-card {
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.25);
  padding: 32px 26px; transition: transform .3s ease, background .3s ease;
}
.p-card:hover { transform: translateY(-8px); background: rgba(0,0,0,.34); }
.p-card .p-num {
  font-family: var(--display); font-size: 15px; letter-spacing: .2em;
  color: rgba(255,255,255,.55); margin-bottom: 14px;
}
.p-card h3 { font-size: 26px; margin-bottom: 12px; }
.p-card p { font-size: 15px; color: #ffd9d7; }
.big-cta {
  display: inline-block; text-decoration: none;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: .04em;
  background: var(--black); color: #fff; padding: 22px 44px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: transform .2s ease, background .2s ease;
}
.big-cta:hover { transform: scale(1.04); background: #000; }
.big-cta .slash { color: var(--red); }
.cta-note { margin-top: 16px; font-size: 13px; color: #ffd9d7; letter-spacing: .05em; }

/* ============ SUPPORT ============ */
#support { background: var(--paper); color: var(--ink); padding: 120px 0; }
#support .sec-title .ghost { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.support-lede { max-width: 620px; font-size: 18px; color: #3c3a35; margin-bottom: 54px; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } }
.s-card {
  background: #fff; border: 2px solid var(--ink); padding: 32px 26px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; gap: 14px;
}
.s-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--red); }
.s-card h3 { font-size: 26px; }
.s-card .s-detail { font-size: 15px; color: #55524b; flex: 1; }
.s-card .s-detail b { color: var(--ink); font-size: 17px; }
.s-btn {
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--ink); color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; font-size: 12px;
  padding: 14px 18px; transition: background .2s ease;
}
.s-btn:hover { background: var(--red); }
.qr-img { max-width: 200px; border-radius: 10px; height: auto; }
.support-note { margin-top: 40px; font-size: 14px; color: #7a7568; }

/* ============ FOOTER / CONTACT ============ */
footer { background: var(--black); padding: 110px 0 40px; }
.foot-title {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(52px, 11vw, 170px); line-height: .92;
}
.foot-title a {
  text-decoration: none; color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  transition: color .3s ease;
}
.foot-title a:hover { color: var(--red); -webkit-text-stroke-color: var(--red); }
.foot-row {
  margin-top: 56px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; align-items: center;
}
.foot-links { display: flex; gap: 28px; }
.foot-links a {
  text-decoration: none; font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  transition: color .2s ease;
}
.foot-links a:hover { color: var(--red); }
.foot-fine { font-size: 12px; color: #555; letter-spacing: .05em; }

/* ============================================================
   ANIMATION UTILITY LAYERS (driven by js/main.js)
   ============================================================ */

/* ---- smooth (inertia) scroll: content is translated by JS ---- */
html.smooth-on { scroll-behavior: auto; }
.smooth-on #smoothWrap { position: fixed; inset: 0; overflow: hidden; }
#smoothContent { will-change: transform; }

/* ---- word-mask title reveals ---- */
.st .w-mask {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: .12em; margin-bottom: -.12em;
}
.st .w {
  display: inline-block; transform: translateY(120%);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
}
.st.in .w { transform: translateY(0); }

/* ---- clip reveal (story photo) ---- */
.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(.16,1,.3,1);
}
.clip-reveal.in { clip-path: inset(0 0 0 0); }

/* ---- parallax hooks: JS writes --py / --px per frame ---- */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
.story-photo[data-parallax] { transform: translate3d(0, var(--py, 0px), 0) rotate(1.5deg); }

/* ---- giant section watermarks ---- */
.wm {
  position: absolute; top: 30px; left: -2vw; z-index: 0;
  pointer-events: none; user-select: none;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(140px, 24vw, 380px); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px #808080; opacity: .12;
  transform: translate3d(var(--px, 0px), 0, 0);
}
section > .wrap, footer > .wrap { position: relative; z-index: 1; }

/* ---- custom cursor ---- */
#cursorDot, #cursorRing {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  pointer-events: none; z-index: 1001;
}
#cursorDot { width: 10px; height: 10px; background: var(--red); z-index: 1002; }
#cursorRing {
  width: 40px; height: 40px; border: 1.5px solid rgba(225,6,0,.8);
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
body.link-hover #cursorRing { width: 68px; height: 68px; opacity: .45; }
@media (hover: none), (pointer: coarse) { #cursorDot, #cursorRing { display: none; } }

/* ---- magnetic buttons ---- */
.magnetic { transition: transform .3s cubic-bezier(.16,1,.3,1); will-change: transform; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero-title .line > span { transform: none; }
  .hero-sub, .hero-name { opacity: 1; }
  .bow-art { opacity: .5; }
  .st .w { transform: none !important; }
  .clip-reveal { clip-path: none !important; }
  #cursorDot, #cursorRing { display: none !important; }
  .wm { transform: none !important; }
}