/* ═══════════════════════════════════════════════════════════════════════
   50-animations.css — ANIMATIONS + TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════
   Keyframes + utility classes for motion. Respects user preference via:
     html[data-ui-reduce-motion="1"]  → disables transitions/animations
   set by boot script in base layout (per UI preferences).
   ═══════════════════════════════════════════════════════════════════════ */

@layer animations {

/* ─── Keyframes ────────────────────────────────────────────────────── */
@keyframes fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out    { from { opacity: 1; } to { opacity: 0; } }

@keyframes slide-up    { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-down  { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-left  { from { transform: translateX(8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slide-right { from { transform: translateX(-8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@keyframes scale-in    { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes scale-out   { from { transform: scale(1); opacity: 1; } to { transform: scale(0.96); opacity: 0; } }

@keyframes pulse-soft  { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
  50% { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15); }
}

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

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ─── Animation utility classes ────────────────────────────────────── */
.animate-fade         { animation: fade-in var(--transition-slow) var(--ease-out) both; }
.animate-fade-out     { animation: fade-out var(--transition-base) var(--ease-in) both; }
.animate-slide-up     { animation: slide-up var(--transition-slow) var(--ease-out) both; }
.animate-slide-down   { animation: slide-down var(--transition-slow) var(--ease-out) both; }
.animate-slide-left   { animation: slide-left var(--transition-slow) var(--ease-out) both; }
.animate-slide-right  { animation: slide-right var(--transition-slow) var(--ease-out) both; }
.animate-scale        { animation: scale-in var(--transition-base) var(--ease-spring) both; }
.animate-pulse-soft   { animation: pulse-soft 2s var(--ease-in-out) infinite; }
.animate-pulse-scale  { animation: pulse-scale 1.8s var(--ease-in-out) infinite; }
.animate-shimmer {
  background: linear-gradient(90deg,
    var(--color-surface-hover) 0%,
    var(--color-bg-alt) 50%,
    var(--color-surface-hover) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.animate-glow         { animation: glow 2s var(--ease-in-out) infinite; }
.animate-spin         { animation: spin 1s linear infinite; }
.animate-bounce-soft  { animation: bounce-soft 1.2s var(--ease-in-out) infinite; }

/* ─── Transition utility classes ───────────────────────────────────── */
.transition-none      { transition: none; }
.transition-fast      { transition: all var(--transition-fast) var(--ease-out); }
.transition-base      { transition: all var(--transition-base) var(--ease-out); }
.transition-slow      { transition: all var(--transition-slow) var(--ease-out); }

.transition-colors    { transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base); }
.transition-transform { transition: transform var(--transition-base) var(--ease-out); }
.transition-opacity   { transition: opacity var(--transition-base); }
.transition-shadow    { transition: box-shadow var(--transition-base); }

/* ─── Hover lift (standardized) ────────────────────────────────────── */
.hover-lift {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hover-scale {
  transition: transform var(--transition-base) var(--ease-spring);
}
.hover-scale:hover { transform: scale(1.02); }

/* ─── Respect reduce-motion preference ─────────────────────────────── */
html[data-ui-reduce-motion="1"] *,
html[data-ui-reduce-motion="1"] *::before,
html[data-ui-reduce-motion="1"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
html[data-ui-reduce-motion="1"] .hover-lift:hover,
html[data-ui-reduce-motion="1"] .hover-scale:hover,
html[data-ui-reduce-motion="1"] .card-hover:hover {
  transform: none;
}

/* ── AI Neural theme — page-entry card glow + continuous pulse ── */
@keyframes aiCardEnter {
  0%   { border-color:#6366f1; box-shadow:0 0 0 1px rgba(99,102,241,.5),0 0 28px rgba(99,102,241,.4); }
  65%  { border-color:rgba(99,102,241,.4); box-shadow:0 0 0 1px rgba(99,102,241,.18),0 0 10px rgba(99,102,241,.14); }
  100% { border-color:rgba(99,102,241,.22); box-shadow:none; }
}
@keyframes aiBorderPulse {
  0%,100% { box-shadow:none; }
  50%     { box-shadow:0 0 16px rgba(99,102,241,.18),0 0 5px rgba(168,85,247,.10); }
}
@keyframes aiHeaderGlow {
  0%,100% { border-bottom-color:rgba(99,102,241,.25); }
  50%     { border-bottom-color:rgba(168,85,247,.45); }
}
@keyframes aiTopGlow {
  0%,100% { border-top-color:#6366f1; box-shadow:0 -4px 18px rgba(99,102,241,.45); }
  33%     { border-top-color:#a855f7; box-shadow:0 -4px 20px rgba(168,85,247,.50); }
  66%     { border-top-color:#06b6d4; box-shadow:0 -4px 18px rgba(6,182,212,.45); }
}

} /* @layer animations */