/* ============================================================
   ClearLine — Apple-design layer.

   An ADDITIVE stylesheet. It loads after styles.css and overrides only
   motion, material and a few typographic details. It changes no colour:
   every value below resolves to a token already defined in styles.css.

   To remove it: delete this file, delete apple.js, and remove the two
   matching tags from the eight .html files. Nothing else refers to it.

   The rules follow Apple's "Designing Fluid Interfaces" (WWDC 2018) and
   "The Details of UI Typography" (WWDC 2020):
     1. respond on press, not on release
     2. translucent chrome that content scrolls under
     3. a scroll edge effect instead of a hard divider
     4. surfaces that materialise from where they were opened
     5. tracking that changes with size
   ============================================================ */

:root {
  /* Apple parameterises springs as damping + response rather than a
     duration. These are the CSS-side equivalents of the two the JS uses. */
  --apple-response: 340ms;   /* settle time of the standard spring */
  --apple-press: 180ms;      /* release of a press — the press itself is 0ms */
  --apple-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
}

/* ============================================================
   1. Response — feedback on pointer-down, eased on release.

   styles.css moves buttons down 1px over 120ms. Apple's rule is that the
   press is instant and only the release is animated; a transition on the
   way in is the lag the whole principle exists to remove. Scale rather
   than translate, because the button then reads as being pushed into the
   page rather than sliding down it.
   ============================================================ */
.btn {
  transition:
    background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--apple-press) var(--ease-out);
}
.btn:active {
  transform: scale(0.978);
  transition-duration: 0ms;  /* instant on the way in */
}
.btn:disabled:active { transform: none; }

/* Navigation and accordion rows are too wide to scale convincingly, so
   they take the press as a Fog wash instead — the same surface token the
   ghost button already uses. */
.nav__link, .faq__q {
  border-radius: var(--radius-sm);
  transition: background var(--apple-press) var(--ease-out),
              color var(--dur-fast) var(--ease-standard);
}
.nav__link:active, .faq__q:active {
  background: var(--cl-surface-well);
  transition-duration: 0ms;
}
/* The accordion row already spans the full width of its divider, so the
   wash sits flush inside the hairlines. Insetting it with padding and a
   negative margin puts the highlight 10px out of true on one side — the
   kind of misalignment Apple files under craft. */

/* Cards already lift on hover; they gain the matching press. */
.card--interactive {
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--apple-press) var(--ease-out);
}
.card--interactive:active { transform: scale(0.994); transition-duration: 0ms; }

/* ============================================================
   2 + 3. The header as a material.

   styles.css paints the header solid white and draws a 1px rule under it
   once you scroll. Apple builds chrome as a translucent layer that content
   passes beneath, and marks the meeting point with a short blur fade
   rather than a line.

   Everything here is gated behind @supports: where backdrop-filter is
   unavailable the original opaque header and its hairline survive intact.
   ============================================================ */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    /* 78%, not lower: the nav sits on Fog in the hero and the body-text
       token needs its contrast ratio to hold over whatever scrolls under. */
    background: color-mix(in srgb, var(--cl-white) 78%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }

  /* The scroll edge effect: content blurs progressively as it slides under
     the bar. No tint, so the Fog hero keeps its own colour. */
  .site-header.is-scrolled { border-bottom-color: transparent; }
  .site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 22px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-standard);
  }
  .site-header.is-scrolled::after { opacity: 1; }
}

/* ============================================================
   4. The mobile menu as a material that opens from its button.

   "If something disappears one way, we expect it to emerge from where it
   came." The panel scales up out of the toggle in the top-right corner and
   returns along the same path. Blur and scale animate together so it reads
   as a surface arriving, not a rectangle fading in.

   Pure CSS: script.js already toggles .is-open, so this adds no second
   handler. transition-behavior: allow-discrete carries the exit animation
   across the display change; browsers without it simply pop, as before.
   ============================================================ */
@media (max-width: 900px) {
  .nav__links {
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition:
      opacity var(--apple-response) var(--apple-ease-spring),
      transform var(--apple-response) var(--apple-ease-spring),
      backdrop-filter var(--apple-response) var(--apple-ease-spring),
      -webkit-backdrop-filter var(--apple-response) var(--apple-ease-spring),
      display var(--apple-response) allow-discrete;
  }
  .nav__links.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav__links.is-open {
      background: color-mix(in srgb, var(--cl-white) 84%, transparent);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      backdrop-filter: blur(24px) saturate(180%);
    }
  }
  /* The state it animates *from* on the frame it first becomes displayed. */
  @starting-style {
    .nav__links.is-open { opacity: 0; transform: translateY(-10px) scale(0.96); }
  }
}

/* ============================================================
   5. The FAQ panel — driven by a spring in apple.js.

   styles.css animates max-height, which cannot be interrupted cleanly and
   eases against a value the content never actually reaches. The class
   below is added by apple.js, so with scripting off the original
   max-height rules still apply and nothing changes.
   ============================================================ */
.faq__a--spring {
  max-height: none;
  height: 0;
  overflow: hidden;
  transition: none;   /* the spring owns this value, frame by frame */
}
/* The plus rotates on the same curve the panel opens on. */
.faq__q .icon {
  transition: transform var(--apple-response) var(--apple-ease-spring);
}

/* ============================================================
   6. Reveal — the same idea, less travel.

   16px of rise over 600ms reads as a page assembling itself. Apple's
   in-between frames point at the outcome; a short move on a decelerating
   curve does that without announcing itself.
   ============================================================ */
@media (scripting: enabled) {
  .reveal {
    transform: translateY(10px);
    transition: opacity 0.42s var(--ease-out), transform 0.5s var(--apple-ease-spring);
  }
}

/* ============================================================
   7. Typography — optical sizing, and tracking that follows size.

   The display scale already tightens as it grows (-0.025em to -0.03em),
   which is the half of the rule that matters most. This adds the other
   half: small copy opens up very slightly, because letterforms crowd as
   they shrink. Mono labels are untouched — they carry +0.08em already.
   ============================================================ */
body { font-optical-sizing: auto; }
h1, h2, h3, h4, h5,
.h-display, .h-page, .h-section { font-optical-sizing: auto; }

.proof__label,
.facts p,
.case__stat-label,
.roi__big-label,
.roi__disclaimer,
.pipe__s,
.footer-bottom span,
.footer-bottom a { letter-spacing: 0.006em; }

/* ============================================================
   8. De lopende band onder de hero.

   Wit met een haarlijn boven en onder, mono-labels in de gedempte
   rol, en de blauwe stip van het merk als scheidingsteken. Geen
   amber: dat hoort bij het merkteken, en de homepage heeft zijn ene
   accentmoment al bij het eindpunt van de lijn.

   De band staat stil zodra je er met de muis op komt of er met het
   toetsenbord in landt. Beweging die je niet kunt stoppen is geen
   beweging maar ruis — en het zijn leesbare woorden, dus je moet ze
   ook echt kunnen lezen.
   ============================================================ */
.marquee-band {
  background: var(--cl-white);
  border-top: 1px solid var(--cl-border);
  border-bottom: 1px solid var(--cl-border);
  /* boven het lijnmotief, zodat de lijn achter de strook langs loopt
     in plaats van er dwars overheen */
  position: relative;
  z-index: 1;
}
.marquee { overflow: hidden; }
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  /* De woorden verschijnen en verdwijnen in plaats van tegen een rand
     te knallen. */
  .marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: cl-marquee 52s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__row { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.marquee__row li {
  display: inline-flex; align-items: center;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cl-text-muted);
  white-space: nowrap;
}
.marquee__row li::after {
  content: "";
  width: 5px; height: 5px; flex: none;
  margin: 0 30px;
  border-radius: var(--radius-full);
  background: var(--cl-blue-deep);
  opacity: 0.5;
}
/* Twee identieke rijen naast elkaar, dus -50% is precies één rij
   opgeschoven en het beeld op dat moment gelijk aan het beginbeeld.
   Daar zit de naadloze lus in. */
@keyframes cl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Alleen voor schermlezers — de kop die de band benoemt. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   9. Accessibility signals.

   Reduced motion is already handled site-wide in styles.css, which blanks
   every transition duration. The two Apple also asks for — reduced
   transparency and increased contrast — had no handling at all, and every
   translucent surface added above needs them.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--cl-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.is-scrolled { border-bottom-color: var(--cl-border); }
  .site-header::after { display: none; }
  .nav__links.is-open {
    background: var(--cl-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-header {
    background: var(--cl-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--cl-border-strong);
  }
  .site-header::after { display: none; }
  .card { border-color: var(--cl-border-strong); }
  .btn--secondary { border-color: var(--cl-text); }
}

/* Reduced motion means a gentler equivalent, not a dead interface: the
   press wash and the opacity change stay, the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .card--interactive:active { transform: none; }
  .nav__links,
  .nav__links.is-open { transform: none; }
  .reveal { transform: none; }

  /* De band wordt een stilstaande, aflopende lijst. styles.css zet
     alle animatieduur op 0,001ms met !important; zou de animatie hier
     alleen dat overhouden, dan springt de band meteen naar zijn
     eindstand (-50%) en staat de tekst scheef. 'animation: none' haalt
     de naam weg, en zonder naam draait er niets. */
  .marquee__track { animation: none; transform: none; width: auto; }
  .marquee__row { flex-wrap: wrap; }
  .marquee__row:last-child { display: none; }
  .marquee__row li:last-child::after { display: none; }
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}