/* ==========================================================================
   motion.css — Kai-Signals: animations & micro-interaction utilities
   Keyframes · Reveal · Reduced-motion overrides
   ========================================================================== */

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-4px); }
  90%       { transform: translateX(3px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.9); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* ── Scroll reveal — [data-reveal] ──────────────────────────────────────── */

/* Initial state: invisible, shifted down */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--easing-default),
              transform var(--duration-slow) var(--easing-default);
}

/* JS (motion.js) adds .visible when element enters viewport */
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: JS sets --stagger-delay via data-stagger="N" */
[data-reveal][data-stagger="0"] { transition-delay: 0ms; }
[data-reveal][data-stagger="1"] { transition-delay: 80ms; }
[data-reveal][data-stagger="2"] { transition-delay: 160ms; }
[data-reveal][data-stagger="3"] { transition-delay: 240ms; }
[data-reveal][data-stagger="4"] { transition-delay: 320ms; }
[data-reveal][data-stagger="5"] { transition-delay: 400ms; }

/* Variants */
[data-reveal="fade"] {
  opacity: 0;
  transform: none;
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.96);
}

[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-20px);
}

[data-reveal="slide-right"] {
  opacity: 0;
  transform: translateX(20px);
}

[data-reveal="fade"].visible,
[data-reveal="scale"].visible,
[data-reveal="slide-left"].visible,
[data-reveal="slide-right"].visible {
  opacity: 1;
  transform: none;
}

/* ── Utility animation classes ───────────────────────────────────────────── */

.animate-fade-in-up  { animation: fadeInUp var(--duration-default) var(--easing-default) both; }
.animate-fade-in     { animation: fadeIn   var(--duration-default) var(--easing-default) both; }
.animate-slide-up    { animation: slideUp  var(--duration-slow)    var(--easing-default) both; }
.animate-slide-down  { animation: slideDown var(--duration-default) var(--easing-default) both; }

/* ── Live signal pulse indicator ─────────────────────────────────────────── */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-brand-teal);
  animation: pulse 1.8s ease-in-out infinite;
}

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised)  25%,
    var(--surface-overlay) 37%,
    var(--surface-raised)  63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

.skeleton-row          { height: 1em; margin-bottom: var(--space-2); }
.skeleton-row--wide    { width: 100%; }
.skeleton-row--medium  { width: 60%; }
.skeleton-row--narrow  { width: 30%; }

/* ── Smooth transitions for theme switching ─────────────────────────────── */
body {
  transition: background-color var(--duration-default) var(--easing-default),
              color var(--duration-default) var(--easing-default);
}

.site-header,
.site-footer,
.card,
.cookie-banner,
.disclosure-block {
  transition: background-color var(--duration-default) var(--easing-default),
              border-color var(--duration-default) var(--easing-default);
}

/* ── Prefers-reduced-motion: disable all animations ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Show revealed elements immediately */
  [data-reveal],
  [data-reveal].visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable keyframe animations */
  .animate-fade-in-up,
  .animate-fade-in,
  .animate-slide-up,
  .animate-slide-down,
  .cookie-banner,
  .site-nav__drawer,
  .btn,
  .alert-card,
  .plan-card,
  .value-prop {
    animation: none;
    transition: none;
  }

  /* Keep transform/opacity resets intact */
  .btn:hover,
  .alert-card:hover,
  .plan-card:hover,
  .value-prop:hover,
  .site-header__cta:hover {
    transform: none;
  }

  /* Keep theme-switch transition (colour change is OK, not motion) */
  body {
    transition: background-color var(--duration-fast),
                color var(--duration-fast);
  }

  /* Disable skeleton shimmer */
  .skeleton { animation: none; }

  /* Disable pulse */
  .pulse-dot { animation: none; }
}