/*
 * Motion effects: scroll reveal (driven by assets/front/js/motion.js),
 * hero entrance, and hover feedback. Everything is skipped for visitors who
 * ask their OS for reduced motion.
 */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Scroll reveal ---------- */
  /* Elements are only hidden once motion.js has run, so content never
     disappears if the script fails to load. */
  .motion-ready [data-motion] {
    opacity: 0;
    transition:
      opacity .7s ease,
      translate .7s cubic-bezier(.2, .7, .2, 1),
      scale .7s cubic-bezier(.2, .7, .2, 1),
      transform .35s ease,
      box-shadow .35s ease;
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, translate;
  }

  /* translate/scale (not transform) so hover transforms still work. */
  .motion-ready [data-motion="up"] {
    translate: 0 40px;
  }

  .motion-ready [data-motion="left"] {
    translate: -48px 0;
  }

  .motion-ready [data-motion="right"] {
    translate: 48px 0;
  }

  .motion-ready [data-motion="zoom"] {
    scale: .94;
  }

  .motion-ready [data-motion].is-visible {
    opacity: 1;
    translate: none;
    scale: none;
  }

  /* ---------- Home hero entrance (replays on every slide) ---------- */
  @keyframes motion-hero-in {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes motion-ken-burns {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.08);
    }
  }

  .slider .slick-active .slide__content > * {
    animation: motion-hero-in .9s cubic-bezier(.2, .7, .2, 1) both;
  }

  .slider .slick-active .slide__content > *:nth-child(2) {
    animation-delay: .15s;
  }

  .slider .slick-active .slide__content > *:nth-child(3) {
    animation-delay: .3s;
  }

  .slider .slide-item.align-v-h .hero-img {
    overflow: hidden;
  }

  .slider .slick-active.align-v-h .hero-img img {
    animation: motion-ken-burns 8s ease-out both;
  }

  /* ---------- Hover feedback ---------- */
  .feature-item,
  .post-item,
  .member,
  .tt-facade {
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .feature-item:hover,
  .post-item:hover,
  .tt-facade:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(33, 51, 96, .14);
  }

  .feature-item .feature__icon img {
    transition: transform .4s ease;
  }

  .feature-item:hover .feature__icon img {
    transform: scale(1.12) rotate(-4deg);
  }

  .post-item .post__img,
  .member .member__img,
  .video-banner,
  ._custom-img-container {
    overflow: hidden;
  }

  .post-item .post__img img,
  .member .member__img img,
  .video-banner img,
  ._custom-img-container img {
    transition: transform .6s ease;
  }

  .post-item:hover .post__img img,
  .member:hover .member__img img,
  .video-banner:hover img,
  ._custom-img-container:hover img {
    transform: scale(1.06);
  }

  .custom-container-img img {
    transition: transform .3s ease;
  }

  .custom-container-img:hover img {
    transform: scale(1.08);
  }

  .btn {
    transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease, color .3s ease;
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn__primary:hover {
    box-shadow: 0 10px 24px rgba(71, 78, 255, .35);
  }

  .btn .icon-arrow-right {
    display: inline-block;
    transition: transform .25s ease;
  }

  .btn:hover .icon-arrow-right {
    transform: translateX(4px);
  }

  /* ---------- Floating WhatsApp button ---------- */
  @keyframes motion-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
    }
    70% {
      box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
  }

  .floating-button > a img {
    border-radius: 50%;
    animation: motion-pulse 2.4s ease-out infinite;
  }
}