/* Motion is decorative. Every chart, number and control remains readable without it. */
:root { --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); }

/* ───────── Hero: catalog cover ───────── */
/* Load choreography runs on `transform`; scroll parallax runs on `translate` (vertical only), so the two compose. */

/* Stack rises as one unit, line by line — never sideways. */
.motion-ready .hero-stack > * { animation: stack-rise 1s var(--ease-expo) both; animation-delay: calc(120ms + var(--s, 0) * 110ms); }
.hero-eyebrow { --s: 0; } .hero-title { --s: 1; } .hero-copy { --s: 2; } .hero-actions { --s: 3; }
@keyframes stack-rise { from { opacity: 1; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* Move the complete official mark together: all four source paths stay visible and aligned. */
.motion-ready .hero-mark-svg { animation: ribbon-in .95s var(--ease-expo) 260ms both; }
@keyframes ribbon-in { from { opacity: 1; transform: translate(-3px, 6px); } to { opacity: 1; transform: none; } }

/* Metallic light sweep through the words: white → sky → brand blue → white. */
.hero-word {
  color: #fff; background-image: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #38bdf8 46%, #1a2e85 50%, #38bdf8 54%, #ffffff 60%, #ffffff 100%);
  background-size: 320% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-word--accent { background-image: linear-gradient(100deg, #38bdf8 0%, #7fd3f5 40%, #ffffff 46%, #1a2e85 50%, #ffffff 54%, #7fd3f5 60%, #38bdf8 100%); }
.motion-ready .hero-word { animation: metal-sweep 9s var(--ease-glide) 1.1s infinite; }
.motion-ready .hero-word--accent { animation-delay: 1.3s; }
@keyframes metal-sweep { 0% { background-position: 100% 0; } 22%, 100% { background-position: 0 0; } }

/* Steel bands extend along the slant from their base, then a specular glint runs down each band. */
.motion-ready .hero-band { animation: band-in 1.4s var(--ease-expo) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes band-in { from { opacity: 0; transform: skewX(var(--slant)) scaleY(.35); } }
.motion-ready .hero-band::after { animation: band-glint 7s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * 260ms); }
@keyframes band-glint {
  0% { opacity: 0; background-position: 0 -40%; }
  4% { opacity: calc(.6 + var(--hero-speed, 0) * .4); }
  30% { opacity: calc(.6 + var(--hero-speed, 0) * .4); background-position: 0 140%; }
  31%, 100% { opacity: 0; background-position: 0 140%; }
}

/* Studio equipment motion (photo slot set to "motion"): steel strip feeding through the line. */
.motion-ready .material-feed { stroke-dasharray: 90 6; animation: material-feed 4s linear infinite; }
.motion-ready .feed-sheen { stroke-dasharray: .12 .88; animation: feed-sheen 3s linear infinite; }
@keyframes material-feed { to { stroke-dashoffset: -192; } }
@keyframes feed-sheen { to { stroke-dashoffset: -1; } }

/* ───────── §01 process rail: scroll-filled signal track ───────── */
.pipeline-visual { --pipeline-fill: 0; }
.pipeline-visual::after {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; pointer-events: none;
  width: calc(var(--pipeline-fill) * 100%);
  background: linear-gradient(90deg, transparent, rgba(186, 236, 255, 0.95), transparent) 0 0 / 140px 100% no-repeat;
}
.motion-ready .pipeline-visual::after { animation: signal-run 2.2s linear infinite; }
@keyframes signal-run { from { background-position: -140px 0; } to { background-position: calc(100% + 140px) 0; } }
.pipeline-visual::before {
  content: ""; position: absolute; z-index: 1; top: -4px; left: calc(var(--pipeline-fill) * 100%);
  width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; pointer-events: none;
  background: var(--signal); box-shadow: 0 0 0 4px rgba(19, 156, 216, 0.16), 0 0 18px 3px rgba(56, 189, 248, 0.55);
  opacity: clamp(0, var(--pipeline-fill) * 25, 1);
}
.process-flow li { position: relative; }
.process-flow li::before {
  content: ""; position: absolute; top: -6px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--hair-strong); box-sizing: border-box;
  transition: background-color 300ms ease, border-color 300ms ease, scale 400ms var(--ease-expo);
}
.process-flow li.is-passed::before { background: var(--signal); border-color: var(--signal); }
.process-flow li.is-active::before { scale: 1.35; }
.motion-ready .process-flow li.is-active::before { animation: node-pulse 1.8s ease-out infinite; }
@keyframes node-pulse { from { box-shadow: 0 0 0 0 rgba(19, 156, 216, 0.5); } to { box-shadow: 0 0 0 10px rgba(19, 156, 216, 0); } }
.process-flow li span { transition: translate 400ms var(--ease-expo); }
.process-flow li.is-active span { translate: 3px 0; }

/* ───────── Scroll reveal: staggered card entrance ───────── */
.motion-ready .reveal-pending { opacity: 0; transform: translate3d(0, 36px, 0) scale(0.985); }
.motion-ready .reveal-pending.is-visible {
  opacity: 1; transform: none;
  transition: opacity 760ms ease, transform 1050ms var(--ease-expo);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

/* Gauges fill on reveal, then a single highlight crosses the filled bar. */
.scale-track i, .temper-track i, .carbon-track i, .strap-bars i { transform-origin: left center; transition: transform 1300ms var(--ease-glide) 250ms; }
.motion-ready .reveal-pending:not(.is-visible) :is(.scale-track i, .temper-track i, .carbon-track i, .strap-bars i) { transform: scaleX(0); }
.tolerance-bar > div > i { position: relative; transform: scaleX(var(--gauge-value, 1)); transform-origin: left center; transition: transform 1200ms var(--ease-glide) 200ms; }
.motion-ready .reveal-pending:not(.is-visible) .tolerance-bar > div > i { transform: scaleX(0); }
:is(.scale-track, .temper-track, .carbon-track, .strap-bars span, .tolerance-bar > div) > i { overflow: hidden; }
:is(.scale-track, .temper-track, .carbon-track, .strap-bars span, .tolerance-bar > div) > i::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
}
.motion-ready .is-visible :is(.scale-track, .temper-track, .carbon-track, .strap-bars span, .tolerance-bar > div) > i::after { animation: gauge-shine 1.1s ease-out 1.35s both; }
@keyframes gauge-shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.motion-ready .window-plot.reveal-pending:not(.is-visible) .zone { opacity: 0; }
.window-plot .zone { transition-delay: calc(var(--z, 0) * 90ms); }
.zone[data-zone="1"] { --z: 1; } .zone[data-zone="2"] { --z: 2; } .zone[data-zone="3"] { --z: 3; } .zone[data-zone="4"] { --z: 4; }
.motion-ready .reveal-pending .temper-row:nth-child(3) i, .motion-ready .reveal-pending .strap-bars div:nth-child(2) i { transition-delay: 330ms; }
.motion-ready .reveal-pending .temper-row:nth-child(4) i, .motion-ready .reveal-pending .strap-bars div:nth-child(3) i { transition-delay: 410ms; }
.motion-ready .reveal-pending .temper-row:nth-child(5) i, .motion-ready .reveal-pending .strap-bars div:nth-child(4) i { transition-delay: 490ms; }
.motion-ready .reveal-pending .temper-row:nth-child(6) i, .motion-ready .reveal-pending .strap-bars div:nth-child(5) i { transition-delay: 570ms; }

/* Pause states: off-screen, user toggle, hidden tab */
.ambient-paused *, .ambient-paused *::before, .ambient-paused *::after,
.user-motion-paused *, .user-motion-paused *::before, .user-motion-paused *::after,
.page-paused *, .page-paused *::before, .page-paused *::after {
  animation-play-state: paused !important;
}
/* A hidden tab may pause before the first animation tick. Show the finished cover immediately. */
.page-paused :is(.hero-stack > *, .hero-mark-svg, .hero-band) { animation: none !important; opacity: 1 !important; }

/* Reduced motion: no kinetic transforms, no ambient loops, content shown immediately. */
.reduced-motion :is(.hero-stack, .hero-stack > *, .hero-mark-svg, .mark-layer, .hero-word, .hero-band, .material-feed, .feed-sheen) { animation: none !important; transform: none !important; translate: none !important; opacity: 1; }
.reduced-motion .hero-band { transform: skewX(var(--slant)) !important; }
.reduced-motion .hero-band::after { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-stack, .hero-band { translate: none !important; }
  .hero-stack { opacity: 1 !important; }
}