/* Motion only: keyframes, scroll-reveal states and hover movement.
   No layout and no colour live here — those are in webcontra.css.
   Reveals run only when scripts/motion.js has added .has-motion to <html>,
   so the page is fully visible without the script or with reduced motion. */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reveal-left {
  from { opacity: 0; transform: translateX(-48px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes reveal-right {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes reveal-wipe {
  from { opacity: 1; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes reveal-fan {
  from { opacity: 0; transform: translateY(72px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

.has-motion [data-reveal] {
  opacity: 0;
}
.has-motion [data-reveal].is-inview {
  opacity: 1;
  animation: reveal-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.has-motion [data-reveal="fade"].is-inview { animation-name: reveal-fade; }
.has-motion [data-reveal="left"].is-inview { animation-name: reveal-left; }
.has-motion [data-reveal="right"].is-inview { animation-name: reveal-right; }
.has-motion [data-reveal="scale"].is-inview { animation-name: reveal-scale; }
.has-motion [data-reveal="wipe"].is-inview { animation-name: reveal-wipe; animation-duration: 1.2s; }
.has-motion [data-reveal="fan"].is-inview { animation-name: reveal-fan; animation-duration: 1.1s; }

.has-motion [data-reveal-delay="1"].is-inview { animation-delay: 0.1s; }
.has-motion [data-reveal-delay="2"].is-inview { animation-delay: 0.2s; }
.has-motion [data-reveal-delay="3"].is-inview { animation-delay: 0.3s; }
.has-motion [data-reveal-delay="4"].is-inview { animation-delay: 0.4s; }
.has-motion [data-reveal-delay="5"].is-inview { animation-delay: 0.5s; }
.has-motion [data-reveal-delay="6"].is-inview { animation-delay: 0.6s; }

/* The ticker between the two feature rows. */
.has-motion .marquee-track {
  animation: marquee 36s linear infinite;
}
.has-motion .marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Hover movement that a parent hands to a child. */
.cta:hover .cta-icon { transform: rotate(-45deg); }
.hero-video:hover .hero-video-button { transform: scale(1.08); }
.service-card:hover .service-photo { transform: scale(1.06); }
.testimonial-card:hover .testimonial-photo { transform: scale(1.04); }
.resource-card:hover .resource-image { transform: scale(1.05); }
.resource-card:hover .resource-arrow { transform: translate(4px, -4px); }