/* Shared expressive motion. Remove this stylesheet and its companion script to revert. */
@keyframes word-arrive {
  from { opacity: 0; transform: translateY(.75em) rotate(3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes photo-arrive {
  from { opacity: 0; transform: translateY(64px) rotate(var(--photo-angle, 0deg)) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes underline-arrive {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes step-arrive {
  0% { transform: scale(.65); }
  65% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes arrow-forward {
  45% { opacity: 0; transform: translateX(14px); }
  46% { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: none; }
}

.motion-expressive { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.motion-expressive .motion-word { display: inline-block; transform-origin: 0 100%; }
.motion-expressive #hero h1:has(.motion-word) { animation: none; }
.motion-expressive #hero .motion-word {
  animation: word-arrive .85s var(--motion-ease) both;
  animation-delay: calc(60ms + var(--word-order) * 48ms);
}
.motion-expressive #hero :is(.hero-sub, .hero-t-sub, .com-sub) { animation: hero-enter .85s .3s var(--motion-ease) backwards; }
.motion-expressive #hero :is(.hero-ctas, .hero-t-ctas, .hero-cta) { animation: hero-enter .85s .46s var(--motion-ease) backwards; }
/* Give copy and the primary action a little more breathing room. */
.motion-expressive #hero :is(.hero-sub, .hero-t-sub, .com-sub):has(+ :is(.hero-ctas, .hero-t-ctas, .hero-cta)) {
  margin-bottom: clamp(2.5rem, 4vw, 3rem);
}
.motion-expressive #hero .hero-cred:has(+ .hero-ctas) { margin-bottom: 2.5rem; }
.motion-expressive #hero .hero-media { animation: photo-arrive 1.1s .4s var(--motion-ease) backwards; }
.motion-expressive #hero .hero-trust { animation: none; }
.motion-expressive .hero-trust-item {
  animation: hero-enter .75s .6s var(--motion-ease) backwards;
}
.motion-expressive .hero-trust-item:nth-child(2) { animation-delay: .7s; }
.motion-expressive .hero-trust-item:nth-child(3) { animation-delay: .8s; }
.motion-expressive #hero h1 :is(.h-hl, em) { position: relative; }
.motion-expressive #hero h1 :is(.h-hl, em)::after {
  content: ''; position: absolute; left: 2%; right: 2%; bottom: -.08em;
  height: .07em; border-radius: 50%; background: var(--leaf);
  transform-origin: left;
  animation: underline-arrive .8s .75s var(--motion-ease) backwards;
}

.motion-expressive .hero-strip { animation: none; }
.motion-expressive .hero-tile {
  --photo-angle: -3deg;
  animation: photo-arrive 1.1s .54s var(--motion-ease) backwards;
}
.motion-expressive .hero-tile:nth-child(2) { --photo-angle: 2deg; animation-delay: .64s; }
.motion-expressive .hero-tile:nth-child(3) { --photo-angle: -1deg; animation-delay: .44s; }
.motion-expressive .hero-tile:nth-child(4) { --photo-angle: -2deg; animation-delay: .74s; }
.motion-expressive .hero-tile:nth-child(5) { --photo-angle: 3deg; animation-delay: .84s; }
.motion-expressive .hero-tile img {
  transform: translateY(var(--photo-shift, 0px)) scale(var(--photo-scale, 1.12));
}

/* Distinct entrances keep a long page from repeating the same fade. */
.motion-expressive [data-motion-reveal] {
  transition: opacity .6s var(--motion-ease), transform .6s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-expressive [data-motion-pending] { transform: translateY(32px); }
.motion-expressive .ch-item[data-motion-pending] { transform: translateX(38px); }
.motion-expressive :is(.sol-step, .sol-row, .tl-item)[data-motion-pending] { transform: translateX(-28px); }
.motion-expressive .ba-card[data-motion-pending] { transform: translateY(32px) scale(.96); }
.motion-expressive [data-motion-pending][data-motion-static] { transform: none; }
.motion-expressive .sec-head.in .motion-word {
  animation: word-arrive .7s var(--motion-ease) backwards;
  animation-delay: calc(var(--word-order) * 24ms);
}
.motion-expressive :is(.sol-step.in .sol-dot, .tl-item.in .tl-dot) {
  animation: step-arrive .65s .12s var(--motion-ease) backwards;
}
.motion-expressive .prog-panel.active, .motion-expressive .ba-panel.active {
  animation: hero-enter .6s var(--motion-ease) backwards;
}
.motion-expressive .footer-giant.in { animation: hero-enter 1s var(--motion-ease) backwards; }

/* Hover movement is only enabled for a mouse; touch scrolling stays natural. */
@media (hover: hover) and (pointer: fine) {
  .motion-expressive .hero-tile:hover { --photo-scale: 1.17; }
  .motion-expressive .hero-tile img { transition: transform .8s var(--motion-ease); }
  .motion-expressive :is(.ch-item, .sol-body, .testi-card, .work-fact):not([data-motion-reveal]) {
    transition: transform .4s var(--motion-ease);
  }
  .motion-expressive :is(.ch-item, .testi-card):not([data-motion-reveal]):hover { transform: translateY(-6px); }
  .motion-expressive .sol-body:hover { transform: translateX(6px); }
  .motion-expressive .work-fact:hover { transform: translateY(-4px); }
}
.motion-expressive .btn:is(:hover, :focus-visible) .arr {
  animation: arrow-forward .45s var(--motion-ease);
}
.motion-expressive .btn:active { transform: scale(.97); }

@media (max-width: 640px) {
  .motion-expressive [data-motion-pending] { transform: translateY(22px); }
  .motion-expressive .ch-item[data-motion-pending] { transform: translateX(22px); }
  .motion-expressive :is(.sol-step, .sol-row, .tl-item)[data-motion-pending] { transform: translateX(-18px); }
  .motion-expressive [data-motion-pending][data-motion-static] { transform: none; }
}
/* These come last so the enhanced transforms never override the fallbacks. */
html.no-motion .motion-expressive [data-motion-pending] { opacity: 1; transform: none; }
html.no-motion .motion-expressive .hero-tile img { transform: none; }
@media (prefers-reduced-motion: reduce), print {
  .motion-expressive *, .motion-expressive *::before, .motion-expressive *::after {
    animation: none !important; transition: none !important;
  }
  .motion-expressive [data-motion-pending] { opacity: 1; transform: none; }
  .motion-expressive .hero-tile img { transform: none; }
}