@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transition:
      opacity 0.7s var(--ease-out),
      transform 0.7s var(--ease-out);
    will-change: opacity, transform;
  }

  .js [data-reveal="up"]    { transform: translateY(44px); }
  .js [data-reveal="down"]  { transform: translateY(-44px); }
  .js [data-reveal="left"]  { transform: translateX(-56px); }
  .js [data-reveal="right"] { transform: translateX(56px); }
  .js [data-reveal="fade"]  { transform: none; }

  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  .js .services__grid > .service-card[data-reveal] {
    transition:
      opacity 0.8s var(--ease-out),
      transform 0.8s var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }

  .js .services__grid > .service-card:nth-child(1) { transition-delay: 0ms,   0ms,   0ms; }
  .js .services__grid > .service-card:nth-child(2) { transition-delay: 110ms, 110ms, 0ms; }
  .js .services__grid > .service-card:nth-child(3) { transition-delay: 220ms, 220ms, 0ms; }
  .js .services__grid > .service-card:nth-child(4) { transition-delay: 140ms, 140ms, 0ms; }
  .js .services__grid > .service-card:nth-child(5) { transition-delay: 250ms, 250ms, 0ms; }
  .js .services__grid > .service-card:nth-child(6) { transition-delay: 360ms, 360ms, 0ms; }

  .js .stats > .stat[data-reveal]:nth-child(1) { transition-delay: 0ms; }
  .js .stats > .stat[data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .js .stats > .stat[data-reveal]:nth-child(3) { transition-delay: 180ms; }
  .js .stats > .stat[data-reveal]:nth-child(4) { transition-delay: 270ms; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  .hero__content > * {
    animation: hero-rise 0.7s var(--ease-out) both;
  }

  .hero__content > .hero__title { animation-delay: 0.05s; }
  .hero__content > .hero__sub   { animation-delay: 0.18s; }
  .hero__content > .hero__cta   { animation-delay: 0.30s; }
  .hero__content > .hero__trust { animation-delay: 0.42s; }

  .sc-ico__check { stroke-dasharray: 14; }
  .service-card:hover .sc-ico__check,
  .service-card:focus-within .sc-ico__check {
    animation: sc-stamp 1.05s var(--ease-out);
  }
  @keyframes sc-stamp {
    from { stroke-dashoffset: 14; }
    to   { stroke-dashoffset: 0; }
  }

  .service-card:hover .sc-ico__perf,
  .service-card:focus-within .sc-ico__perf {
    animation: sc-perf 0.6s linear infinite;
  }
  @keyframes sc-perf {
    to { stroke-dashoffset: -4; }
  }

  .service-card:hover .sc-ico__guard,
  .service-card:focus-within .sc-ico__guard {
    animation: sc-guard 1.8s var(--ease-out) infinite;
  }
  @keyframes sc-guard {
    0%   { transform: scale(0.72); opacity: 0; }
    45%  { opacity: 0.55; }
    100% { transform: scale(1.04); opacity: 0; }
  }

  .service-card:hover .sc-ico__bell,
  .service-card:focus-within .sc-ico__bell {
    animation: sc-bell 0.85s var(--ease-out) infinite;
  }
  @keyframes sc-bell {
    0%, 100% { transform: translateY(0) scaleY(1); }
    25%      { transform: translateY(-2.5px) scaleY(1.06); }
    45%      { transform: translateY(0) scaleY(0.88); }
    65%      { transform: translateY(-1px) scaleY(1); }
    80%      { transform: translateY(0) scaleY(1); }
  }
  .service-card:hover .sc-ico__ding,
  .service-card:focus-within .sc-ico__ding {
    animation: sc-bellring 0.85s var(--ease-out) infinite;
  }
  @keyframes sc-bellring {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    25%      { opacity: 0.9; transform: scale(1); }
    55%      { opacity: 0; transform: scale(1.15); }
  }

  .service-card:hover .sc-ico__fizz,
  .service-card:focus-within .sc-ico__fizz {
    animation: sc-fizz 1.2s var(--ease-out) infinite;
  }
  .service-card:hover .sc-ico__fizz--2,
  .service-card:focus-within .sc-ico__fizz--2 {
    animation-delay: 0.5s;
  }
  @keyframes sc-fizz {
    0%   { opacity: 0; transform: translateY(2.5px); }
    35%  { opacity: 0.9; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-3.5px); }
  }
}