/*
 * Kawan Legal motion layer.
 * This file supplements styles.css and deliberately does not redefine the
 * existing logo/client marquee rules. Motion uses opacity, transform, and
 * filter so the browser can keep most work on the compositor.
 * Viewport reveals intentionally stay enabled for every visitor because they
 * are part of the page's navigation feedback, not a continuous background effect.
 * Limitation: scroll reveals are one-way per page visit; upgrade to a
 * scroll-linked timeline only if reversible scroll progress is needed later.
 */

:root {
  --motion-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

@keyframes kl-motion-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -7px, 0);
  }
}

@keyframes kl-motion-arrow {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@keyframes kl-motion-ring {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
  }
}

@keyframes kl-motion-sheen {
  from {
    transform: translate3d(-140%, 0, 0);
  }

  to {
    transform: translate3d(140%, 0, 0);
  }
}

  .motion-ready .motion-reveal:not([data-reveal]) {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 24px, 0) scale(0.985);
    transition:
      opacity 1050ms var(--motion-ease),
      filter 1100ms var(--motion-ease),
      transform 1150ms var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
  }

  .motion-ready .motion-reveal:not([data-reveal]).is-motion-visible {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .motion-ready [data-reveal] {
    filter: blur(8px);
    transform: translate3d(0, 30px, 0) scale(0.985);
    transition:
      opacity 1100ms var(--motion-ease),
      transform 1250ms var(--motion-ease),
      filter 1150ms var(--motion-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready [data-reveal].is-visible {
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Both service pages share this reveal timing; only the card itself moves. */
  .motion-ready .service-list .service-detail[data-reveal] {
    transition:
      opacity 1250ms var(--motion-ease),
      transform 1400ms var(--motion-ease),
      filter 1300ms var(--motion-ease);
  }

  .motion-ready .hero-photo.is-motion-visible,
  .motion-ready .dossier-card.is-motion-visible {
    animation: kl-motion-float 8s ease-in-out infinite;
    will-change: transform;
  }

  .motion-ready .hero-photo.is-motion-visible {
    animation-duration: 13s;
  }

  .motion-ready .announcement .arrow {
    animation: kl-motion-arrow 2.8s ease-in-out infinite;
  }

  .motion-ready .process-step .step-number {
    animation: kl-motion-ring 4.8s ease-in-out infinite;
  }

  .motion-ready .button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .motion-ready .button::before {
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 28%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    content: "";
    transform: translate3d(-140%, 0, 0);
    transition: transform 240ms ease;
  }

  .motion-ready .button:hover::before {
    animation: kl-motion-sheen 700ms var(--motion-ease) both;
  }

  .motion-ready .review-card {
    transition: transform 320ms var(--motion-ease), box-shadow 320ms ease;
  }

  .motion-ready .stat,
  .motion-ready .process-step,
  .motion-ready .timeline-year,
  .motion-ready .signature-mark,
  .motion-ready .contact-item-mark,
  .motion-ready .tag,
  .motion-ready .document-link {
    transition: transform 260ms var(--motion-ease), color 260ms ease, background 260ms ease, border-color 260ms ease;
  }

  .motion-ready .faq details[open] p {
    animation: kl-motion-reveal 320ms var(--motion-ease) both;
  }

  .motion-ready .form-field input[aria-invalid="true"],
  .motion-ready .form-field select[aria-invalid="true"],
  .motion-ready .form-field textarea[aria-invalid="true"] {
    animation: kl-motion-invalid 360ms ease;
  }

  @keyframes kl-motion-reveal {
    from {
      opacity: 0;
      transform: translate3d(0, -6px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes kl-motion-invalid {
    0%,
    100% {
      transform: translateX(0);
    }

    35% {
      transform: translateX(-3px);
    }

    70% {
      transform: translateX(3px);
    }
  }
@media (hover: hover) and (pointer: fine) {
  .motion-ready .review-card:hover {
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.11);
    transform: translate3d(0, -6px, 0);
  }

  .motion-ready .stat:hover,
  .motion-ready .process-step:hover {
    transform: translate3d(0, -4px, 0);
  }

  .motion-ready .timeline-item:hover .timeline-year,
  .motion-ready .signature-mark:hover,
  .motion-ready .contact-item:hover .contact-item-mark {
    transform: translate3d(3px, 0, 0) rotate(-5deg);
  }

  .motion-ready .contact-item:hover .contact-item-mark,
  .motion-ready .tag:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
  }

  .motion-ready .tag:hover {
    transform: translate3d(0, -2px, 0);
  }

  .motion-ready .document-link:hover {
    transform: translate3d(4px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Override the legacy global reduced-motion reset for viewport reveals. */
  .motion-ready .motion-reveal:not([data-reveal]) {
    transition:
      opacity 1050ms var(--motion-ease),
      filter 1100ms var(--motion-ease),
      transform 1150ms var(--motion-ease) !important;
  }

  .motion-ready [data-reveal] {
    opacity: 0 !important;
    filter: blur(8px) !important;
    transform: translate3d(0, 30px, 0) scale(0.985) !important;
    transition:
      opacity 1100ms var(--motion-ease),
      transform 1250ms var(--motion-ease),
      filter 1150ms var(--motion-ease) !important;
  }

  .motion-ready [data-reveal].is-visible {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .motion-ready .service-list .service-detail[data-reveal] {
    transition:
      opacity 1250ms var(--motion-ease),
      transform 1400ms var(--motion-ease),
      filter 1300ms var(--motion-ease) !important;
  }
}