/* ════════════════════════════════════════════════════════════════
   Homepage-pinned copy of the shared motion system (assets/animations.css).
   Datestamped for long-cache busting and loaded ONLY on the homepage,
   where the hero markup differs (.hero-slide-media, .carousel-ready) and
   Ken Burns is gated behind min-width + prefers-reduced-motion here.
   NOT dead duplication: keep shared motion changes (easing, hover gating,
   reveals) mirrored between this file and assets/animations.css.
   ════════════════════════════════════════════════════════════════ */
:root {
  --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.js-anim .rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--anim-ease) var(--rvd, 0ms),
              transform .7s var(--anim-ease) var(--rvd, 0ms);
}
html.js-anim .rv.in { opacity: 1; transform: none; }

html.js-anim .steps::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1) .25s;
}
html.js-anim .steps.in::before { transform: scaleX(1); }
html.js-anim .step .step-num {
  transform: scale(.6);
  transition: transform .6s var(--anim-pop) calc(var(--rvd, 0ms) + 150ms);
}
html.js-anim .step.in .step-num { transform: scale(1); }

@keyframes homepage-kb-in {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
@keyframes homepage-kb-out {
  from { transform: scale(1.09); }
  to { transform: scale(1); }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  html.js-anim .hero.carousel-ready .hero-slide.active .hero-slide-media {
    animation: homepage-kb-in 16s ease-out forwards;
  }
  html.js-anim .hero.carousel-ready .hero-slide:nth-child(even).active .hero-slide-media {
    animation-name: homepage-kb-out;
  }
}

html.js-anim nav.nav-scrolled { box-shadow: 0 8px 30px rgba(13, 43, 69, .18); }

html.js-anim .btn-primary,
html.js-anim .btn-dark,
html.js-anim .btn-outline-dark,
html.js-anim .nav-cta,
html.js-anim .mobile-cta,
html.js-anim .hero-form button[type=submit],
html.js-anim .contact-form button[type=submit] {
  transition: transform .25s var(--anim-pop), background .2s, color .2s;
}
/* Keyboard focus keeps the lift on every device (focus implies intent). */
html.js-anim .btn-primary:focus-visible,
html.js-anim .btn-dark:focus-visible,
html.js-anim .btn-outline-dark:focus-visible,
html.js-anim .nav-cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(13, 43, 69, .25);
}

html.js-anim .serve-cta,
html.js-anim .market-cta-link,
html.js-anim .faq-cta {
  transition: transform .25s var(--anim-pop), color .2s, opacity .2s;
}
html.js-anim .market-cta-link,
html.js-anim .faq-cta { display: inline-block; }

/* Hover lifts only on real pointers — on touch, a tap would leave the
   control stuck in its hovered (lifted, shadowed) state until you tap away. */
@media (hover: hover) and (pointer: fine) {
  html.js-anim .btn-primary:hover,
  html.js-anim .btn-dark:hover,
  html.js-anim .btn-outline-dark:hover,
  html.js-anim .nav-cta:hover,
  html.js-anim .mobile-cta:hover,
  html.js-anim .hero-form button[type=submit]:hover,
  html.js-anim .contact-form button[type=submit]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(13, 43, 69, .25);
  }
  html.js-anim .serve-cta:hover,
  html.js-anim .market-cta-link:hover,
  html.js-anim .faq-cta:hover { transform: translateX(5px); }
}

html.js-anim .sheen { position: relative; overflow: hidden; }
html.js-anim .sheen::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
html.js-anim .sheen.sheen-run::after { animation: homepage-sheen .9s ease .5s 1 both; }
@keyframes homepage-sheen {
  from { transform: translateX(0) skewX(-20deg); }
  to { transform: translateX(440%) skewX(-20deg); }
}

.photo-check .pc-circle,
.photo-check .pc-tick { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js-anim .step .step-num,
  html.js-anim .steps::before { transform: none !important; transition: none !important; }
  html.js-anim .hero-slide-media,
  html.js-anim .sheen::after { animation: none !important; transform: none !important; }
  html.js-anim .btn-primary:hover,
  html.js-anim .btn-dark:hover,
  html.js-anim .btn-outline-dark:hover,
  html.js-anim .nav-cta:hover,
  html.js-anim .mobile-cta:hover,
  html.js-anim .serve-cta:hover,
  html.js-anim .market-cta-link:hover,
  html.js-anim .faq-cta:hover { transform: none; }
}