/* ================================================================
   ANIMATIONS.CSS — Keyframes, Cursor, Stars, Scroll, Reveals
   Synapse · Product of Synaptix Technologies · Built by Gurnoor Singh
   ================================================================ */

/* ── Keyframe Definitions ── */

@keyframes twinkle {
  0%, 100% { opacity: var(--lo, 0.2); }
  50% { opacity: var(--hi, 0.8); }
}

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

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

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

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

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes toastAnim {
  0% { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  15%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px); }
}

@keyframes glowGreen {
  0%, 100% { border-color: var(--border); }
  50% { border-color: rgba(74, 222, 128, 0.4); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@keyframes bubblePop {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

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

@keyframes barShimmer {
  0% { left: -60%; }
  100% { left: 160%; }
}

@keyframes endBounce {
  from { transform: scale(0) rotate(-20deg); }
  to { transform: scale(1) rotate(0); }
}

@keyframes starPop {
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

@keyframes milestoneShow {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes xpHudPulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.06); }
  50% { border-color: rgba(255, 255, 255, 0.15); }
}

@keyframes breathe-ai {
  0%, 100% { border-color: rgba(255, 255, 255, 0.07); }
  50% { border-color: rgba(255, 255, 255, 0.15); }
}

@keyframes breathe-ml {
  0%, 100% { border-color: rgba(255, 255, 255, 0.07); }
  50% { border-color: rgba(255, 255, 255, 0.15); }
}

@keyframes breathe-dl {
  0%, 100% { border-color: rgba(255, 255, 255, 0.08); }
  50% { border-color: rgba(255, 255, 255, 0.18); }
}

@keyframes glitch {
  0%, 95%, 100% { text-shadow: 1px 0 rgba(14, 165, 233, 0.3), -1px 0 rgba(217, 70, 239, 0.3); }
  96% { text-shadow: -1px 0 rgba(217, 70, 239, 0.3), 1px 0 rgba(14, 165, 233, 0.3); }
  98% { text-shadow: 1px 0 rgba(14, 165, 233, 0.3), -1px 0 rgba(217, 70, 239, 0.3); }
}


/* ── Stars ── */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--d, 3s) var(--dl, 0s) infinite;
}


/* ── Custom Cursor ── */
#cur {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width 0.15s var(--ease-smooth), height 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
}

#cur2 {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(14, 165, 233, 0.4);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease-smooth), height 0.2s var(--ease-smooth), border-color 0.2s;
}

body:has(button:hover) #cur,
body:has(a:hover) #cur {
  width: 12px;
  height: 12px;
  background: var(--blue);
}

body:has(button:hover) #cur2,
body:has(a:hover) #cur2 {
  width: 32px;
  height: 32px;
  border-color: rgba(14, 165, 233, 0.8);
}


/* ── Scroll Progress ── */
#scroll-prog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--magenta));
  pointer-events: none;
  transition: width 0.1s linear;
}


/* ── Toast ── */
.toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 28px;
  border-radius: var(--radius-full);
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  z-index: 9999;
  animation: toastAnim 2.5s forwards;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ── XP Floater ── */
.xp-floater {
  position: fixed;
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  pointer-events: none;
  z-index: 7000;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
  animation: floatUp 0.9s ease forwards;
}


/* ── Button Ripple ── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}


/* ── Confetti Canvas ── */
#confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  display: none;
}


/* ── Milestone Popup ── */
.milestone-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9000;
  background: rgba(2, 4, 8, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: 36px 52px;
  text-align: center;
  animation: milestoneShow 0.5s var(--ease-spring) forwards;
  display: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.milestone-popup.show {
  display: block;
}

.milestone-icon {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
}

.milestone-title {
  font-family: var(--fd);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 6px;
}

.milestone-msg {
  font-family: var(--fd);
  font-size: 18px;
  color: var(--text);
}


/* ── Reveal System (scroll-triggered) ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }


/* ── Enhanced Card Transitions ── */
.app-card,
.card,
.lab-card {
  transition: all 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ── Ambient Background Nebula Glows ── */
.nebula-glow {
  position: fixed;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.glow-blue {
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  top: -150px;
  left: -200px;
  animation: floatAura1 25s ease-in-out infinite alternate;
}

.glow-purple {
  background: radial-gradient(circle, var(--purple) 0%, transparent 70%);
  bottom: -150px;
  right: -250px;
  animation: floatAura2 32s ease-in-out infinite alternate;
}

@keyframes floatAura1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(120px, 80px) scale(1.15); }
  100% { transform: translate(-40px, 150px) scale(0.9); }
}

@keyframes floatAura2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-140px, -60px) scale(0.85); }
  100% { transform: translate(60px, -120px) scale(1.08); }
}


/* ══════════════════════════════════════════════════════════
   PREFERS REDUCED MOTION
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .star {
    animation: none;
    opacity: var(--lo, 0.2);
  }

  #cur,
  #cur2 {
    transition: none;
  }

  .hero-title,
  .hero-badge,
  .hero-sub,
  .hero-desc,
  .hero-btns,
  .hero-credit {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .milestone-popup {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }

  .xp-floater {
    animation: none;
    opacity: 0;
  }

  .app-card {
    animation: none;
  }

  .nebula-glow {
    animation: none;
  }
}