/* Beats: the six scroll scenes of the homepage (markup: site-src/pages/index.html, driver: beats.js).
   The plain rules below are the end state of every scene, so the page is complete before GSAP loads.
   html.beats-static (reduced motion, or GSAP not loading) turns the tall sections into a normal page. */
:root { --kobalt-glow: rgba(59, 91, 219, .42); --on-ink-soft: rgba(255, 255, 255, .78); --shadow-on-ink: 0 8px 24px rgba(0, 0, 0, .25); }

/* ScrollTrigger measures after resetting the scroll to the top; with smooth scrolling that reset is animated and every refresh measures wrong */
html:has([data-beat]) { scroll-behavior: auto; }
.beat { position: relative; }
.beat .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 15px/1.25 var(--font-sans); letter-spacing: .01em; color: var(--grafiet); }
.beat .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--kobalt); }
.beat .lead { max-width: 40rem; margin: 0 auto clamp(32px, 6vh, 56px); text-align: center; }
.beat .lead h2 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.03em; }
.beat-icon { display: grid; place-items: center; width: max-content; color: var(--kobalt); }
.beat-icon svg { width: 56px; height: 56px; stroke-width: 1.5; }
@media (min-width: 760px) { .beat-icon svg { width: 96px; height: 96px; } }

/* 1. Hero: open page, headline over a field of dots (three.js canvas), no panel */
.hero.hero--open { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: calc(100svh - var(--nav-h)); padding: 0 var(--gutter) clamp(112px, 20vh, 200px); overflow: hidden; isolation: isolate; }
.hero--open .hero-field { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 68%, transparent 100%); mask-image: linear-gradient(to bottom, black 68%, transparent 100%); }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero--open .hero-title { margin: 0; max-width: 20ch; font-size: clamp(2.75rem, 9vw, 7rem); line-height: .98; letter-spacing: -.035em; font-weight: 600; color: var(--inkt); }
.hero-title .line { display: block; }
.hero-title .w { display: inline-block; }
.hero-title [data-lang]:not([hidden]) .w { animation: hero-in .8s var(--ease-out) backwards; }
.hero-title .brand { color: var(--kobalt); }
.hero--open .hero-sub { margin: clamp(20px, 3.4vh, 32px) 0 0; max-width: 34ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.45; color: var(--grafiet); animation: hero-in .8s var(--ease-out) .65s backwards; }
.hero--open .actions { margin-top: clamp(24px, 4vh, 36px); justify-content: center; animation: hero-in .8s var(--ease-out) .8s backwards; }
.hero-title .line:first-child .w:nth-child(1) { animation-delay: .1s; }
.hero-title .line:first-child .w:nth-child(2) { animation-delay: .16s; }
.hero-title .line:first-child .w:nth-child(3) { animation-delay: .22s; }
.hero-title .line:last-child .w:nth-child(1) { animation-delay: .28s; }
.hero-title .line:last-child .w:nth-child(2) { animation-delay: .34s; }
.hero-title .line:last-child .w:nth-child(3) { animation-delay: .4s; }
.hero-title .line:last-child .w:nth-child(4) { animation-delay: .46s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
.hero-cue { position: absolute; left: 50%; bottom: clamp(18px, 3.5vh, 32px); z-index: 1; width: 32px; height: 56px; margin-left: -16px; color: var(--kobalt); }
.hero-cue::before { content: ""; position: absolute; left: 50%; top: 8px; width: 1px; height: 40px; background: var(--lijn-sterk); }
.hero-cue svg { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin-left: -8px; stroke-width: 1.75; animation: cue-drift 2.4s var(--ease) infinite; }
@keyframes cue-drift { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(32px); opacity: 0; } }
/* Hero lockup (spec 04): the cobalt tick and the wordmark letters. The reveal canvas is a child of the hero, centred, above the dot field
   and under the copy. The tick is the block of uptick-logo-nav-3x.png (x 121 to 127, y 13 to 19 of 218 by 78) as shares of the image
   box. --lw is the lockup width, the canvas is 2.4 times it. The canvas also matches .reveal (the scroll fade) and .hero canvas (opacity
   .55), hence opacity 1 and no transition. */
.hero--open { --lw: 176px; }
@media (min-width: 760px) { .hero--open { --lw: 232px; } }
.hero--open > .reveal { position: absolute; left: 50%; top: 50%; z-index: 0; width: calc(var(--lw) * 2.4); height: calc(var(--lw) * 2.4); transform: translate(-50%, -50%); opacity: 1; transition: none; pointer-events: none; }
.lockup { --tick-x: 57.11%; --tick-y: 21.15%; --tick-w: 3.21%; --tick-h: 8.97%; position: relative; width: var(--lw); margin: 0 0 clamp(20px, 3.4vh, 32px); }
.lockup-word { display: block; width: 100%; height: auto; transition: opacity .4s var(--ease-out); }
.lockup .tick { position: absolute; z-index: 2; left: calc(var(--tick-x) - var(--tick-w) / 2); top: calc(var(--tick-y) - var(--tick-h) / 2); width: var(--tick-w); height: var(--tick-h); border-radius: 2px; background: var(--kobalt); transition: opacity .4s var(--ease-out); }
/* hold: nothing competes with the reveal until the tick has landed (beats.js adds hero-go); the early script in the shell lets go after 6s */
html.hero-wait .hero--open:not(.hero-go) :is(.hero-title .w, .hero-sub, .actions, .lockup-word:not(.is-in), .tick:not(.is-in)) { opacity: 0; animation: none; }
html:not(.hero-wait) .hero--open:not(.hero-go) :is(.hero-title .w, .hero-sub, .actions) { animation-duration: .3s; animation-delay: 0s; }

/* 2. Outcomes: three statements on one sticky stage, 480vh tall (1.6 viewport heights per statement); words light up one by one */
.outcomes { height: 480vh; }
.outcomes .stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
.outcomes .eyebrow { position: absolute; top: clamp(20px, 5vh, 48px); left: 0; right: 0; z-index: 1; justify-content: center; }
.statement { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 4vh, 40px); padding: 0 var(--gutter); text-align: center; opacity: 0; pointer-events: none; }
.statement:nth-of-type(1) { opacity: 1; }
.statement-text { margin: 0; max-width: 14ch; font-size: clamp(2rem, 6.2vw, 4.75rem); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; color: var(--inkt); }

/* 3. Modules: the layers, in beats-home.css since spec 11 */
.card-name { margin: 0; font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
.card-line { margin: 12px 0 0; max-width: 28ch; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.4; text-wrap: balance; }
.tone-nevel { background: var(--nevel); color: var(--inkt); }
.tone-paper { background: var(--papier); color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn); }
.tone-ink { background: var(--ink-fixed); color: var(--paper-fixed); }
.tone-kobalt { background: var(--kobalt); color: var(--paper-fixed); }
.tone-nevel .card-line, .tone-paper .card-line { color: var(--grafiet); }
.tone-ink .card-line, .tone-kobalt .card-line { color: var(--on-ink-soft); }
.tone-ink .beat-icon, .tone-kobalt .beat-icon { color: var(--paper-fixed); }

/* 4. Steps: one cobalt beam through three nodes. Markup ships the end state: beam drawn, nodes lit. */
.steps-beam { padding: clamp(88px, 16vh, 160px) 0 clamp(120px, 20vh, 200px); }
.beam { --node: 64px; position: relative; display: flex; justify-content: space-between; max-width: 56rem; margin: clamp(48px, 9vh, 88px) auto 0; padding-bottom: 48px; }
@media (min-width: 760px) { .beam { --node: 96px; } }
.beam-svg { position: absolute; left: calc(var(--node) / 2); top: calc(var(--node) / 2 - 1px); width: calc(100% - var(--node)); height: 2px; overflow: visible; pointer-events: none; }
.beam-track, .beam-line { fill: none; stroke-width: 2; }
.beam-track { stroke: var(--lijn-zacht); }
.beam-line { stroke: var(--kobalt); }
.beam-head { position: absolute; top: calc(var(--node) / 2 - 5px); left: calc(var(--node) / 2 + (100% - var(--node)) * var(--p, 1)); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--kobalt); box-shadow: 0 0 0 5px var(--kobalt-tint); opacity: 0; }
.node { position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--grafiet); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); }
.node svg { width: 28px; height: 28px; stroke-width: 1.75; }
@media (min-width: 760px) { .node svg { width: 40px; height: 40px; } }
.node.lit { background: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); color: var(--paper-fixed); }
.node-label { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 15px/1.2 var(--font-sans); color: var(--grafiet); transition: color .4s var(--ease); }
.node.lit .node-label { color: var(--inkt); }

/* 5. Questions: the existing accordion, three items */
.faq-beat { padding: clamp(72px, 14vh, 140px) 0 clamp(96px, 16vh, 160px); }
.faq-beat .faq { max-width: 52rem; margin: 0 auto; }
.faq-beat .faq-item button { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }

/* 6. Closing: an ink curtain with a curved edge rises over the page and carries the headline and the button.
   The 140 percent wide ink shape is a pseudo element, so no real element is wider than the viewport. */
.cta-band.cta-band--curtain { height: 200vh; padding: 0; }
.cta-band--curtain .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.curtain { position: absolute; top: 0; left: 0; width: 100%; height: 200%; overflow: hidden; pointer-events: none; transform: translateY(6%); }
.curtain::before { content: ""; position: absolute; top: 0; left: -20%; width: 140%; height: 100%; border-radius: 50% 50% 0 0 / min(40svh, 42vw) min(40svh, 42vw) 0 0; background: radial-gradient(ellipse 36% 16% at 50% 0, var(--kobalt-glow), transparent 100%), var(--ink-fixed); }
.curtain-copy { position: absolute; inset: 12% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 4vh, 40px); padding: 0 var(--gutter); text-align: center; color: var(--paper-fixed); }
.cta-band--curtain .curtain-copy h2 { margin: 0; max-width: 16ch; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.03em; color: var(--paper-fixed); }
/* the button has no shine ring (site.js skips it): a clean white button with a plain soft shadow */
.cta-band--curtain .curtain-copy .btn { border-color: transparent; box-shadow: var(--shadow-on-ink); }

/* Reduced motion: every moving thing shows its end state */
@media (prefers-reduced-motion: reduce) {
  .hero-title [data-lang]:not([hidden]) .w, .hero--open .hero-sub, .hero--open .actions { animation: none; }
  .hero-cue svg { animation: none; opacity: 1; transform: translateY(16px); }
  .lockup-word, .lockup .tick { transition: none; }
  .node, .node-label { transition: none; }
}

/* html.beats-static: no scenes, so no tall sections. Reduced motion, or GSAP did not load. */
.beats-static .hero-field { display: none; }
.beats-static .hero--open::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle, var(--lijn-sterk) 1px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(to bottom, transparent 42%, black 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 42%, black 78%, transparent 100%); }
.beats-static .outcomes { height: auto; padding: clamp(64px, 12vh, 120px) 0; }
.beats-static .outcomes .stage { position: static; display: flex; flex-direction: column; align-items: center; height: auto; gap: clamp(56px, 10vh, 96px); }
.beats-static .outcomes .eyebrow { position: static; }
.beats-static .statement { position: static; opacity: 1; transform: none; }
.beats-static .cta-band--curtain { height: auto; }
.beats-static .cta-band--curtain .stage { position: relative; height: auto; min-height: 80svh; }
.beats-static .curtain { inset: 12% 0 0; height: auto; transform: none; }