/* ─── ShieldIT Academy — Custom Animations & Utilities ─── */

/* Confetti fall */
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg)   scale(1);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg) scale(0.6); opacity: 0; }
}

/* Slide up fade in (staggered via delay) */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.animate-slide-up   { animation: slideUpFade 0.45s ease forwards; }
.animate-slide-up-1 { animation: slideUpFade 0.45s 0.08s ease forwards; opacity: 0; }
.animate-slide-up-2 { animation: slideUpFade 0.45s 0.16s ease forwards; opacity: 0; }
.animate-slide-up-3 { animation: slideUpFade 0.45s 0.24s ease forwards; opacity: 0; }
.animate-slide-up-4 { animation: slideUpFade 0.45s 0.32s ease forwards; opacity: 0; }
.animate-slide-up-5 { animation: slideUpFade 0.45s 0.40s ease forwards; opacity: 0; }

/* Phase transition (lesson phases slide in from right) */
@keyframes phaseEnter {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.phase-enter { animation: phaseEnter 0.28s cubic-bezier(0.34,1.2,0.64,1) forwards; }

/* Glow pulse for status dot */
@keyframes statusPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.6); opacity: 0.5; }
}
.animate-status { animation: statusPulse 2.2s ease infinite; }

/* Streak flame wiggle */
@keyframes fireWiggle {
  0%, 100% { transform: scale(1)    rotate(-3deg); }
  50%       { transform: scale(1.15) rotate(3deg);  }
}
.animate-fire { animation: fireWiggle 0.55s ease infinite; }

/* Number blip on change */
@keyframes numBlip {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}
.animate-num-blip { animation: numBlip 0.35s ease; }

/* Shimmer sweep */
@keyframes shimmerSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%);  }
}

/* Module card hover shimmer */
.module-card-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(175,196,229,0.06) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
  border-radius: inherit;
}
.module-card-shimmer:hover::after {
  animation: shimmerSweep 0.55s ease forwards;
}

/* Glow utilities */
.glow-accent { filter: drop-shadow(0 0 8px rgba(175,196,229,0.5)); }
.glow-green  { filter: drop-shadow(0 0 8px rgba(34,197,94,0.5));   }
.glow-red    { filter: drop-shadow(0 0 8px rgba(239,68,68,0.5));   }
.glow-yellow { filter: drop-shadow(0 0 8px rgba(245,158,11,0.5));  }

/* Cyber dot grid background */
.cyber-grid {
  background-image: radial-gradient(circle, rgba(175,196,229,0.15) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Progress bar animated fill */
@keyframes barFill {
  from { width: 0%; }
}
.bar-animated { animation: barFill 1.2s cubic-bezier(0.34,1.2,0.64,1) forwards; }

/* Scale-in pop */
@keyframes scaleIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.animate-scale-in { animation: scaleIn 0.3s cubic-bezier(0.34,1.4,0.64,1) forwards; }

/* Scan line (cyber feel) */
@keyframes scanLine {
  0%   { top: -4px;    opacity: 0.6; }
  50%  { opacity: 0.3; }
  100% { top: 100%;    opacity: 0;   }
}
.scan-line::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175,196,229,0.3), transparent);
  animation: scanLine 3s linear infinite;
  pointer-events: none;
}

/* ─── Light mode overrides ─── */

/* Text */
.light .text-white  { color: #0F172A !important; }
.light .text-gray-100 { color: #1E293B !important; }
.light .text-gray-200 { color: #334155 !important; }
.light .text-gray-300 { color: #475569 !important; }
.light .text-gray-400 { color: #64748B !important; }
.light .text-gray-500 { color: #94A3B8 !important; }
.light .text-gray-600 { color: #CBD5E1 !important; }

/* White overlay backgrounds → subtle dark overlays */
.light .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.025) !important; }
.light .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,0.035) !important; }
.light .bg-white\/5  { background-color: rgba(0,0,0,0.05)  !important; }
.light .bg-white\/10 { background-color: rgba(0,0,0,0.07)  !important; }
.light .bg-white\/20 { background-color: rgba(0,0,0,0.10)  !important; }

/* Borders */
.light .border-white\/5  { border-color: rgba(0,0,0,0.08)  !important; }
.light .border-white\/10 { border-color: rgba(0,0,0,0.12)  !important; }
.light .border-white\/20 { border-color: rgba(0,0,0,0.16)  !important; }

/* Hover states */
.light .hover\:bg-white\/5:hover  { background-color: rgba(0,0,0,0.05) !important; }
.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.08) !important; }
.light .hover\:text-white:hover   { color: #0F172A !important; }

/* Selection highlight */
.light .selection\:bg-accent\/30::selection { background-color: rgba(37,99,235,0.2); }

/* Backdrop overlay (mobile sidebar) */
.light .bg-black\/60 { background-color: rgba(0,0,0,0.35) !important; }

/* Glass nav (marketing site) */
.light .glass-nav { background: rgba(248,250,252,0.92) !important; border-bottom-color: rgba(0,0,0,0.07) !important; }