/* ===== V60 - Motion / fluidez visual ===== */

:root {
  --motion-duration: 680ms;
  --motion-duration-fast: 280ms;
  --motion-distance: 30px;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* O conteúdo permanece normal se o JavaScript não inicializar. */
.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-reveal.motion-from-left {
  transform: translate3d(calc(var(--motion-distance) * -1), 0, 0);
}

.motion-ready .motion-reveal.motion-from-right {
  transform: translate3d(var(--motion-distance), 0, 0);
}

.motion-ready .motion-reveal.motion-scale {
  transform: translate3d(0, 18px, 0) scale(.975);
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Hero: sequência suave logo na abertura. */
.motion-ready .hero .motion-reveal {
  --motion-duration: 760ms;
}

/* Cabeçalho ganha profundidade sem alterar dimensões/layout. */
.site-header {
  position: relative;
  z-index: 50;
  transition:
    box-shadow 300ms ease,
    background-color 300ms ease;
}

.site-header.motion-scrolled {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

/* Microinterações: apenas em dispositivos com hover real. */
@media (hover: hover) and (pointer: fine) {
  .quote-card,
  .client-card,
  .product-card,
  .plan-asset img,
  .products-cta img,
  .plans-cta-original img,
  .hero-cta img,
  .hero-cta-mobile img,
  .header-cta img,
  .form-button-image img,
  .carousel-arrow img,
  .text-link img {
    transition:
      transform var(--motion-duration-fast) var(--motion-ease),
      box-shadow var(--motion-duration-fast) ease,
      filter var(--motion-duration-fast) ease;
  }

  .quote-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .11);
  }

  .product-card:hover {
    transform: translateY(-5px) scale(1.012);
  }

  .client-card:hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: 0 17px 32px rgba(0, 0, 0, .17);
  }

  .plan-asset:hover img {
    transform: translateY(-7px) scale(1.018);
    filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .16));
  }

  .products-cta:hover img,
  .plans-cta-original a:hover img,
  .hero-cta:hover img,
  .hero-cta-mobile:hover img,
  .header-cta:hover img,
  .form-button-image:hover img {
    transform: translateY(-3px) scale(1.012);
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .12));
  }

  .carousel-arrow:hover img {
    transform: scale(1.13);
  }

  .text-link:hover img {
    transform: translateX(4px);
  }
}

/* Flutuação quase imperceptível do mockup principal. */
@media (min-width: 768px) {
  .motion-ready .hero-devices.is-visible {
    animation: motion-device-float 5.8s ease-in-out 1.1s infinite;
  }
}

@keyframes motion-device-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

/* Mobile: deslocamentos menores para manter a navegação direta. */
@media (max-width: 767px) {
  :root {
    --motion-duration: 560ms;
    --motion-distance: 20px;
  }

  .motion-ready .motion-reveal.motion-scale {
    transform: translate3d(0, 12px, 0) scale(.985);
  }

  .motion-ready .motion-reveal.motion-scale.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Acessibilidade: respeita usuários que preferem menos movimento. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal.motion-from-left,
  .motion-ready .motion-reveal.motion-from-right,
  .motion-ready .motion-reveal.motion-scale,
  .motion-ready .motion-reveal.is-visible,
  .site-header,
  .quote-card,
  .client-card,
  .product-card,
  .plan-asset img,
  .products-cta img,
  .plans-cta-original img,
  .hero-cta img,
  .hero-cta-mobile img,
  .header-cta img,
  .form-button-image img,
  .carousel-arrow img,
  .text-link img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ===== V61 - Preserve hero CTA horizontal centering during motion ===== */
.motion-ready .hero-cta.motion-reveal {
  transform: translateX(-50%) translate3d(0, 18px, 0) scale(.975);
}

.motion-ready .hero-cta.motion-reveal.is-visible {
  transform: translateX(-50%) translate3d(0, 0, 0) scale(1);
}

/* ===== V62 - Preserve mobile hero device centering during motion ===== */
@media (max-width: 767px) {
  .motion-ready .hero-devices-mobile.motion-reveal.motion-from-right {
    transform: translateX(-50%) translate3d(var(--motion-distance), 0, 0);
  }

  .motion-ready .hero-devices-mobile.motion-reveal.motion-from-right.is-visible {
    transform: translateX(-50%) translate3d(0, 0, 0);
  }
}