/* ============================================
   ZX JOURNAL — ANIMATIONS
   ============================================ */

/* --- Page Transitions --- */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(4px);
  }
}

/* --- Modal --- */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes backdropEnter {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}

/* --- Sidebar slide-in --- */
@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* --- Glow pulse --- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(var(--emerald-rgb),0.2), 0 0 40px rgba(var(--emerald-rgb),0.05);
  }
  50% {
    box-shadow: 0 0 25px rgba(var(--emerald-rgb),0.4), 0 0 70px rgba(var(--emerald-rgb),0.15);
  }
}

/* --- Animated gradient border --- */
@keyframes borderSpin {
  0%   { --animated-border-angle: 0deg; }
  100% { --animated-border-angle: 360deg; }
}

@property --animated-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

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

/* --- Number counter --- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Onboarding animations --- */
@keyframes zxLogoReveal {
  0%   { opacity: 0; transform: scale(0.7) rotate(-10deg); filter: blur(20px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

@keyframes zxTaglineReveal {
  0%   { opacity: 0; transform: translateY(20px) skewY(3deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0deg); }
}

@keyframes onboardCardReveal {
  0%   { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* --- Stat reveal --- */
@keyframes statReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Floating card --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* --- Spinner --- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes emeraldSpin {
  0%   { transform: rotate(0deg);   border-top-color: var(--emerald); }
  50%  { border-top-color: var(--teal); }
  100% { transform: rotate(360deg); border-top-color: var(--emerald); }
}

/* --- Toast slide in --- */
@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

/* --- Fade --- */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* --- Scale pop --- */
@keyframes scalePop {
  0%   { transform: scale(0.9); opacity: 0; }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1);   opacity: 1; }
}

/* --- Chart line draw --- */
@keyframes chartDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0;    }
}

/* --- Ripple --- */
@keyframes ripple {
  0%   { transform: scale(0);   opacity: 0.5; }
  100% { transform: scale(3.5); opacity: 0;   }
}

/* --- Traffic light hover --- */
@keyframes trafficLightPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* --- Emoji bounce --- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%       { transform: translateY(-12px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* --- Scan line (subtle futuristic overlay) --- */
@keyframes scanLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* -- Global animation utilities -- */
.animate-fadeIn       { animation: fadeIn       var(--t-base) both; }
.animate-scalePop     { animation: scalePop     var(--t-spring) both; }
.animate-slideInLeft  { animation: slideInLeft  var(--t-base) both; }
.animate-glowPulse    { animation: glowPulse    3s ease-in-out infinite; }
.animate-float        { animation: float        4s ease-in-out infinite; }
.animate-spin         { animation: spin         1s linear infinite; }
.animate-bounce       { animation: bounce       1s infinite; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }