/* ================================================================
   MonkAI – animations.css
   Keyframes, reveal-on-scroll, hover effects.
   ================================================================ */

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes wheel {
  0%   { transform: translate(-50%, 0);  opacity: 1; }
  100% { transform: translate(-50%, 14px); opacity: 0; }
}

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

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -20px) scale(1.06); }
  66%  { transform: translate(-30px, 25px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(59,130,246,0.25)); }
  50%      { filter: drop-shadow(0 0 36px rgba(139,92,246,0.45)); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbit1 {
  from { transform: rotate(0deg) translateX(220px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(220px) rotate(-360deg); }
}
@keyframes orbit2 {
  from { transform: rotate(0deg) translateX(180px) rotate(0deg); }
  to   { transform: rotate(-360deg) translateX(180px) rotate(360deg); }
}
@keyframes orbit3 {
  from { transform: rotate(0deg) translateX(240px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(240px) rotate(-360deg); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Reveal-on-scroll (driven by animations.js) ----------
   Elements marked with [data-animate] start invisible and animate
   in once they enter the viewport (`.is-visible` added by JS).
*/
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-left"]  { transform: translateX(28px); }
[data-animate="fade-right"] { transform: translateX(-28px); }
[data-animate="zoom"]       { transform: scale(0.94); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hero specific motion ---------- */
.blob-1 { animation: drift 18s ease-in-out infinite; }
.blob-2 { animation: drift 22s ease-in-out infinite reverse; }
.blob-3 { animation: drift 26s ease-in-out infinite; }

.hero-svg { animation: glowPulse 6s ease-in-out infinite; }

/* Hexagonal lattice + orbits slowly rotate */
.hero-svg g:nth-of-type(2),
.hero-svg .orbit-group {
  transform-origin: 260px 260px;
  animation: spinSlow 60s linear infinite;
}

/* Quantum particles drift along orbits */
.quantum-particle {
  transform-origin: 260px 260px;
}
.quantum-particle.q1 { animation: spinSlow 18s linear infinite;          }
.quantum-particle.q2 { animation: spinSlow 24s linear infinite reverse;  }
.quantum-particle.q3 { animation: spinSlow 30s linear infinite;          }

/* ---------- Hover effects ---------- */
.glass-card { transform-style: preserve-3d; }
.glass-card:hover .card-title { color: #fff; }

.project-card:hover,
.app-card:hover {
  animation: float 4s ease-in-out infinite;
}

/* Button ripple — uses ::before that scales on click via :active */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4), transparent 60%);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 600ms, transform 600ms;
  pointer-events: none;
}
.btn:active::before {
  opacity: 1;
  transform: scale(2);
  transition: 0s;
}

/* Social icon glow */
.social-link:hover {
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

/* Reduce motion (a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] { opacity: 1; transform: none; }
}