/* Motion is progressive enhancement: the authored content is always visible. */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }

/* The base hero stylesheet animates without JS; opt in only after motion.js starts. */
.site-header, .hero__title, .hero__description, .hero__actions .button, .hero__art { animation: none; }
.hero__title .motion-char, .motion-word, .motion-star { display: inline-block; }
.motion-word { white-space: nowrap; }
.testimonials__stat strong { font-variant-numeric: tabular-nums; }

@keyframes signature-enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes signature-underline {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
@keyframes button-sheen {
  from { transform: translateX(-180%) skewX(-20deg); }
  to { transform: translateX(430%) skewX(-20deg); }
}
@keyframes answer-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .has-motion .site-header, .has-motion .hero__description, .has-motion .hero__actions .button {
    animation: hero-enter var(--duration-entrance) var(--ease-out) backwards;
  }
  .has-motion .site-header { animation-delay: 60ms; }
  .has-motion .hero__description { animation-delay: 930ms; }
  .has-motion .hero__actions .button:first-child { animation-delay: 1060ms; }
  .has-motion .hero__actions .button:last-child { animation-delay: 1160ms; }
  .has-motion .hero__art { animation: hero-image-enter 1100ms var(--ease-out) backwards; }
  .has-motion .hero__signature { animation: signature-enter 900ms 780ms var(--motion-ease) backwards; }
  .has-motion .hero__signature::after {
    transform-origin: left;
    animation: signature-underline 750ms 1120ms var(--motion-ease) backwards;
  }
  .has-motion .button--primary, .has-motion .simulation-banner__button { position: relative; isolation: isolate; overflow: hidden; }
  .has-motion .button--primary::after, .has-motion .simulation-banner__button::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 32%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(210 176 113 / .25), transparent);
    transform: translateX(-180%) skewX(-20deg);
  }
  .has-motion .button--primary::after { animation: button-sheen 1100ms 1450ms var(--motion-ease) backwards; }
  .has-motion .simulation-banner__panel.is-revealed .simulation-banner__button::after {
    animation: button-sheen 1100ms 750ms var(--motion-ease) backwards;
  }
  .solution-card__art { transition: transform 700ms var(--motion-ease); }
  .solution-card__link, .simulation-banner__button { transition: background-color 220ms ease, border-color 220ms ease, transform 350ms var(--motion-ease); }
  .solution-card__link svg, .simulation-banner__button svg { transition: transform 350ms var(--motion-ease); }
  .solution-card__link:is(:hover, :focus-visible) svg,
  .simulation-banner__button:is(:hover, :focus-visible) svg { transform: translateX(5px); }
  .solution-card__link:active, .simulation-banner__button:active { transform: scale(.97); }
  .faq__item[open] .faq__answer { animation: answer-enter 350ms var(--motion-ease); }
  .connection-dialog[open] { animation: hero-enter 350ms var(--motion-ease); }
  .main-nav.is-open { animation: hero-enter 300ms var(--motion-ease); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .solution-card:is(:hover, :focus-within) .solution-card__art { transform: translateY(-7px) rotate(-2deg) scale(1.025); }
  .solution-card--fgts:is(:hover, :focus-within) .solution-card__art { transform: translateY(-7px) rotate(2deg) scale(1.025); }
  .solution-card__link:hover { transform: translateY(-2px); }
  .solution-card__link:active { transform: scale(.97); }
  .button:hover .button__leading-icon { transform: rotate(-7deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .solution-card__art, .simulation-banner__phone, .faq__art { translate: none !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .solution-card__art, .simulation-banner__phone, .faq__art { translate: none !important; }
}