/**
 * The SNH Way Academy — Delight & Animation Layer
 * "Make them feel something."
 */

/* ══════════════════════════════════════════════════════════════
   CURSOR SPARKLE TRAIL
══════════════════════════════════════════════════════════════ */
.sparkle-cursor {
  pointer-events: none;
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 99999;
  animation: sparkle-pop 0.8s ease-out forwards;
}
@keyframes sparkle-pop {
  0%   { transform: scale(1) translateY(0);   opacity: 1; }
  60%  { transform: scale(1.6) translateY(-12px); opacity: 0.7; }
  100% { transform: scale(0) translateY(-24px);  opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   FLOATING GRADIENT ORBS (background ambiance)
══════════════════════════════════════════════════════════════ */
.orb-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: orb-float var(--orb-dur, 12s) ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, #ff5f1f, transparent);  top: -10%; left: -5%;  --orb-dur: 14s; }
.orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, #7c3aed, transparent);  top: 20%;  right: -8%; --orb-dur: 18s; animation-delay: -4s; }
.orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, #2563eb, transparent);  bottom: 5%;left: 15%;  --orb-dur: 16s; animation-delay: -8s; }
.orb-4 { width: 250px; height: 250px; background: radial-gradient(circle, #00c875, transparent);  bottom: 20%;right: 5%; --orb-dur: 20s; animation-delay: -2s; }
@keyframes orb-float {
  0%,100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30px, -40px) scale(1.08); }
  50%      { transform: translate(-20px, 20px) scale(0.95); }
  75%      { transform: translate(40px, 30px) scale(1.05); }
}

/* ══════════════════════════════════════════════════════════════
   ANIMATED GRADIENT TEXT
══════════════════════════════════════════════════════════════ */
.gradient-text-animated {
  background: linear-gradient(270deg, #ff5f1f, #7c3aed, #2563eb, #00c875, #ff5f1f);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ══════════════════════════════════════════════════════════════
   CARD SHINE SWEEP (hover magic)
══════════════════════════════════════════════════════════════ */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.45) 50%, transparent 60%);
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}
.card-shine:hover::before { left: 140%; }

/* ══════════════════════════════════════════════════════════════
   GLOW PULSE (LIVE badges, active elements)
══════════════════════════════════════════════════════════════ */
.glow-pulse {
  animation: glow-ring 2s ease-in-out infinite;
}
@keyframes glow-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,95,31,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,95,31,0); }
}

/* ══════════════════════════════════════════════════════════════
   SPRING REVEAL (scroll-triggered, replaces flat fadeInUp)
══════════════════════════════════════════════════════════════ */
.spring-in {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.spring-in.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.spring-in.d1 { transition-delay: 0.08s; }
.spring-in.d2 { transition-delay: 0.16s; }
.spring-in.d3 { transition-delay: 0.24s; }
.spring-in.d4 { transition-delay: 0.32s; }

/* Slide in from left */
.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
.slide-left.visible { opacity: 1; transform: none; }

/* Slide in from right */
.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
.slide-right.visible { opacity: 1; transform: none; }

/* Pop scale */
.pop-in {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.pop-in.visible { opacity: 1; transform: scale(1); }

/* ══════════════════════════════════════════════════════════════
   CONFETTI BURST (achievement unlock)
══════════════════════════════════════════════════════════════ */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall var(--fall-dur, 1.2s) ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0,0) rotate(0deg) scale(1);   opacity: 1; }
  100% { transform: translate(var(--tx,0px), var(--ty,120px)) rotate(var(--rot,360deg)) scale(0.3); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   SHIMMER SKELETON (loading states)
══════════════════════════════════════════════════════════════ */
.shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf5 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer-wave 1.6s ease-in-out infinite;
}
@keyframes shimmer-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   FLOATING EMOJI / ICONS (hero decoration)
══════════════════════════════════════════════════════════════ */
.float-icon {
  position: absolute;
  font-size: 28px;
  animation: float-icon var(--fi-dur, 6s) ease-in-out infinite;
  opacity: 0.2;
  user-select: none;
  pointer-events: none;
}
@keyframes float-icon {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-18px) rotate(8deg); }
  66%      { transform: translateY(8px) rotate(-5deg); }
}

/* ══════════════════════════════════════════════════════════════
   TYPING CURSOR BLINK
══════════════════════════════════════════════════════════════ */
.type-cursor::after {
  content: '|';
  animation: cursor-blink 1s step-end infinite;
  color: #ff5f1f;
}
@keyframes cursor-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ══════════════════════════════════════════════════════════════
   PROGRESS RING ANIMATION
══════════════════════════════════════════════════════════════ */
.ring-animate {
  animation: ring-draw 1.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes ring-draw {
  from { stroke-dashoffset: 283; }
}

/* ══════════════════════════════════════════════════════════════
   TILT CARD (3D hover)
══════════════════════════════════════════════════════════════ */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   STAT COUNTER POP
══════════════════════════════════════════════════════════════ */
@keyframes stat-pop {
  0%   { transform: scale(0.5) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.stat-pop { animation: stat-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ══════════════════════════════════════════════════════════════
   HERO PARTICLE CANVAS (overlay layer)
══════════════════════════════════════════════════════════════ */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════════
   MODULE CARD GLOW (cockpit)
══════════════════════════════════════════════════════════════ */
.mod-card-glow:hover {
  box-shadow: 0 8px 32px var(--mc-glow, rgba(255,95,31,0.25)),
              0 2px 8px rgba(0,0,0,0.08) !important;
  transform: translateY(-5px) !important;
}

/* ══════════════════════════════════════════════════════════════
   BADGE FLOAT
══════════════════════════════════════════════════════════════ */
.badge-float {
  animation: badge-bob 3s ease-in-out infinite;
}
@keyframes badge-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ══════════════════════════════════════════════════════════════
   STREAK FIRE PULSE
══════════════════════════════════════════════════════════════ */
.fire-pulse {
  display: inline-block;
  animation: fire-anim 0.5s ease-in-out infinite alternate;
}
@keyframes fire-anim {
  0%   { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.2) rotate(3deg); }
}

/* ══════════════════════════════════════════════════════════════
   STAR FIELD BACKGROUND
══════════════════════════════════════════════════════════════ */
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: star-twinkle var(--s-dur, 3s) ease-in-out infinite;
  pointer-events: none;
}
@keyframes star-twinkle {
  0%,100% { opacity: var(--s-min, 0.2); transform: scale(1); }
  50%      { opacity: var(--s-max, 0.8); transform: scale(1.5); }
}

/* ══════════════════════════════════════════════════════════════
   RAINBOW BORDER ANIMATION
══════════════════════════════════════════════════════════════ */
.rainbow-border {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
                    linear-gradient(270deg, #ff5f1f, #7c3aed, #2563eb, #00c875, #fbbf24, #ff5f1f);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 400% 400%;
  animation: rainbow-spin 4s linear infinite;
}
@keyframes rainbow-spin {
  0%   { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}