/* ═══════════════════════════════════════════════════════════════
   Strucxis — canonical motion utilities
   Inspired by Stitch taste-design: spring-like easing, staggered
   orchestration, hardware-accelerated only. Honors reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Cubic-bezier curves mimicking spring physics (stiffness 100, damping 20) */
  --ease-spring:  cubic-bezier(.32, .72, 0, 1);
  --ease-tactile: cubic-bezier(.4, 0, .2, 1);
  --ease-glide:   cubic-bezier(.2, .8, .2, 1);

  /* Standardized durations */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
}

/* ───────────── Reveal-on-scroll ────────────────────────────────
   Add data-reveal to any element. JS adds .is-revealed when it
   enters the viewport. Children can use --reveal-delay for cascade. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="slide-left"]  { transform: translate3d(-18px, 0, 0); }
[data-reveal="slide-right"] { transform: translate3d( 18px, 0, 0); }
[data-reveal="scale"]       { transform: scale(.96); transform-origin: bottom; }
[data-reveal="scale"].is-revealed { transform: scale(1); }

/* ───────────── Tactile button press ─────────────────────────── */
.btn-primary,
.btn-ghost,
.btn-teal,
.btn-outline,
.auth-btn,
.nav-btn,
.cookie-banner__btn,
.onb-cta,
button.faq-cta a,
.faq-cta > a {
  transition: background var(--dur-fast) var(--ease-tactile),
              border-color var(--dur-fast) var(--ease-tactile),
              color var(--dur-fast) var(--ease-tactile),
              transform 80ms var(--ease-tactile),
              box-shadow var(--dur-fast) var(--ease-tactile) !important;
}
.btn-primary:active,
.btn-ghost:active,
.btn-teal:active,
.btn-outline:active,
.auth-btn:active,
.nav-btn:active,
.cookie-banner__btn:active,
.onb-cta:active {
  transform: translateY(1px) scale(.99);
}

/* ───────────── Card hover lift ──────────────────────────────── */
.pub-card,
.feature-card,
.card,
.report-card,
.who-card,
.related-card {
  transition: transform var(--dur-base) var(--ease-glide),
              box-shadow var(--dur-base) var(--ease-glide),
              border-color var(--dur-base) var(--ease-tactile);
}
.pub-card:hover,
.feature-card:hover,
.who-card:hover,
.related-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07),
              0 2px 6px rgba(0, 0, 0, .04);
  border-color: rgba(0, 113, 227, .25);
}

/* ───────────── Staggered list ───────────────────────────────── */
.stagger > * {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: stagger-in var(--dur-slow) var(--ease-spring) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 70ms; }
.stagger > *:nth-child(3) { animation-delay: 110ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 190ms; }
.stagger > *:nth-child(6) { animation-delay: 230ms; }
.stagger > *:nth-child(7) { animation-delay: 270ms; }
.stagger > *:nth-child(8) { animation-delay: 310ms; }
.stagger > *:nth-child(n+9) { animation-delay: 350ms; }
@keyframes stagger-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ───────────── Pulse for "attention needed" ─────────────────── */
.pulse-attention {
  animation: pulse-attention 2.4s var(--ease-glide) infinite;
}
@keyframes pulse-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* ───────────── Skeletal shimmer (loading) ───────────────────── */
.skel {
  background: linear-gradient(90deg, #f1f3f5 0%, #e9ecef 50%, #f1f3f5 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s var(--ease-glide) infinite;
  border-radius: 6px;
}
@keyframes skel-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  100% 0; }
}

/* ───────────── Page entry fade ──────────────────────────────── */
.page-enter {
  animation: page-enter var(--dur-slow) var(--ease-spring);
}
@keyframes page-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ───────────── Honor reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .stagger > *  { opacity: 1 !important; transform: none !important; }
}