/* Smooth motion — soft reveals & micro-interactions */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-duration: 1.15s;
  --motion-stagger: 0.1s;
}

html { scroll-behavior: smooth; }

/* Scroll reveal — soft fade + lift, no blur */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease-out),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--motion-i, 0) * var(--motion-stagger));
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal[data-motion="left"] {
  transform: translate3d(-24px, 0, 0);
}

.reveal[data-motion="right"] {
  transform: translate3d(24px, 0, 0);
}

/* Header on scroll */
.motion-header {
  transition:
    background 0.6s var(--motion-ease),
    box-shadow 0.6s var(--motion-ease),
    border-color 0.6s ease;
}

.motion-header.is-scrolled {
  background: rgba(5, 5, 8, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Interactive cards */
.motion-card {
  transition:
    transform 0.65s var(--motion-ease),
    box-shadow 0.65s var(--motion-ease),
    border-color 0.45s ease;
}

@media (hover: hover) {
  .motion-card:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  }
}

/* Scanner — very subtle border glow */
.motion-pulse-border::before {
  animation: motion-border-pulse 5s ease-in-out infinite;
}

@keyframes motion-border-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.95; }
}

/* FAQ */
details.motion-faq > summary {
  transition: color 0.35s ease;
}

details.motion-faq[open] > summary {
  color: #fafafa;
}

details.motion-faq .motion-faq-body {
  animation: motion-faq-open 0.55s var(--motion-ease) both;
}

@keyframes motion-faq-open {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

[data-count].is-counting {
  transition: color 0.8s ease;
}

.card-enter {
  animation: motion-card-in 0.85s var(--motion-ease) both;
}

@keyframes motion-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.motion-link-card {
  transition:
    transform 0.65s var(--motion-ease),
    border-color 0.45s ease,
    box-shadow 0.65s var(--motion-ease);
}

@media (hover: hover) {
  .motion-link-card:hover {
    transform: translate3d(0, -3px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-card:hover,
  .motion-link-card:hover {
    transform: none;
  }

  .motion-pulse-border::before { animation: none; }
}