/* ============================================================
   PRICE ACTION TRADING COURSE — MICRO-ANIMATIONS
   Entrances, Transitions, Hover Effects, Scroll Triggers
   ============================================================ */


/* ============================================================
   KEYFRAME DEFINITIONS
   ============================================================ */

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

/* Slide Up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bounce In */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Pulse Glow */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.2), 0 0 20px rgba(255, 193, 7, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4), 0 0 40px rgba(255, 193, 7, 0.2), 0 0 60px rgba(255, 193, 7, 0.1);
  }
}

/* Pulse Glow Green */
@keyframes pulseGlowGreen {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 200, 83, 0.2), 0 0 20px rgba(0, 200, 83, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 200, 83, 0.4), 0 0 40px rgba(0, 200, 83, 0.2);
  }
}

/* Candle Grow — Simulates a candlestick forming */
@keyframes candleGrow {
  0% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 1;
  }
}

/* Shake — For incorrect answers */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Typewriter */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCaret {
  from, to { border-color: transparent; }
  50% { border-color: var(--color-accent); }
}

/* Float — Gentle floating effect */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Scale Pulse */
@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Shimmer — Loading/highlight effect */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Gradient Shift — For hero backgrounds */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Candlestick Background Animation */
@keyframes candleBgFloat1 {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.08; }
  50% { transform: translateY(-20px) scaleY(1.1); opacity: 0.15; }
}

@keyframes candleBgFloat2 {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.06; }
  50% { transform: translateY(15px) scaleY(0.9); opacity: 0.12; }
}

@keyframes candleBgFloat3 {
  0%, 100% { transform: translateY(-10px) scaleY(1.05); opacity: 0.1; }
  50% { transform: translateY(10px) scaleY(0.95); opacity: 0.05; }
}

/* Rotate for badge unlock */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Confetti-like sparkle */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

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


/* ============================================================
   ANIMATION CLASSES
   ============================================================ */

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.slide-up {
  animation: slideUp 0.7s ease forwards;
}

.slide-in-left {
  animation: slideInLeft 0.7s ease forwards;
}

.slide-in-right {
  animation: slideInRight 0.7s ease forwards;
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.pulse-glow-green {
  animation: pulseGlowGreen 2s ease-in-out infinite;
}

.bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.candle-grow {
  animation: candleGrow 1s ease-out forwards;
}

.shake {
  animation: shake 0.6s ease-in-out;
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--color-accent);
  animation: 
    typewriter 3s steps(40, end) forwards,
    blinkCaret 0.75s step-end infinite;
}

.float {
  animation: float 3s ease-in-out infinite;
}

.scale-pulse {
  animation: scalePulse 2s ease-in-out infinite;
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

.rotate-in {
  animation: rotateIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   Elements start hidden, become visible when they enter viewport
   Intersection Observer adds .visible class
   ============================================================ */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variants for scroll animations */
.animate-on-scroll.from-left {
  transform: translateX(-50px);
}
.animate-on-scroll.from-left.visible {
  transform: translateX(0);
}

.animate-on-scroll.from-right {
  transform: translateX(50px);
}
.animate-on-scroll.from-right.visible {
  transform: translateX(0);
}

.animate-on-scroll.from-scale {
  transform: scale(0.85);
}
.animate-on-scroll.from-scale.visible {
  transform: scale(1);
}

/* Staggered children animation */
.stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.stagger-children > .animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.stagger-children > .animate-on-scroll:nth-child(6) { transition-delay: 500ms; }
.stagger-children > .animate-on-scroll:nth-child(7) { transition-delay: 600ms; }
.stagger-children > .animate-on-scroll:nth-child(8) { transition-delay: 700ms; }
.stagger-children > .animate-on-scroll:nth-child(9) { transition-delay: 800ms; }
.stagger-children > .animate-on-scroll:nth-child(10) { transition-delay: 900ms; }


/* ============================================================
   HOVER EFFECTS
   ============================================================ */

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

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 188, 212, 0.1);
}

/* Glow Border on Hover */
.hover-glow {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.hover-glow:hover {
  border-color: rgba(0, 188, 212, 0.4);
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.15);
}

/* Scale on Hover */
.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* Brightness on Hover */
.hover-bright {
  transition: filter var(--transition-base);
}

.hover-bright:hover {
  filter: brightness(1.2);
}


/* ============================================================
   CSS-ONLY CANDLESTICK BACKGROUND
   Used in the hero section
   ============================================================ */
.candlestick-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.candlestick-bg .candle {
  position: absolute;
  bottom: 0;
  width: 12px;
  border-radius: 2px;
  opacity: 0.08;
}

/* Wick */
.candlestick-bg .candle::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: inherit;
  opacity: 0.6;
}

/* Green candles */
.candlestick-bg .candle.green {
  background: var(--color-bullish);
}
.candlestick-bg .candle.green::before {
  background: var(--color-bullish);
}

/* Red candles */
.candlestick-bg .candle.red {
  background: var(--color-bearish);
}
.candlestick-bg .candle.red::before {
  background: var(--color-bearish);
}

/* Individual candle positions and sizes */
.candlestick-bg .candle:nth-child(1)  { left: 3%; height: 120px; animation: candleBgFloat1 4s ease-in-out infinite; }
.candlestick-bg .candle:nth-child(1)::before { height: 40px; top: -40px; }

.candlestick-bg .candle:nth-child(2)  { left: 8%; height: 80px; animation: candleBgFloat2 5s ease-in-out 0.5s infinite; }
.candlestick-bg .candle:nth-child(2)::before { height: 30px; top: -30px; }

.candlestick-bg .candle:nth-child(3)  { left: 13%; height: 160px; animation: candleBgFloat3 4.5s ease-in-out 1s infinite; }
.candlestick-bg .candle:nth-child(3)::before { height: 50px; top: -50px; }

.candlestick-bg .candle:nth-child(4)  { left: 18%; height: 100px; animation: candleBgFloat1 5.5s ease-in-out 0.3s infinite; }
.candlestick-bg .candle:nth-child(4)::before { height: 35px; top: -35px; }

.candlestick-bg .candle:nth-child(5)  { left: 23%; height: 140px; animation: candleBgFloat2 4s ease-in-out 0.8s infinite; }
.candlestick-bg .candle:nth-child(5)::before { height: 45px; top: -45px; }

.candlestick-bg .candle:nth-child(6)  { left: 28%; height: 90px; animation: candleBgFloat3 5s ease-in-out 1.2s infinite; }
.candlestick-bg .candle:nth-child(6)::before { height: 25px; top: -25px; }

.candlestick-bg .candle:nth-child(7)  { left: 33%; height: 170px; animation: candleBgFloat1 4.8s ease-in-out 0.6s infinite; }
.candlestick-bg .candle:nth-child(7)::before { height: 55px; top: -55px; }

.candlestick-bg .candle:nth-child(8)  { left: 38%; height: 110px; animation: candleBgFloat2 5.2s ease-in-out 1.5s infinite; }
.candlestick-bg .candle:nth-child(8)::before { height: 38px; top: -38px; }

.candlestick-bg .candle:nth-child(9)  { left: 43%; height: 130px; animation: candleBgFloat3 4.3s ease-in-out 0.4s infinite; }
.candlestick-bg .candle:nth-child(9)::before { height: 42px; top: -42px; }

.candlestick-bg .candle:nth-child(10) { left: 48%; height: 75px; animation: candleBgFloat1 5.7s ease-in-out 1.1s infinite; }
.candlestick-bg .candle:nth-child(10)::before { height: 20px; top: -20px; }

.candlestick-bg .candle:nth-child(11) { left: 53%; height: 150px; animation: candleBgFloat2 4.6s ease-in-out 0.7s infinite; }
.candlestick-bg .candle:nth-child(11)::before { height: 48px; top: -48px; }

.candlestick-bg .candle:nth-child(12) { left: 58%; height: 95px; animation: candleBgFloat3 5.1s ease-in-out 1.3s infinite; }
.candlestick-bg .candle:nth-child(12)::before { height: 32px; top: -32px; }

.candlestick-bg .candle:nth-child(13) { left: 63%; height: 180px; animation: candleBgFloat1 4.4s ease-in-out 0.9s infinite; }
.candlestick-bg .candle:nth-child(13)::before { height: 60px; top: -60px; }

.candlestick-bg .candle:nth-child(14) { left: 68%; height: 105px; animation: candleBgFloat2 5.3s ease-in-out 0.2s infinite; }
.candlestick-bg .candle:nth-child(14)::before { height: 36px; top: -36px; }

.candlestick-bg .candle:nth-child(15) { left: 73%; height: 135px; animation: candleBgFloat3 4.7s ease-in-out 1.6s infinite; }
.candlestick-bg .candle:nth-child(15)::before { height: 44px; top: -44px; }

.candlestick-bg .candle:nth-child(16) { left: 78%; height: 85px; animation: candleBgFloat1 5.4s ease-in-out 0.5s infinite; }
.candlestick-bg .candle:nth-child(16)::before { height: 28px; top: -28px; }

.candlestick-bg .candle:nth-child(17) { left: 83%; height: 145px; animation: candleBgFloat2 4.2s ease-in-out 1.4s infinite; }
.candlestick-bg .candle:nth-child(17)::before { height: 46px; top: -46px; }

.candlestick-bg .candle:nth-child(18) { left: 88%; height: 115px; animation: candleBgFloat3 5.6s ease-in-out 0.1s infinite; }
.candlestick-bg .candle:nth-child(18)::before { height: 40px; top: -40px; }

.candlestick-bg .candle:nth-child(19) { left: 93%; height: 155px; animation: candleBgFloat1 4.9s ease-in-out 1.7s infinite; }
.candlestick-bg .candle:nth-child(19)::before { height: 52px; top: -52px; }

.candlestick-bg .candle:nth-child(20) { left: 97%; height: 70px; animation: candleBgFloat2 5.8s ease-in-out 0.8s infinite; }
.candlestick-bg .candle:nth-child(20)::before { height: 22px; top: -22px; }


/* ============================================================
   SMOOTH TRANSITIONS ON ALL INTERACTIVE ELEMENTS
   ============================================================ */
a,
button,
input,
select,
textarea,
.glass-card,
.story-card,
.dialogue-box,
.callout,
.quiz-option,
.badge-earned,
.mission-card {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 250ms;
  transition-timing-function: ease;
}


/* ============================================================
   PREFERS REDUCED MOTION
   Respect accessibility preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .candlestick-bg .candle {
    animation: none !important;
  }
}


/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 0%,
    var(--color-bg-card-hover) 50%,
    var(--color-bg-card) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  width: 80%;
}

.skeleton-text:last-child {
  width: 60%;
}

.skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
}