/* Inventico — motion layer (v2). Specs: public/assets/motion/MOTION.md
   Load after css/styles.css. Every animated state is gated on
   prefers-reduced-motion: no-preference, and hidden-until-revealed states also
   require html.js-motion (set in <head>), so content is never hidden without JS. */

:root {
  --motion-base: 200ms;
  --motion-reveal: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --reveal-distance: 40px;
}

/* Counters keep a stable width while digits change. */
[data-count] { font-variant-numeric: tabular-nums; }

/* Duplicate marquee groups exist only for the loop; hide them from AT and when static. */
.marquee__group[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: no-preference) {

  /* 1. Scroll reveal (staggered via data-reveal-group) */
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-motion [data-reveal="fade"] { transform: none; }
  .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; }
  .js-motion [data-reveal="split"] { opacity: 1; transform: none; }

  /* 2. Heading word-blur reveal ([data-split] is split into .word spans by motion.js) */
  .js-motion [data-split] .word { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.35em); transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
  .js-motion [data-split].is-revealed .word { opacity: 1; filter: none; transform: none; }

  /* 3. Infinite marquees */
  .marquee__group[aria-hidden="true"] { display: flex; }
  .marquee__track { animation: marquee var(--marquee-duration, 40s) linear infinite; }
  .marquee--reverse .marquee__track { animation-direction: reverse; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* 4. Floating badges: no idle bobbing (slow looping oscillation is distracting and can cause
     discomfort). They simply arrive with the hero reveal. */

  /* 5. Hover micro-interactions (translate only, no layout shift) */
  a.card .card__link svg, .btn .btn__arrow { transition: transform var(--motion-base) var(--ease-out); }
  a.card:hover .card__link svg, .btn:hover .btn__arrow { transform: translateX(4px); }
  /* Only links react to hover (a.card in styles.css); static tiles stay still so they don't look clickable. */

  /* 6. Tabs: panel cross-fade */
  .js-motion .tabs__panel { animation: panel-in 450ms var(--ease-out); }
  @keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* 7. Hero entrance */
  .js-motion .hero__inner > * { animation: hero-in 900ms var(--ease-out) both; }
  .js-motion .hero__inner > :nth-child(2) { animation-delay: 80ms; }
  .js-motion .hero__inner > :nth-child(3) { animation-delay: 160ms; }
  .js-motion .hero__inner > :nth-child(4) { animation-delay: 240ms; }
  .js-motion .hero__visual { animation: hero-in 1100ms 300ms var(--ease-out) both; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

  /* 8. Parallax target (motion.js sets --parallax) */
  [data-parallax] { transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; }
}

/* Reduced motion: marquees become a static, wrapped row. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { width: auto; }
  .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: var(--space-2); }
  .band { transform: none; }
}