/* ==========================================================================
   Global motion — scroll reveal, hover lifts, smooth transitions
   Loaded after main.css · Respects prefers-reduced-motion via .motion-off
   ========================================================================== */

:root {
  --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);
  --duration-reveal: 0.82s;
  --duration-hover: 0.38s;
  --duration-micro: 0.22s;
}

html.motion-on {
  scroll-behavior: smooth;
}

/* --- Scroll reveal (sections) --- */
html.motion-on .section-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(5px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-smooth),
    transform var(--duration-reveal) var(--ease-out-smooth),
    filter var(--duration-reveal) var(--ease-out-smooth);
  will-change: opacity, transform;
}

html.motion-on .section-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

html.motion-on .section-reveal.is-exiting {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  filter: blur(3px);
  transition-duration: 0.58s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html.motion-on .section-reveal.is-visible .section-label,
html.motion-on .section-reveal.is-visible > .container > h2,
html.motion-on .section-reveal.is-visible > h2,
html.motion-on .page-hero.is-visible .section-label,
html.motion-on .page-hero.is-visible h1 {
  animation: motionHeadingIn 0.75s var(--ease-out-smooth) both;
}

html.motion-on .section-reveal.is-visible .section-intro,
html.motion-on .section-reveal.is-visible .page-hero__lead,
html.motion-on .page-hero.is-visible .page-hero__lead {
  animation: motionTextIn 0.85s var(--ease-out-smooth) 0.08s both;
}

@keyframes motionHeadingIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motionTextIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motionRevealChild {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.motion-on .section-reveal.is-visible .stat-card,
html.motion-on .section-reveal.is-visible .coverage-list li,
html.motion-on .section-reveal.is-visible .timeline-item,
html.motion-on .section-reveal.is-visible .value-card,
html.motion-on .section-reveal.is-visible .home-service-row,
html.motion-on .section-reveal.is-visible .hero-stat-item,
html.motion-on .section-reveal.is-visible .hero-highlight,
html.motion-on .section-reveal.is-visible .home-process__step,
html.motion-on .section-reveal.is-visible .pillar-card,
html.motion-on .section-reveal.is-visible .explore-card,
html.motion-on .section-reveal.is-visible .metric-card,
html.motion-on .section-reveal.is-visible .about-mv__card,
html.motion-on .section-reveal.is-visible .contact-page__channel,
html.motion-on .section-reveal.is-visible .accordion__item {
  animation: motionRevealChild 0.68s var(--ease-out-smooth) forwards;
}

html.motion-on .section-reveal.is-visible .explore-card:nth-child(1),
html.motion-on .section-reveal.is-visible .stat-card:nth-child(1),
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(1) { animation-delay: 0.04s; }
html.motion-on .section-reveal.is-visible .explore-card:nth-child(2),
html.motion-on .section-reveal.is-visible .stat-card:nth-child(2),
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(2) { animation-delay: 0.09s; }
html.motion-on .section-reveal.is-visible .explore-card:nth-child(3),
html.motion-on .section-reveal.is-visible .stat-card:nth-child(3),
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(3) { animation-delay: 0.14s; }
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(4) { animation-delay: 0.19s; }
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(5) { animation-delay: 0.24s; }
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(6) { animation-delay: 0.29s; }
html.motion-on .section-reveal.is-visible .home-service-row:nth-child(7) { animation-delay: 0.34s; }

/* --- Hover lifts (pointer devices) --- */
@media (hover: hover) and (pointer: fine) {
  .stat-card,
  .explore-card,
  .home-service-row,
  .coverage-list li,
  .pillar-card,
  .home-process__step,
  .card:not(.card-featured),
  .glass-card,
  .metric-card,
  .about-mv__card,
  .contact-page__channel,
  .services-dock__inner,
  .accordion__item {
    transition:
      transform var(--duration-hover) var(--ease-out-smooth),
      box-shadow var(--duration-hover) var(--ease-out-smooth),
      border-color var(--duration-hover) var(--ease-smooth),
      background var(--duration-hover) var(--ease-smooth);
  }

  .stat-card:hover,
  .explore-card:hover,
  .home-service-row:hover,
  .coverage-list li:hover,
  .pillar-card:hover,
  .home-process__step:hover,
  .card:not(.card-featured):hover,
  .glass-card:hover,
  .metric-card:hover,
  .about-mv__card:hover,
  .services-dock__inner:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  }
}

/* Touch devices: dock is a control surface, not a hover card */
@media (hover: none), (pointer: coarse) {
  .services-dock__inner:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
  }
}

@media (hover: hover) and (pointer: fine) {
  a.contact-page__channel:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--shadow-lift);
  }

  .explore-card:hover .explore-card__icon {
    transform: scale(1.06) rotate(-4deg);
    color: var(--color-primary-mid);
  }

  .explore-card__icon {
    transition:
      transform var(--duration-hover) var(--ease-spring),
      color var(--duration-hover) var(--ease-smooth);
  }

  .btn-primary:hover {
    transform: translate3d(0, -2px, 0);
  }

  .btn-ghost:hover {
    transform: translate3d(0, -2px, 0);
  }

  .nav-link:not(.active):hover {
    transform: translate3d(0, -1px, 0);
  }

  .footer__list .footer__link {
    position: relative;
    transition: color var(--duration-hover) var(--ease-smooth), transform var(--duration-hover) var(--ease-out-smooth);
  }

  .footer__list .footer__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-hover) var(--ease-out-smooth);
  }

  .footer__list .footer__link:hover {
    transform: translate3d(3px, 0, 0);
  }

  .footer__list .footer__link:hover::after {
    transform: scaleX(1);
  }

  .footer__cta {
    transition: box-shadow var(--duration-hover) var(--ease-out-smooth), border-color var(--duration-hover) var(--ease-smooth);
  }

  .footer__cta:hover {
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  }

  .hero__quick-nav a:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  .home-service-row:hover .home-service-row__accent {
    filter: brightness(1.08);
  }

  .home-service-row__accent {
    transition: filter var(--duration-hover) var(--ease-smooth);
  }

  .timeline-item:hover {
    transform: translate3d(4px, 0, 0);
  }

  .timeline-item {
    transition: transform var(--duration-hover) var(--ease-out-smooth);
  }

  .back-to-top:hover {
    transform: translate3d(0, -3px, 0) scale(1.04);
  }
}

/* --- Mobile: lighter reveal, keep readability --- */
@media (max-width: 767px) {
  html.motion-on .section-reveal {
    transform: translate3d(0, 14px, 0);
    filter: none;
  }

  html.motion-on .section-reveal.is-exiting {
    opacity: 0.25;
    transform: translate3d(0, -8px, 0);
  }
}

/* --- Reduced motion --- */
html.motion-off .section-reveal,
html.motion-off .section-reveal.is-exiting {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html.motion-off .section-reveal.is-visible * {
  animation: none !important;
}

html.motion-on .accordion__panel:not([hidden]) {
  animation: motionTextIn 0.5s var(--ease-out-smooth);
}

html.motion-on .disclosure-stack details[open] > :not(summary) {
  animation: motionTextIn 0.45s var(--ease-out-smooth);
}

html.motion-on .nav {
  transition:
    padding var(--duration-hover) var(--ease-smooth),
    box-shadow var(--duration-hover) var(--ease-smooth),
    background var(--duration-hover) var(--ease-smooth);
}

html.motion-on .nav-wrapper.is-scrolled .nav {
  transition-duration: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-on {
    scroll-behavior: auto;
  }
}