/* ═══════════════════════════════════════════
   MarketingOS — Animation System
   All @keyframes & Motion Utilities
   ═══════════════════════════════════════════ */

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

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position: 600px 0; }
}

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--fill-to, 100%); }
}

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

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes lightbulbBurst {
  0%   { filter: brightness(1); transform: scale(1); }
  50%  { filter: brightness(3); transform: scale(1.2); }
  100% { filter: brightness(1.5); transform: scale(1); }
}

@keyframes typewriterCursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

@keyframes morphGlow {
  0%, 100% { box-shadow: var(--shadow-glow-lime); }
  50%      { box-shadow: var(--shadow-glow-violet); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

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

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0deg); opacity: 1; }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes wordCloud {
  from { opacity: 0; transform: scale(0.5) rotate(calc(var(--rot, 0) * 1deg)); }
  to   { opacity: 1; transform: scale(1) rotate(calc(var(--rot, 0) * 1deg)); }
}

@keyframes riseColumn {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Animation Utility Classes ── */
.animate-fade-up { animation: fadeSlideUp 0.5s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.4s var(--transition-spring) forwards; }
.animate-slide-in { animation: fadeSlideIn 0.4s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-morph-glow { animation: morphGlow 4s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce-in { animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── Stagger children ── */
.stagger-children > * { opacity: 0; animation: fadeSlideUp 0.4s ease-out forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 80ms; }
.stagger-children > *:nth-child(3) { animation-delay: 160ms; }
.stagger-children > *:nth-child(4) { animation-delay: 240ms; }
.stagger-children > *:nth-child(5) { animation-delay: 320ms; }
.stagger-children > *:nth-child(6) { animation-delay: 400ms; }
.stagger-children > *:nth-child(7) { animation-delay: 480ms; }
.stagger-children > *:nth-child(8) { animation-delay: 560ms; }
.stagger-children > *:nth-child(9) { animation-delay: 640ms; }

/* ── Scroll-triggered (JS adds .revealed) ── */
.scroll-reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out; }
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

/* ── Typewriter cursor ── */
.typewriter-cursor::after { content: '▊'; animation: typewriterCursor 1s step-end infinite; color: var(--accent-lime); margin-left: 2px; }

/* ── SVG Draw ── */
.svg-draw path, .svg-draw line, .svg-draw circle {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.svg-draw.animate path, .svg-draw.animate line, .svg-draw.animate circle {
  animation: drawLine 1.5s ease-out forwards;
}

/* ── Card Flip Container ── */
.flip-card { perspective: 1000px; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-lg); }
.flip-card-back { transform: rotateY(180deg); }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}