/* Motion layer. Content is visible without JavaScript; motion.js adds
   .motion-ready only when the visitor has not asked for reduced motion.
   Continuous motion (logo strip, workflow tour) always has a pause control. */

@keyframes motion-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }
/* Headline and lead stay opaque so they count as painted immediately (Largest Contentful Paint). */
@keyframes motion-lift { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes motion-step { from { opacity: 0; translate: 0 14px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes motion-draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes motion-marquee { from { translate: 0 0; } to { translate: calc(-50% - var(--marquee-gap, 30px) / 2) 0; } }
@keyframes motion-glow { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: .9; scale: 1.08; } }

/* Scroll reveal: one short, finite entrance per element. */
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; }
.motion-ready [data-reveal].is-visible { animation: motion-rise 680ms var(--motion-ease) var(--reveal-delay, 0ms) both; }

/* Hero entrance on load. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: motion-rise 720ms var(--motion-ease) both; }
  .hero-copy > h1, .hero-copy > .lead, .hero-copy > .hero-tagline, .page-hero > h1, .page-hero > .lead { animation-name: motion-lift; }
  .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .hero-copy > :nth-child(5) { animation-delay: 280ms; }
  .hero-copy > :nth-child(n+6) { animation-delay: 340ms; }
  .hero .system-explorer { animation: motion-rise 820ms var(--motion-ease) 180ms both; }
  .page-hero > * { animation: motion-rise 640ms var(--motion-ease) both; }
  .page-hero > :nth-child(2) { animation-delay: 60ms; }
  .page-hero > :nth-child(3) { animation-delay: 110ms; }
  .page-hero > :nth-child(n+4) { animation-delay: 160ms; }
}

/* Header gains depth once the page scrolls. */
.site-header { transition: box-shadow var(--motion-standard) var(--motion-ease), background var(--motion-standard) var(--motion-ease); }
.site-header.is-scrolled { box-shadow: 0 10px 30px #0f2b4512; }

/* Illustrations come alive when their card enters the view. */
.motion-ready .home-solution.is-visible .drawing-connector { stroke-dasharray: 240; animation: motion-draw 1100ms var(--motion-ease) calc(var(--reveal-delay, 0ms) + 260ms) both; }
.motion-ready .home-solution.is-visible .drawing-dot { animation: motion-fade 400ms var(--motion-ease) calc(var(--reveal-delay, 0ms) + 900ms) both; }
.motion-ready .home-product[data-reveal]:not(.is-visible) .product-stage { opacity: 0; }
.motion-ready .home-product.is-visible .product-stage { animation: motion-step 560ms var(--motion-ease) calc(var(--reveal-delay, 0ms) + 260ms + var(--stage-index, 0) * 140ms) both; }
.motion-ready .process-diagram[data-reveal]:not(.is-visible) .process-diagram-steps li { opacity: 0; }
.motion-ready .process-diagram.is-visible .process-diagram-steps li { animation: motion-step 560ms var(--motion-ease) calc(180ms + var(--step-index, 0) * 120ms) both; }

/* Card hover: a slightly stronger lift and a soft accent glow. */
@media (hover: hover) and (pointer: fine) {
  .solution-card, .product-card { will-change: transform; }
  .solution-card:hover, .product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px #124f7d17; }
  .home-product:hover .product-stage-symbol { transform: translateY(-2px); }
  .button:hover span { transform: translate(2px, -2px); }
}

/* Logo strip marquee. */
.trust-inner { position: relative; }
.logos.is-marquee { --marquee-gap: 56px; display: block; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logos.is-marquee .logos-track { display: flex; align-items: center; gap: var(--marquee-gap); width: max-content; animation: motion-marquee var(--marquee-duration, 38s) linear infinite; }
.logos.is-marquee .logos-track img { flex: none; }
.logos.is-marquee:hover .logos-track, .logos.is-marquee:focus-within .logos-track, .trust-strip.is-paused .logos-track { animation-play-state: paused; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 32px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--muted); font: 650 12px/1.2 var(--font-display); cursor: pointer; transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.motion-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue-dark); }
.motion-toggle:focus-visible { outline: 3px solid var(--focus-orange); outline-offset: 2px; }
.motion-toggle::before { content: ""; width: 8px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.motion-toggle[data-paused="true"]::before { width: 0; height: 0; border-block: 5px solid transparent; border-inline: 8px solid currentColor; border-right: 0; }
.motion-toggle .motion-toggle-play, .motion-toggle[data-paused="true"] .motion-toggle-pause { display: none; }
.motion-toggle[data-paused="true"] .motion-toggle-play { display: inline; }

/* Workflow tour. */
.explorer-heading { position: relative; }
.explorer-autoplay { margin-top: 12px; }
.system-explorer.is-touring .explorer-hub { animation: motion-glow 2.6s ease-in-out infinite; }
.explorer-choice { position: relative; overflow: hidden; }
.system-explorer.is-touring .explorer-choice[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--brand-orange); transform-origin: left; animation: explorer-progress var(--tour-interval, 5600ms) linear both; }
@keyframes explorer-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 640px) {
  .trust-inner .motion-toggle { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal]:not(.is-visible), .motion-ready .home-product[data-reveal]:not(.is-visible) .product-stage,
  .motion-ready .process-diagram[data-reveal]:not(.is-visible) .process-diagram-steps li { opacity: 1; }
  .logos.is-marquee .logos-track, .system-explorer.is-touring .explorer-hub, .system-explorer.is-touring .explorer-choice::after { animation: none; }
}
@media print {
  .motion-ready [data-reveal], .motion-ready .product-stage, .motion-ready .process-diagram-steps li { opacity: 1 !important; animation: none !important; }
  .motion-toggle { display: none; }
}