/* ─────────────────────────────────────────────────────────
   effects.css — Animations, particles, glows, transitions
   ───────────────────────────────────────────────────────── */

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

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.05); }
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-10px, 20px) scale(0.97); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pipePulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0,212,255,0.3);
    border-color: rgba(0,212,255,0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0,212,255,0.7), 0 0 40px rgba(0,212,255,0.3);
    border-color: rgba(0,212,255,0.8);
  }
}

@keyframes sparkle {
  0%   { transform: scale(0) rotate(0deg); opacity: 1; }
  60%  { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(1.4) rotate(360deg); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes glow-cycle {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,0.4); }
  50%       { box-shadow: 0 0 24px rgba(0,212,255,0.8), 0 0 48px rgba(0,212,255,0.3); }
}

@keyframes forge-burst {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(245,158,11,0); }
  50%  { transform: scale(1.08); box-shadow: 0 0 30px rgba(245,158,11,0.7); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(245,158,11,0); }
}

@keyframes tunnel-flow {
  0%   { background-position: 0 0; }
  100% { background-position: 200px 0; }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}

/* ==================== PARTICLE CANVAS ==================== */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ==================== PIPE ANIMATION ==================== */
.pipe-animated {
  animation: pipePulse 2s ease-in-out infinite;
}

.pipe-connected {
  border-color: var(--clr-success) !important;
  animation: glow-cycle 2s ease-in-out infinite;
  background: rgba(16,185,129,0.08) !important;
}

/* ==================== TUNNEL FLOW ==================== */
.tunnel-active {
  background: repeating-linear-gradient(
    90deg,
    rgba(0,212,255,0.05) 0px,
    rgba(0,212,255,0.1) 10px,
    rgba(0,212,255,0.05) 20px
  );
  animation: tunnel-flow 1.5s linear infinite;
}

/* ==================== FORGE SPARK ==================== */
.forge-spark {
  animation: forge-burst 0.6s ease both;
}

.sparkle-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle 0.8s ease forwards;
}

/* ==================== PORTAL SHIMMER ==================== */
.portal-shimmer {
  position: relative;
  overflow: hidden;
}

.portal-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* ==================== STARFIELD ==================== */
.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: star-twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ==================== GLOW TEXT ==================== */
.glow-text {
  text-shadow: 0 0 12px currentColor;
}

.glow-primary-text {
  color: var(--clr-primary);
  text-shadow: 0 0 16px rgba(0,212,255,0.6);
}

.glow-accent-text {
  color: var(--clr-accent);
  text-shadow: 0 0 16px rgba(245,158,11,0.6);
}

/* ==================== LOADING / TYPING ==================== */
.loading-dots::after {
  content: '';
  animation: dots 1.4s ease-in-out infinite;
}

@keyframes dots {
  0%, 20%  { content: '.'; }
  40%, 60% { content: '..'; }
  80%      { content: '...'; }
}

/* ==================== SCENE TRANSITION ==================== */
.scene-transitioning {
  pointer-events: none;
}

.scene-fade-out {
  animation: fadeOut 0.2s ease forwards;
}

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

/* ==================== XP POP ==================== */
.xp-pop {
  position: fixed;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--clr-accent);
  text-shadow: 0 0 12px rgba(245,158,11,0.6);
  pointer-events: none;
  z-index: var(--z-top);
  animation: xp-float 1.5s ease forwards;
}

@keyframes xp-float {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-80px); }
}

/* ==================== CHAPTER CARD HOVER SHINE ==================== */
.chapter-card:not(.locked):hover .chapter-card__icon {
  animation: bounce 0.5s ease;
}

/* ==================== COMPLETION STAR BURST ==================== */
.completion-stars {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}

.completion-star {
  font-size: 2rem;
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.completion-star:nth-child(1) { animation-delay: 0.1s; }
.completion-star:nth-child(2) { animation-delay: 0.25s; }
.completion-star:nth-child(3) { animation-delay: 0.4s; }

/* ==================== PULSE BADGE ==================== */
.badge.just-unlocked {
  animation: forge-burst 0.7s ease both;
}

/* ==================== UV SPEED BURST ==================== */
.uv-burst {
  animation: forge-burst 0.5s ease both;
}

.uv-speed-trail::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,185,129,0.2), transparent);
  animation: shimmer 0.8s ease both;
}