/* ============================================
   DAY TRADING COURSE — Animations
   ============================================ */

/* --- Keyframe Animations --- */

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

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

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

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

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

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

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Float (for hero SVG elements) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
}

@keyframes glowPulseGreen {
  0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
}

/* SVG draw */
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* Candlestick grow */
@keyframes growUp {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes growDown {
  from { transform: scaleY(0); transform-origin: top; }
  to { transform: scaleY(1); transform-origin: top; }
}

/* Ticker scroll */
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Spin (for loading) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shake (for error feedback) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Bounce */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

/* Scale pop */
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Progress fill animation */
@keyframes progressFill {
  from { width: 0%; }
}

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

/* Counter numbers */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Blinking cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Scroll Reveal Classes --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children */
.stagger-children .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger-children .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger-children .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger-children .reveal:nth-child(5) { transition-delay: 320ms; }
.stagger-children .reveal:nth-child(6) { transition-delay: 400ms; }
.stagger-children .reveal:nth-child(7) { transition-delay: 480ms; }
.stagger-children .reveal:nth-child(8) { transition-delay: 560ms; }
.stagger-children .reveal:nth-child(9) { transition-delay: 640ms; }
.stagger-children .reveal:nth-child(10) { transition-delay: 720ms; }

/* --- SVG Specific Animations --- */

/* Draw-in effect for SVG paths */
.svg-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.svg-draw.animate {
  animation: drawLine 1.5s ease forwards;
}

/* SVG candlestick animations */
.candle-body {
  animation: growUp 0.5s ease forwards;
}

.candle-wick {
  animation: fadeIn 0.3s ease 0.3s both;
}

/* Chart elements */
.chart-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.chart-line.animate {
  animation: chartDraw 2s ease forwards;
}

/* --- Hover Effects --- */

/* Card lift */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Glow on hover */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-blue);
}

/* --- Loading States --- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

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

/* --- Page Transitions --- */
.page-enter {
  animation: fadeInUp 0.4s ease;
}

.page-exit {
  animation: fadeIn 0.2s ease reverse;
}

/* --- Micro-interactions --- */

/* Button click ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  pointer-events: none;
}

.btn-ripple:active::after {
  animation: ripple 0.4s ease-out;
}

/* Icon rotate on hover */
.icon-rotate:hover svg {
  transform: rotate(15deg);
  transition: transform var(--transition-fast);
}

/* Text shimmer */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    var(--accent-blue) 50%,
    var(--text-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

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

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

  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}