/* Strong Som — motion. Everything here is opt-in via the .js class and
   switched off entirely under prefers-reduced-motion. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 28px;
}

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

  /* ---------- Scroll reveals ---------- */

  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
      opacity 0.7s var(--ease-out) var(--d, 0s),
      transform 0.9s var(--ease-out) var(--d, 0s);
  }
  .js [data-reveal="pop"] { transform: translate3d(0, 16px, 0) scale(0.94); }
  .js [data-reveal="clip"] {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0 round var(--clip-radius, var(--radius-panel)));
    transition: clip-path 1.1s var(--ease-in-out) var(--d, 0s);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--clip-radius, var(--radius-panel))); }

  /* Image inside a clip reveal settles from a slight zoom */
  .js [data-reveal="clip"] img {
    transform: scale(1.12);
    transition: transform 1.6s var(--ease-out) var(--d, 0s);
  }
  .js [data-reveal="clip"].is-in img { transform: none; }

  /* ---------- Hero ---------- */

  .hero__bg { animation: hero-drift 18s var(--ease-in-out) infinite alternate; }

  @keyframes hero-drift {
    from { transform: scale(1.08) translate3d(-1%, 0, 0); }
    to { transform: scale(1.16) translate3d(1.5%, -1%, 0); }
  }

  .rating-badge.is-in { animation: float 6s ease-in-out 1.6s infinite; }
  @keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
  }

  /* ---------- Equalizer ---------- */

  .eq--live i { animation: eq-bounce 1.1s ease-in-out infinite; }
  .eq--live i:nth-child(1) { animation-duration: 0.9s; }
  .eq--live i:nth-child(2) { animation-duration: 1.2s; animation-delay: -0.4s; }
  .eq--live i:nth-child(3) { animation-duration: 0.8s; animation-delay: -0.2s; }
  .eq--live i:nth-child(4) { animation-duration: 1.05s; animation-delay: -0.6s; }

  @keyframes eq-bounce {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
  }

  /* Pause decorative loops while their section is off screen */
  .is-offscreen .eq--live i,
  .is-offscreen .hero__bg,
  .is-offscreen .marquee__track { animation-play-state: paused; }

  /* ---------- Brand marquee ---------- */

  .marquee__track { animation: marquee 32s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  @keyframes marquee {
    to { transform: translate3d(-50%, 0, 0); }
  }

  /* ---------- Buttons & links ---------- */

  .btn {
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), filter 0.25s ease;
  }
  .btn .ico, .text-link .ico { transition: transform 0.3s var(--ease-out); }
  .btn:active { transform: scale(0.97); }

  /* ---------- Cards ---------- */

  .js .service-card[data-reveal], .js .review[data-reveal], .js .step[data-reveal] {
    transition:
      opacity 0.7s var(--ease-out) var(--d, 0s),
      transform 0.6s var(--ease-out) var(--d, 0s),
      box-shadow 0.4s ease,
      border-color 0.4s ease;
  }
  .service-card__media img, .project-card__media img { transition: transform 0.7s var(--ease-out); }

  /* ---------- Header & mobile nav ---------- */

  .site-header { transition: box-shadow 0.3s ease; }
  .nav { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .menu-open .nav { transition: opacity 0.3s ease, visibility 0s; }
  @media (max-width: 979.98px) {
    .nav > * {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
    }
    .menu-open .nav > * { opacity: 1; transform: none; }
    .menu-open .nav > :nth-child(2) { transition-delay: 0.04s; }
    .menu-open .nav > :nth-child(3) { transition-delay: 0.08s; }
    .menu-open .nav > :nth-child(4) { transition-delay: 0.12s; }
    .menu-open .nav > :nth-child(5) { transition-delay: 0.16s; }
    .menu-open .nav > :nth-child(6) { transition-delay: 0.2s; }
    .menu-open .nav > :nth-child(7) { transition-delay: 0.24s; }
  }

  .menu-toggle__bar { transition: transform 0.35s var(--ease-out), opacity 0.2s ease; }

  .mobile-cta { transition: transform 0.45s var(--ease-out); }

  /* ---------- Hover (pointer devices only) ---------- */

  @media (hover: hover) {
    .btn--accent:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(245, 197, 24, 0.28); transform: translateY(-2px); }
    .btn--dark:hover { box-shadow: 0 10px 24px rgba(18, 19, 20, 0.25); transform: translateY(-2px); }
    .btn:hover .ico, .text-link:hover .ico { transform: translateX(4px); }
    .nav a:not(.btn):hover { color: var(--muted); }

    .service-card.is-in:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(0, 0, 0, 0.35); }
    .service-card:hover .service-card__media img,
    .project-card:hover .project-card__media img { transform: scale(1.05); }

    .review.is-in:hover, .step.is-in:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 32px rgba(18, 19, 20, 0.08); }
    .step:hover .step__num { animation: num-pulse 0.6s var(--ease-out); }

    .contact-chip:hover .contact-chip__icon { border-color: var(--accent); }
    .contact-chip__icon { transition: border-color 0.3s ease; }
  }

  @keyframes num-pulse {
    40% { transform: scale(1.12); }
  }
}

/* State that is not motion: header shadow and the X icon still apply without animation */
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(18, 19, 20, 0.08); }
.menu-open .site-header { box-shadow: none; }
.menu-open .menu-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Reduced motion: marquee becomes a static wrapped list */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: 20px; }
  .marquee__track { width: auto; }
  .marquee__list { flex-wrap: wrap; white-space: normal; gap: 10px 30px; padding: 0; }
  .marquee__list[aria-hidden="true"] { display: none; }
}