/* Section entrance choreography (sections.js toggles classes, everything here is CSS timing).
   One motion language below the hero: the eyebrow rule sweeps left to right (0.55 s), then label > H2 > lead > link
   (0.15 s apart) slide up out of a mask with a fade (0.45 s each); the section's content groups start at 0.55 s, while the head
   is still landing, and rise with a 70 ms stagger.
   Only transform / opacity / clip-path animate; nothing overshoots.

   Progressive enhancement: nothing below applies unless sections.js has added html.sx-on, and it only adds it
   when motion is allowed. The pre-state is a PAUSED animation (its "from" frame via fill-mode backwards), so
   no underlying style changes and hover transitions on cards are never disturbed. sx-in = play,
   sx-now = already seen / passed (no animation), sx-rst = restart helper used by window.__sections.

   Counters: the number is a registered integer custom property (--n) animated by CSS and printed with counter(); the real
   final text stays in the DOM (.cnt-final, invisible but reserving the width) and is all that exists without JS / with reduced motion.
   Line + nodes (history, financing): the line grows from the left, each node pops as the line reaches it (delays computed in
   sections.js from the same easing curve), the item then rises. */
:root {
  --sx-ease: cubic-bezier(.22, .8, .3, 1);        /* ease-out, no overshoot (same curve as the hero) */
  --sx-ease-rule: cubic-bezier(.4, .15, .45, 1);  /* softer in-out: the rule is still drawing at 0.3 s and lands at 0.55 s */
  --sx-ease-line: cubic-bezier(.65, 0, .35, 1);   /* ease-in-out of the timeline / financing line (sections.js inverts this exact curve) */
}

/* Mask reveal: the element rises by --rise of its own height while the clip edge stays on the original baseline,
   so the text appears to slide up out of a slot. The clip opens slightly at the end so descenders and focus rings are never cut.
   Opacity reaches .6 early so the text is never a faint ghost; the clip-path mask does the visual work. */
@keyframes sx-mask {
  from { opacity: 0; transform: translateY(var(--rise, 100%)); clip-path: inset(0 0 var(--rise, 100%) 0); }
  35%  { opacity: .6; }
  to   { opacity: 1; transform: none; clip-path: inset(-.3em -1em -.3em -1em); }
}
/* Content rise: cards, items, chips, forms (clipping would cut borders and shadows, so fade + rise only) */
@keyframes sx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* Node: fades in as the line reaches it */
@keyframes sx-node {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Eyebrow rule: draws left to right */
@keyframes sx-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.section .eyebrow { font-size: .85rem; font-weight: 600; }   /* eyebrow range is .72-.85rem; sections use the top of it (hero eyebrow is not in .section) */
.section .eyebrow::before, .bg-hero .eyebrow::before { transform-origin: left center; }

/* Counters (built by sections.js; without it the stat is just its text) */
.cnt-live { display: none; }
html.sx-on .cnt { display: grid; justify-items: start; font-variant-numeric: tabular-nums; }
html.sx-on .cnt-final { grid-area: 1 / 1; opacity: 0; pointer-events: none; user-select: none; }   /* real text: keeps the final width, read by AT / search */
html.sx-on .cnt-live { display: block; grid-area: 1 / 1; }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on [data-sx="mask"]         { animation: sx-mask .45s var(--sx-ease) var(--sx-delay, 0s) backwards paused; }
  html.sx-on [data-sx="item"]         { animation: sx-rise .4s var(--sx-ease) var(--sx-delay, 0s) backwards paused; }


  /* Line draw (history, financing): the line sweeps left to right; the ::before hairline is hidden below 1081 px */
  html.sx-on [data-sx="line"]::before { transform-origin: left center; animation: sx-rule var(--sx-ld, 1.4s) var(--sx-ease-line) var(--sx-delay, 0s) backwards paused; }

  @media (min-width: 1081px) {
    /* The node pops as the line reaches it (--sx-g0 = group start, --sx-noff = when the line gets there); the item's
       content (not the li, which carries the node) rises right after (node 0.3 s + stagger 0.06 s per line of content) */
    html.sx-on [data-sx="line"] > li[data-sx] { animation: none; --sx-nd: calc(var(--sx-g0, 0s) + var(--sx-noff, 0s)); }
    html.sx-on [data-sx="line"] > li[data-sx]::before { animation: sx-node .3s var(--sx-ease) var(--sx-nd) backwards paused; }
    html.sx-on [data-sx="line"] > li[data-sx] > * { animation: sx-rise .45s var(--sx-ease) calc(var(--sx-nd) + .3s) backwards paused; }
    html.sx-on [data-sx="line"] > li[data-sx] > :nth-child(2) { animation-delay: calc(var(--sx-nd) + .36s); }
    html.sx-on [data-sx="line"] > li[data-sx] > :nth-child(n+3) { animation-delay: calc(var(--sx-nd) + .42s); }
    html.sx-on [data-sx="line"] > li.sx-in > *, html.sx-on [data-sx="line"] > li[data-sx].sx-in::before { animation-play-state: running; }
    html.sx-on [data-sx="line"] > li.sx-now > *, html.sx-on [data-sx="line"] > li[data-sx].sx-now::before { animation: none; }
  }

  html.sx-on [data-sx].sx-in,
  html.sx-on [data-sx].sx-in::before { animation-play-state: running; }

  /* Already seen, scrolled past, or re-rendered (language switch): fully visible, no animation */
  html.sx-on [data-sx].sx-now,
  html.sx-on [data-sx].sx-now::before { animation: none; }
  html.sx-on [data-sx].sx-rst,
  html.sx-on [data-sx].sx-rst::before { animation: none !important; }
}

/* Below 1081 px the history/financing line is a static vertical spine: show it immediately (it must not be
   gated on the first DOM item, which column-reverse puts at the bottom, or it would appear only after scrolling). */
@media (max-width: 1080px) {
  html.sx-on [data-sx="line"]::before { animation: none; }
}