/* ==========================================================================
   animations.css — light motion on top of the mockup styles.
   Uses the individual `translate` / `scale` properties so existing `transform`
   values (rotated icons etc.) are kept. Disabled by prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

  /* ---------- Scroll reveal (classes are added by assets/js/animations.js) ---------- */
  .reveal.reveal {
    opacity: 0;
    translate: 0 1.5rem;
    transition:
      opacity 0.7s var(--ease-out) var(--reveal-delay, 0s),
      translate 0.7s var(--ease-out) var(--reveal-delay, 0s);
  }

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

  /* ---------- Page load: heroes ---------- */
  @keyframes power-fade-up {
    from {
      opacity: 0;
      translate: 0 1.25rem;
    }
  }

  @keyframes power-fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes power-zoom-out {
    from {
      scale: 1.08;
    }
  }

  .hero__bg {
    animation: power-zoom-out 2.4s var(--ease-out) both;
  }

  .hero__title > span,
  .page-hero__inner > *,
  .svc-hero__heading > *,
  .svc-hero__text,
  .svc-hero__actions,
  .back-link {
    animation: power-fade-up 0.8s var(--ease-out) both;
  }

  .hero__title > span:nth-child(2),
  .page-hero__inner > :nth-child(2),
  .svc-hero__heading > :nth-child(2) {
    animation-delay: 0.12s;
  }

  .svc-hero__text {
    animation-delay: 0.24s;
  }

  .svc-hero__actions {
    animation-delay: 0.36s;
  }

  .svc-hero__media {
    animation: power-fade-in 1s var(--ease-out) 0.15s both;
  }

  .svc-hero__media img {
    animation: power-zoom-out 1.8s var(--ease-out) both;
  }

  /* ---------- Header dropdowns ---------- */
  @keyframes power-dropdown-in {
    from {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }

  .nav__item.is-open > .dropdown {
    animation: power-dropdown-in 0.22s var(--ease-out);
  }

  .dropdown__link {
    transition: color var(--transition), translate 0.25s var(--ease-out);
  }

  .dropdown__link:hover {
    translate: 0.25rem 0;
  }

  /* ---------- Buttons & links: icon nudge ---------- */
  .btn__icon,
  .more-card__link img,
  .check-list__link,
  .areas__item a {
    transition: translate 0.3s var(--ease-out), color var(--transition);
  }

  .btn:hover .btn__icon,
  .more-card__link:hover img {
    translate: 0.2rem 0;
  }

  .check-list__link:hover,
  .areas__item a:hover {
    translate: 0.25rem 0;
  }

  .back-link img {
    transition: translate 0.3s var(--ease-out);
  }

  .back-link:hover img {
    translate: -0.2rem 0;
  }

  /* Hover effects only for devices with a mouse: on touch they would shift cards inside sliders. */
  @media (hover: hover) {
    /* ---------- Cards: lift ---------- */
    .service-card,
    .why-card,
    .more-card,
    .review-card,
    .touch-card {
      transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    }

    .service-card:hover,
    .why-card:hover,
    .more-card:hover,
    .review-card:hover,
    .touch-card:hover {
      translate: 0 -0.25rem;
      box-shadow: 0 12px 28px -12px rgba(10, 15, 21, 0.25);
    }

    .why-card__icon,
    .expertise__item img {
      transition: scale 0.4s var(--ease-out);
    }

    .why-card:hover .why-card__icon,
    .expertise__item:hover img {
      scale: 1.15;
    }

    /* ---------- Photos: slow zoom inside their frame ---------- */
    .service-card,
    .more-card,
    .works__item {
      overflow: hidden;
    }

    .service-card__img,
    .more-card__img,
    .works__item img,
    .about__media img,
    .company__media img,
    .svc-intro__img,
    .gallery__img {
      transition: scale 0.8s var(--ease-out), filter 0.5s var(--ease-out);
    }

    .service-card:hover .service-card__img,
    .more-card:hover .more-card__img,
    .works__item:hover img,
    .about__media:hover img,
    .company__media:hover img {
      scale: 1.05;
    }

    .gallery__img:hover {
      filter: brightness(1.08);
      scale: 1.02;
    }
  }

  /* ---------- FAQ ---------- */
  @keyframes power-answer-in {
    from {
      opacity: 0;
      translate: 0 -0.375rem;
    }
  }

  .faq__item[open] .faq__answer {
    animation: power-answer-in 0.35s var(--ease-out);
  }

  /* ---------- Gallery tabs ---------- */
  .works__panel:not([hidden]) {
    animation: power-fade-in 0.45s var(--ease-out);
  }
}