/* ============================================================
   SKILLSAPLING - ANIMATIONS CSS
   Theme-aware: Green + Yellow + Coral + Teal
   ============================================================ */

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(5deg); }
  66%       { transform: translateY(-7px) rotate(-3deg); }
}

@keyframes floatUp {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .18; }
  90%  { opacity: .18; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@keyframes spin-bounce {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%       { transform: rotate(-18deg) scale(1.12); }
  75%       { transform: rotate(18deg) scale(1.12); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .72; transform: scale(1.06); }
}

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

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

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

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

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

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

/* Rainbow now uses brand palette colours */
@keyframes rainbow {
  0%   { color: #16a34a; }
  20%  { color: #fbbf24; }
  40%  { color: #f97316; }
  60%  { color: #14b8a6; }
  80%  { color: #fb7185; }
  100% { color: #16a34a; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-16deg); }
  40%       { transform: rotate(16deg); }
  60%       { transform: rotate(-10deg); }
  80%       { transform: rotate(10deg); }
}

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

/* Glow uses green */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 10px rgba(22,163,74,.3); }
  50%       { box-shadow: 0 0 32px rgba(22,163,74,.7), 0 0 64px rgba(74,222,128,.3); }
}

/* Yellow glow variant */
@keyframes glowYellow {
  0%, 100% { box-shadow: 0 0 10px rgba(251,191,36,.35); }
  50%       { box-shadow: 0 0 32px rgba(251,191,36,.75), 0 0 64px rgba(249,115,22,.3); }
}

@keyframes progressPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%       { box-shadow: 0 0 0 12px rgba(22,163,74,.0); }
}

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.15); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.10); }
  70%       { transform: scale(1); }
}

/* Pop in (for modals/popups) */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.7) translateY(30px); }
  70%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

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

/* Tada (for achievements) */
@keyframes tada {
  0%   { transform: scale(1) rotate(0deg); }
  10%  { transform: scale(.94) rotate(-3deg); }
  20%  { transform: scale(1.08) rotate(3deg); }
  30%  { transform: scale(1.08) rotate(-3deg); }
  40%  { transform: scale(1.08) rotate(3deg); }
  50%  { transform: scale(1.08) rotate(-3deg); }
  60%  { transform: scale(1.08) rotate(3deg); }
  70%  { transform: scale(1.08) rotate(-3deg); }
  80%  { transform: scale(1.08) rotate(3deg); }
  90%  { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

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

/* Leaf sway */
@keyframes sway {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%       { transform: rotate(5deg) translateY(-6px); }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */
.bounce-anim     { animation: bounce 2s ease-in-out infinite; }
.float-anim      { animation: float 3.5s ease-in-out infinite; }
.spin-anim       { animation: spin-bounce 2s ease-in-out infinite; }
.pulse-anim      { animation: pulse 2s ease-in-out infinite; }
.wiggle-anim     { animation: wiggle 1s ease-in-out; }
.lock-wiggle     { animation: wiggle 2.2s ease-in-out infinite; }
.rainbow-anim    { animation: rainbow 3s linear infinite; }
.slide-in-up     { animation: slideInUp .5s ease both; }
.slide-in-left   { animation: slideInLeft .5s ease both; }
.slide-in-right  { animation: slideInRight .5s ease both; }
.fade-in         { animation: fadeIn .5s ease both; }
.fade-in-scale   { animation: fadeInScale .5s ease both; }
.glow-anim       { animation: glow 2.2s ease-in-out infinite; }
.glow-yellow     { animation: glowYellow 2.2s ease-in-out infinite; }
.heartbeat-anim  { animation: heartbeat 1.4s ease-in-out infinite; }
.sway-anim       { animation: sway 3s ease-in-out infinite; }
.shake-anim      { animation: shake .5s ease; }
.tada-anim       { animation: tada .9s ease; }
.pop-in          { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }

/* ============================================================
   STAGGERED ENTRY ANIMATIONS
   ============================================================ */
.stagger > *:nth-child(1) { animation: slideInUp .4s ease .00s both; }
.stagger > *:nth-child(2) { animation: slideInUp .4s ease .08s both; }
.stagger > *:nth-child(3) { animation: slideInUp .4s ease .16s both; }
.stagger > *:nth-child(4) { animation: slideInUp .4s ease .24s both; }
.stagger > *:nth-child(5) { animation: slideInUp .4s ease .32s both; }
.stagger > *:nth-child(6) { animation: slideInUp .4s ease .40s both; }
.stagger > *:nth-child(7) { animation: slideInUp .4s ease .48s both; }
.stagger > *:nth-child(8) { animation: slideInUp .4s ease .56s both; }

.stagger-fast > *:nth-child(1) { animation: fadeInScale .3s ease .00s both; }
.stagger-fast > *:nth-child(2) { animation: fadeInScale .3s ease .06s both; }
.stagger-fast > *:nth-child(3) { animation: fadeInScale .3s ease .12s both; }
.stagger-fast > *:nth-child(4) { animation: fadeInScale .3s ease .18s both; }
.stagger-fast > *:nth-child(5) { animation: fadeInScale .3s ease .24s both; }
.stagger-fast > *:nth-child(6) { animation: fadeInScale .3s ease .30s both; }

/* ============================================================
   HOVER EFFECTS
   ============================================================ */
.hover-lift { transition: transform .22s ease, box-shadow .22s ease; }
.hover-lift:hover { transform: translateY(-7px); box-shadow: 0 14px 44px rgba(22,163,74,.18); }
.hover-scale { transition: transform .22s ease; }
.hover-scale:hover { transform: scale(1.06); }
.hover-glow:hover { animation: glow .5s ease forwards; }
.hover-rotate:hover { transform: rotate(8deg) scale(1.05); transition: transform .22s ease; }
.hover-bounce:hover { animation: bounce .5s ease; }
.hover-wiggle:hover { animation: wiggle .5s ease; }

/* ============================================================
   LOADING SKELETON (green tint)
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f0fdf4 25%, #dcfce7 50%, #f0fdf4 75%);
  background-size: 468px 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 10px;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; border-radius: 7px; }
.skeleton-title { height: 26px; width: 60%; margin-bottom: 12px; border-radius: 10px; }
.skeleton-card  { height: 130px; border-radius: 20px; }

/* ============================================================
   PAGE LOADER
   ============================================================ */
.page-loader {
  position: fixed; inset: 0;
  background: var(--bg, #f0fdf4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .4s ease;
}
.page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo { font-size: 4.5rem; animation: bounce 1s infinite; }
.loader-text { font-family: 'Baloo 2', cursive; font-size: 1.6rem; color: #16a34a; margin-top: 14px; font-weight: 800; }
.loader-dots { display: flex; gap: 7px; margin-top: 14px; }
.loader-dot { width: 11px; height: 11px; border-radius: 50%; background: #16a34a; animation: bounce .85s ease-in-out infinite; }
.loader-dot:nth-child(2) { animation-delay: .2s; background: #fbbf24; }
.loader-dot:nth-child(3) { animation-delay: .4s; background: #fb7185; }
.loader-dot:nth-child(4) { animation-delay: .6s; background: #14b8a6; }

/* ============================================================
   CONFETTI (multi-colour)
   ============================================================ */
.confetti-piece {
  position: fixed; top: -20px; z-index: 9998;
  width: 10px; height: 14px; border-radius: 3px;
  animation: confettiFall 3s ease forwards;
  pointer-events: none;
}

/* ============================================================
   BUTTON ANIMATIONS
   ============================================================ */
.btn { transition: all .22s ease !important; }
.btn:active { transform: scale(.95) !important; }
.btn-primary:hover,
.btn-success:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(22,163,74,.3); }
.btn-warning:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(251,191,36,.4); }
.btn-danger:hover   { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(251,113,133,.35); }

/* Ripple effect on btn click */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.3);
  border-radius: inherit;
  transform: scale(0); opacity: 0;
}
.btn-ripple:active::after { animation: ripple .4s ease; }

/* ============================================================
   CARD HOVER ANIMATIONS
   ============================================================ */
.dash-card { transition: box-shadow .22s ease, border-color .22s ease; }
.dash-card:hover { box-shadow: 0 10px 40px rgba(22,163,74,.15); }
.stat-card { transition: transform .22s ease, box-shadow .22s ease; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar-fill { transition: width 1.6s cubic-bezier(.4,0,.2,1) !important; }
.progress-pulse { animation: progressPulse 1.5s ease-in-out infinite; }

/* ============================================================
   ACHIEVEMENT UNLOCK ANIMATION
   ============================================================ */
@keyframes unlockPop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  55%  { transform: scale(1.22) rotate(12deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.achievement-card          { animation: fadeIn .5s ease; }
.achievement-card.new      { animation: unlockPop .65s cubic-bezier(.34,1.56,.64,1); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity .55s ease, transform .55s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity .55s ease, transform .55s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ============================================================
   TYPING CURSOR
   ============================================================ */
.typing-cursor::after {
  content: '|';
  animation: pulse .7s step-end infinite;
  color: #16a34a;
}

/* ============================================================
   NOTIFICATION PING
   ============================================================ */
@keyframes ping {
  0%   { transform: scale(1); opacity: .85; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.ping-dot {
  position: relative;
  display: inline-flex;
}
.ping-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #fb7185;
  animation: ping 1.3s cubic-bezier(0,0,.2,1) infinite;
}

/* ============================================================
   THEME TRANSITION
   ============================================================ */
*, *::before, *::after {
  transition: background-color .28s ease, border-color .28s ease, color .18s ease;
}
/* Exclude elements where transition would be jarring */
img, video, svg, canvas, .no-transition, .no-transition * {
  transition: none !important;
}