/**
 * AxonTech Motion System
 * Premium interaction layer — theme-aligned, GPU-accelerated, no layout shifts.
 * Respects prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --axon-motion-duration: 250ms;
    --axon-motion-ease: ease-in-out;
    --axon-motion-slow: 400ms;
  }

  /* ---- 1. Global smooth scroll ---- */
  html {
    scroll-behavior: smooth;
  }

  /* ---- 2. Button interactions ---- */
  .navbar_9 .btn-primary,
  .btn-axon-primary,
  a.btn-axon-primary,
  .btn-contact-primary,
  .btn.btn-contact-primary,
  .btn-gradient,
  .cdo-btn-primary,
  .cust_btn.hero-cta,
  a.cust_btn.hero-cta,
  button[type="submit"].btn-axon-primary,
  button[type="submit"].btn-contact-primary {
    transition: background-color var(--axon-motion-duration) var(--axon-motion-ease),
                border-color var(--axon-motion-duration) var(--axon-motion-ease),
                color var(--axon-motion-duration) var(--axon-motion-ease),
                transform var(--axon-motion-duration) var(--axon-motion-ease),
                box-shadow var(--axon-motion-duration) var(--axon-motion-ease);
  }

  .navbar_9 .btn-primary:hover,
  .btn-axon-primary:hover,
  a.btn-axon-primary:hover,
  .btn-contact-primary:hover,
  .btn.btn-contact-primary:hover,
  .btn-gradient:hover,
  .cdo-btn-primary:hover,
  .cust_btn.hero-cta:hover,
  a.cust_btn.hero-cta:hover,
  button[type="submit"].btn-axon-primary:hover,
  button[type="submit"].btn-contact-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 75, 134, 0.25);
  }

  .navbar_9 .btn-primary:active,
  .btn-axon-primary:active,
  a.btn-axon-primary:active,
  .btn-contact-primary:active,
  .btn-gradient:active,
  .cdo-btn-primary:active,
  .cust_btn.hero-cta:active,
  a.cust_btn.hero-cta:active,
  button[type="submit"]:active {
    transform: scale(0.98);
  }

  /* ---- 3. Card hover effects ---- */
  .axon-card,
  .enroll-card,
  .enroll-sidecard,
  .enroll-form-card,
  .contact-strip-card,
  .contact-form-card,
  .contact-why-card,
  .cdo-card,
  .cdo-tool-card,
  .cdo-placement-card,
  .cdo-card-glass {
    transition: transform var(--axon-motion-duration) var(--axon-motion-ease),
                box-shadow var(--axon-motion-duration) var(--axon-motion-ease),
                border-color var(--axon-motion-duration) var(--axon-motion-ease);
  }

  .axon-card:hover,
  .enroll-card:hover,
  .enroll-sidecard:hover,
  .enroll-form-card:hover,
  .contact-strip-card:hover,
  .contact-form-card:hover,
  .contact-why-card:hover,
  .cdo-card:hover,
  .cdo-tool-card:hover,
  .cdo-placement-card:hover,
  .cdo-card-glass:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(15, 75, 134, 0.08);
  }

  .cdo-card .cdo-card-icon,
  .cdo-tool-card .cdo-card-icon {
    transition: color var(--axon-motion-duration) var(--axon-motion-ease),
                transform var(--axon-motion-duration) var(--axon-motion-ease);
  }

  .cdo-card:hover .cdo-card-icon,
  .cdo-tool-card:hover .cdo-card-icon {
    color: var(--axon-primary);
    transform: scale(1.05);
  }

  /* ---- 4. Navigation hover transitions ---- */
  .navbar_9 .ubermenu-skin-grey-white .ubermenu-item-level-0 > .ubermenu-target,
  .navbar_9 .ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-text {
    transition: color var(--axon-motion-duration) var(--axon-motion-ease);
  }

  .navbar_9 .ubermenu-skin-grey-white .ubermenu-item-level-0 .ubermenu-submenu .ubermenu-target .ubermenu-target-text {
    transition: color var(--axon-motion-duration) var(--axon-motion-ease);
  }

  /* ---- 5. Section scroll reveal (base state; JS adds .is-visible) ---- */
  .axon-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--axon-motion-slow) var(--axon-motion-ease),
                transform var(--axon-motion-slow) var(--axon-motion-ease);
  }

  .axon-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .axon-reveal .axon-reveal-child {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--axon-motion-slow) var(--axon-motion-ease),
                transform var(--axon-motion-slow) var(--axon-motion-ease);
  }

  .axon-reveal.is-visible .axon-reveal-child {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children via inline style or data-delay; JS applies delay */
  .axon-reveal.is-visible .axon-reveal-child.axon-reveal-delay-1 { transition-delay: 50ms; }
  .axon-reveal.is-visible .axon-reveal-child.axon-reveal-delay-2 { transition-delay: 100ms; }
  .axon-reveal.is-visible .axon-reveal-child.axon-reveal-delay-3 { transition-delay: 150ms; }
  .axon-reveal.is-visible .axon-reveal-child.axon-reveal-delay-4 { transition-delay: 200ms; }
  .axon-reveal.is-visible .axon-reveal-child.axon-reveal-delay-5 { transition-delay: 250ms; }

  /* ---- 6. Icon interactions (social, feature) ---- */
  .footer_22 .social-icon,
  .social_section .social-icon,
  .social-icons .social-icon,
  .mar-desktop-footer .social-icon {
    transition: transform var(--axon-motion-duration) var(--axon-motion-ease),
                opacity var(--axon-motion-duration) var(--axon-motion-ease);
  }

  .footer_22 .social-icon:hover,
  .social_section .social-icon:hover,
  .social-icons .social-icon:hover {
    transform: scale(1.05);
  }

  /* ---- 7. Link hover (theme shift) ---- */
  a.gray.link-text,
  .footer_22 a.link-text,
  .footer_blocks a.link-text,
  .axon-page-banner__breadcrumb a {
    transition: color var(--axon-motion-duration) var(--axon-motion-ease);
  }

  a.gray.link-text:hover,
  .footer_22 a.link-text:hover,
  .footer_blocks a.link-text:hover {
    color: var(--axon-primary);
  }

  /* ---- 8. Focus-visible (accessibility) ---- */
  .btn-axon-primary:focus-visible,
  .btn-contact-primary:focus-visible,
  .navbar_9 .btn-primary:focus-visible,
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--axon-primary);
    outline-offset: 2px;
  }

  .axon-form-group input:focus,
  .axon-form-group select:focus,
  .axon-form-group textarea:focus,
  .contact-form-card input:focus,
  .contact-form-card textarea:focus,
  .contact-form-card select:focus {
    transition: border-color var(--axon-motion-duration) var(--axon-motion-ease),
                box-shadow var(--axon-motion-duration) var(--axon-motion-ease);
  }
}

/* Reduced motion: disable transforms and smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .axon-reveal {
    opacity: 1;
    transform: none;
  }
  .axon-reveal .axon-reveal-child {
    opacity: 1;
    transform: none;
  }
}