/* Everything that moves or glows. Rules (ADR 0003): only transform/opacity animate, no blur, native scroll.
   Scroll-linked effects use CSS timelines where the browser has them (Chrome); js/scroll-fallback.js
   covers the rest (Firefox/Zen): html.no-st. */

/* One continuous backdrop for the whole page: the brand's grey isometric lines (a mask, so the colour is a token). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; background: hsl(var(--foreground)); opacity: .07;
  -webkit-mask: url("../assets/pattern.svg") center / cover no-repeat; mask: url("../assets/pattern.svg") center / cover no-repeat;
}


/* Electric beam on the top edge of every section after the hero: a static hairline, a soft glow under it and a spark that
   runs along it as the section scrolls in (CSS scroll timeline; transform only). Hero: a glow that drifts with the pointer. */
main > section:not(.hero), .foot { position: relative; }
main > section:not(.hero) { background: radial-gradient(50% 18rem at var(--glow-x, 50%) 0, hsl(var(--glow, var(--brand-from)) / var(--glow-a, .08)), transparent 80%); }
main > section:not(.hero)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(var(--beam-a, var(--brand-from)) / .35), hsl(var(--beam-b, var(--brand-to)) / .35), transparent); }
main > section:not(.hero)::after { content: ""; position: absolute; top: -1px; left: 0; width: var(--spark-w, 14rem); height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, hsl(var(--beam-a, var(--brand-from))), hsl(var(--beam-b, var(--brand-to))), transparent); }
/* Footer closes the page: a full-width solid gradient edge (the header rail, finished) and light falling from it. No spark. */
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand-gradient); pointer-events: none; }
.foot::after { content: ""; position: absolute; top: 2px; left: 0; right: 0; height: 2rem; pointer-events: none;
  background: linear-gradient(hsl(var(--brand-from) / .2), transparent); }
.hero::before { content: ""; position: absolute; top: -10%; right: -8%; width: 60rem; height: 36rem; pointer-events: none;
  background: radial-gradient(closest-side, hsl(var(--brand-from) / .13), transparent);
  transform: translate3d(calc(var(--px, 0) * 70px), calc(var(--py, 0) * 50px), 0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@supports (animation-timeline: view()) {
  main > section:not(.hero)::after { opacity: .55; animation: spark linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  @keyframes spark { from { transform: translateX(calc(var(--spark-w, 14rem) * -1)); } to { transform: translateX(100vw); } }
}
@media (prefers-reduced-motion: reduce) { main > section:not(.hero)::after { animation: none; opacity: 0; } .hero::before { transition: none; } }

/* Top-bar rail: brand gradient line that fills as the page scrolls. */
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-gradient); transform-origin: left; }

/* Light stagger, only for items of the same grid (one step apart, no more). */
.path li:nth-child(2), .card:nth-child(2), .values li:nth-child(2) { --i: 1; }
.path li:nth-child(3), .card:nth-child(3), .values li:nth-child(3) { --i: 2; }
.path li:nth-child(4), .values li:nth-child(4) { --i: 3; }

/* Fallback first: JS adds .in (scroll-fallback.js)... */
.js .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);  }
.js .reveal.in { opacity: 1; transform: none; }
.no-st .path::before { transform: scaleX(var(--pp, 0)); }
.no-st .top::after { transform: scaleX(var(--p, 0)); }

/* ...replaced by scroll timelines where supported: they run off the main thread. */
@supports (animation-timeline: view()) {
  .js .reveal { opacity: 1; transform: none; transition: none; animation: reveal linear both; animation-timeline: view();
    animation-range: entry 0% entry 40%; }
  .path::before { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 35% cover 55%; }
  .top::after { animation: rail linear both; animation-timeline: scroll(root); }
  @keyframes reveal { from { opacity: 0; transform: translateY(1.75rem); } }
  .path li::after { transition: none; animation: dot linear both; animation-timeline: view(); animation-range: entry 70% entry 100%; }
  @keyframes dot { from { opacity: 0; } to { opacity: 1; } }
  @keyframes grow-x { from { transform: scaleX(0); } }
  @keyframes grow-y { from { transform: scaleY(0); } }
  @keyframes rail { from { transform: scaleX(0); } }
}

/* Entrance of the hero copy. */
@media (prefers-reduced-motion: no-preference) {
  h1, .actions { animation: rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  .actions { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(1rem); } }
}

/* Hover and cursor effects: only for real pointers. */
@media (hover: hover) {
  .top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .top nav a:hover::after, .top nav a[aria-current]::after { transform: scaleX(1); }
  .card, .js .card.reveal.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .3s; }
  .card:hover { border-color: hsl(var(--brand-from) / .6); }
  .card:hover .s1 { transform: translateY(-14px); } .card:hover .s3 { transform: translateY(14px); }
  .card:hover .c1 { transform: translateX(-10px); } .card:hover .c2 { transform: translateX(10px); }
  .card .ill { transform: translate(calc(var(--ix, 0) * 10px), calc(var(--iy, 0) * 10px)); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .btn-primary::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .4rem; vertical-align: -.15em; background: currentColor; transition: transform .2s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .btn-primary:hover::after { transform: translateX(4px); }
  .path li::before { transition: transform .25s, background-color .25s; }
  .path li:hover::before { transform: scale(1.35); background: hsl(var(--brand-from)); }
  .vi { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .values li:hover .vi { --vi-a: hsl(var(--brand-to)); transform: rotate(8deg) scale(1.08); }
}

@media (max-width: 48rem) {
  .no-st .path::before { transform: scaleY(var(--pp, 0)); }
  @supports (animation-timeline: view()) { .path::before { animation-name: grow-y; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; animation: none; }
  .path::before, .top::after { animation: none; transform: none; }
  .ill g, .card, .card::before { transition: none; }
}