/* =====================================================================
   site-motion.css — shared "living motion" system
   Loaded last on every page. Pure CSS. All keyframes live here; one
   master prefers-reduced-motion kill-switch at the bottom. Animations
   only touch transform / opacity / box-shadow.
   ===================================================================== */

@keyframes mo-ring-breathe{
  0%,100%{opacity:0;transform:scale(.88)}
  50%{opacity:.5;transform:scale(1)}
}

/* =====================================================================
   TIER 2 — ambient "breathing" ring + hover pop on the light-section
   icon badges. Idle motion is a fading ::after ring (never fights the
   badge's own box-shadow); hover lifts + scales the badge.
   --mo-glow carries each section's accent colour.
   ===================================================================== */
main :is(
  .ab-pillar-ico,
  .ab-value-icon,
  .hp-choose-stat-ico,
  .lx-direct-advantage-icon,
  .sv-az-icon
){
  position:relative;
  --mo-glow:rgba(127,181,66,.5);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
main :is(
  .ab-pillar-ico,
  .ab-value-icon,
  .hp-choose-stat-ico,
  .lx-direct-advantage-icon,
  .sv-az-icon
)::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--mo-glow);
  opacity:0;pointer-events:none;
}
main .hp-choose-stat-ico{--mo-glow:rgba(163,111,24,.55)}
main .ab-value-icon{--mo-glow:rgba(120,170,70,.6)}

/* hover pop — icon-level (robust) + card-level where the wrapper is known */
main :is(
  .ab-pillar-ico,
  .ab-value-icon,
  .hp-choose-stat-ico,
  .lx-direct-advantage-icon,
  .sv-az-icon
):hover,
main .ab-pillars li:hover .ab-pillar-ico,
main .lx-direct-advantage-card:hover .lx-direct-advantage-icon{
  transform:translateY(-3px) scale(1.06);
}

/* =====================================================================
   TIER 3 — site-wide micro-interactions (pure CSS)
   ===================================================================== */

/* 1 — arrow / chevron nudge on link hover */
main :is(
  .hp-svc-more,.hp-proj-cta,.hp-proj-arrow,.ab-story-link,.ct-link,
  .ct-service-link,.hiw-text-link,.sv-text-link,.sv-promise-link,
  .ind-link,.why-link,.hp-managed-detail-link,.hp-motion-link,
  .lx-direct-advantage-cta,.hp-footer-cta-btn,.hp-why-cta
) span[aria-hidden]{
  display:inline-block;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
main :is(
  .hp-svc-more,.hp-proj-cta,.hp-proj-arrow,.ab-story-link,.ct-link,
  .ct-service-link,.hiw-text-link,.sv-text-link,.sv-promise-link,
  .ind-link,.why-link,.hp-managed-detail-link,.hp-motion-link,
  .lx-direct-advantage-cta,.hp-footer-cta-btn,.hp-why-cta
):hover span[aria-hidden]{transform:translateX(4px)}

/* 2 — slow ken-burns zoom on feature imagery */
main :is(
  .hp-proj-card,.ind-feature-media,.hp-partner-image,
  .ab-story-media,.hp-gallery figure,.hp-svc-img
) img{
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
main :is(
  .hp-proj-card,.ind-feature-media,.hp-partner-image,
  .ab-story-media,.hp-gallery figure,.hp-svc-card
):hover img{transform:scale(1.045)}


/* 3 — process-ticker marquee (FAQ "what to expect" strip): seamless loop
   across two identical groups; pauses on hover / focus. */
main .lx-process-ticker-track{
  animation:mo-ticker-scroll 34s linear infinite;
  will-change:transform;
}
main .lx-process-ticker:hover .lx-process-ticker-track,
main .lx-process-ticker:focus-within .lx-process-ticker-track{
  animation-play-state:paused;
}
@keyframes mo-ticker-scroll{to{transform:translateX(-50%)}}

/* =====================================================================
   Reduced-motion
   ===================================================================== */
@media(prefers-reduced-motion:no-preference){
  main :is(
    .ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,
    .lx-direct-advantage-icon,.sv-az-icon
  )::after{animation:mo-ring-breathe 5.4s ease-in-out infinite}
  /* stagger by the icon's row position so a group doesn't pulse in unison */
  main :is(.ab-pillars li,.ab-value-rows article,.hp-choose-stats>div,.lx-direct-advantage-card,.sv-az-system article):nth-child(2) :is(.ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,.lx-direct-advantage-icon,.sv-az-icon)::after{animation-delay:.9s}
  main :is(.ab-pillars li,.ab-value-rows article,.hp-choose-stats>div,.lx-direct-advantage-card,.sv-az-system article):nth-child(3) :is(.ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,.lx-direct-advantage-icon,.sv-az-icon)::after{animation-delay:1.8s}
  main :is(.ab-pillars li,.ab-value-rows article,.hp-choose-stats>div,.lx-direct-advantage-card,.sv-az-system article):nth-child(4) :is(.ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,.lx-direct-advantage-icon,.sv-az-icon)::after{animation-delay:2.7s}
}
@media(prefers-reduced-motion:reduce){
  main :is(
    .ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,
    .lx-direct-advantage-icon,.sv-az-icon
  )::after{animation:none !important;opacity:0 !important}
  main :is(
    .ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,.lx-direct-advantage-icon,.sv-az-icon
  ),
  main :is(.ab-pillar-ico,.ab-value-icon,.hp-choose-stat-ico,.lx-direct-advantage-icon,.sv-az-icon):hover{
    transition:none !important;transform:none !important;
  }
  main :is(
    .hp-svc-more,.hp-proj-cta,.hp-proj-arrow,.ab-story-link,.ct-link,
    .ct-service-link,.hiw-text-link,.sv-text-link,.sv-promise-link,
    .ind-link,.why-link,.hp-managed-detail-link,.hp-motion-link,
    .lx-direct-advantage-cta,.hp-footer-cta-btn,.hp-why-cta
  ) span[aria-hidden],
  main :is(.hp-proj-card,.ind-feature-media,.hp-partner-image,.ab-story-media,.hp-gallery figure,.hp-svc-img) img{
    transition:none !important;
  }
}