/* ================================
   Axon Motion Layer
   Premium, calm, non-annoying motion.
   Load after axon-home.css.
================================ */

:root {
  --motion-duration-fast: 220ms;
  --motion-duration-medium: 360ms;
  --motion-duration-base: 560ms;
  --motion-duration-sheen: 720ms;
  --motion-duration-glint: 820ms;
  --motion-duration-slow: 900ms;
  --motion-duration-breath: 4.8s;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-breath: ease-in-out;
}

/* ================================
   Core reveal
   Text fades only. No drifting text.
================================ */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: none;
    transition:
      opacity var(--motion-duration-base) var(--motion-ease-out),
      transform var(--motion-duration-base) var(--motion-ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity;
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .js .reveal.motion-complete {
    will-change: auto;
  }

  /* Disable old scroll drift completely */
  .scroll-drift,
  [data-scroll-drift],
  .js .reveal.scroll-drift,
  .js .reveal.scroll-drift.is-visible {
    transform: none;
  }

  /* ================================
     Visual blocks only get tiny movement
     Text does not move.
  ================================ */

  .js .hero-card.reveal,
  .js .hero-media.reveal,
  .js .split-img.reveal,
  .js .form-wrap.reveal,
  .js .trust-item.reveal,
  .js .pill-card.reveal,
  .js .process-card.reveal,
  .js .office-card.reveal,
  .js .product-card.reveal,
  .js .category-card.reveal,
  .js .testimonial-card.reveal,
  .js .faq.reveal {
    transform: translateY(12px);
    will-change: opacity, transform;
  }

  .js .hero-card.reveal[data-reveal="scale"],
  .js .hero-media.reveal[data-reveal="scale"],
  .js .split-img.reveal[data-reveal="scale"],
  .js .form-wrap.reveal[data-reveal="scale"] {
    transform: translateY(10px) scale(0.992);
  }

  .js .hero-card.reveal.is-visible,
  .js .hero-media.reveal.is-visible,
  .js .split-img.reveal.is-visible,
  .js .form-wrap.reveal.is-visible,
  .js .trust-item.reveal.is-visible,
  .js .pill-card.reveal.is-visible,
  .js .process-card.reveal.is-visible,
  .js .office-card.reveal.is-visible,
  .js .product-card.reveal.is-visible,
  .js .category-card.reveal.is-visible,
  .js .testimonial-card.reveal.is-visible,
  .js .faq.reveal.is-visible {
    transform: none;
  }

  /* ================================
     Hero/media: restrained premium polish
     No automatic shine. No constant movement.
  ================================ */

  .hero-card,
  .hero-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
  }

  .hero-card::after,
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 42%,
      color-mix(in srgb, var(--axon-white) 10%, transparent) 50%,
      transparent 58%,
      transparent 100%
    );
    opacity: 0;
    transform: translateX(-120%);
    transition:
      opacity var(--motion-duration-medium) var(--ease-standard),
      transform var(--motion-duration-glint) var(--ease-standard);
  }

  .hero-card:hover::after,
  .hero-media:hover::after {
    opacity: 1;
    transform: translateX(120%);
  }

  .hero-figure img,
  .category-card img,
  .product-card img,
  .split-img img {
    transition:
      transform var(--motion-duration-slow) var(--motion-ease-out),
      filter var(--motion-duration-slow) var(--motion-ease-out);
  }

  .hero-media:hover .hero-figure img,
  .hero-card:hover .hero-figure img {
    transform: scale(1.018);
    filter: saturate(1.02) contrast(1.01);
  }

  .category-card:hover img,
  .product-card:hover img,
  .split-img:hover img {
    transform: scale(1.025);
    filter: saturate(1.025) contrast(1.01);
  }

  /* ================================
     Cards: tiny lift only
  ================================ */

  .trust-item,
  .pill-card,
  .process-card,
  .office-card,
  .product-card,
  .category-card,
  .testimonial-card,
  .faq,
  .socials a,
  .back-top,
  #whatsapp-button {
    transition:
      transform var(--motion-duration-fast) var(--ease-standard),
      border-color var(--motion-duration-fast) var(--ease-standard),
      background-color var(--motion-duration-fast) var(--ease-standard),
      box-shadow var(--motion-duration-fast) var(--ease-standard),
      color var(--motion-duration-fast) var(--ease-standard);
  }

  .trust-item:hover,
  .pill-card:hover,
  .process-card:hover,
  .office-card:hover,
  .product-card:hover,
  .category-card:hover,
  .testimonial-card:hover {
    transform: translateY(-2px);
  }

  /* ================================
     Buttons: hover-only sheen
  ================================ */

  .btn-primary,
  .btn-accent,
  .site-footer .SIGNUP_FLD_SUBMIT input,
  #whatsapp-button {
    position: relative;
    overflow: hidden;
  }

  .btn-primary::after,
  .btn-accent::after,
  #whatsapp-button::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 43%,
      color-mix(in srgb, var(--axon-white) 20%, transparent) 50%,
      transparent 57%,
      transparent 100%
    );
    transform: translateX(-130%);
    transition: transform var(--motion-duration-sheen) var(--motion-ease-out);
  }

  .btn-primary:hover::after,
  .btn-accent:hover::after,
  #whatsapp-button:hover::after {
    transform: translateX(130%);
  }

  .btn-primary:hover,
  .btn-accent:hover {
    transform: translateY(-1px);
  }

  /* ================================
     Socials: quiet premium ring
  ================================ */

  .socials a {
    position: relative;
  }

  .socials a::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid transparent;
    opacity: 0;
    transform: scale(0.96);
    transition:
      opacity var(--motion-duration-fast) var(--ease-standard),
      transform var(--motion-duration-fast) var(--ease-standard),
      border-color var(--motion-duration-fast) var(--ease-standard);
    pointer-events: none;
  }

  .socials a:hover::after {
    opacity: 1;
    transform: scale(1.04);
    border-color: var(--axon-platinum-line);
  }

  /* ================================
     Top strip dot only
     No moving strip background.
  ================================ */

  .top-strip__message::before {
    animation: axonDotBreath var(--motion-duration-breath) var(--motion-ease-breath) infinite;
  }

  @keyframes axonDotBreath {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.85;
    }

    50% {
      transform: scale(1.1);
      opacity: 1;
    }
  }
}

/* ================================
   Accessibility
================================ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .scroll-drift,
  [data-scroll-drift],
  .js .reveal,
  .js .reveal.is-visible,
  .js .reveal.scroll-drift,
  .js .reveal.scroll-drift.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .hero-figure img,
  .category-card img,
  .product-card img,
  .split-img img,
  .top-strip,
  .top-strip__message::before,
  #whatsapp-button,
  .hero-card::after,
  .hero-media::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .hero-card::after,
  .hero-media::after,
  .btn-primary::after,
  .btn-accent::after,
  #whatsapp-button::after,
  .socials a::after {
    display: none !important;
  }
}