/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — Arshia Portfolio
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(1deg); }
  50% { transform: translateY(-6px) rotate(-0.5deg); }
  75% { transform: translateY(-18px) rotate(0.8deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-16px) rotate(-1.2deg); }
  66% { transform: translateY(-8px) rotate(0.6deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-10px) rotate(0.8deg); }
  50% { transform: translateY(-20px) rotate(-1deg); }
  80% { transform: translateY(-6px) rotate(0.4deg); }
}

@keyframes subtle-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -4px); }
  50% { transform: translate(-2px, -8px); }
  75% { transform: translate(6px, -3px); }
}

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

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timeline-grow {
  from { height: 0; }
  to { height: 100%; }
}

/* ── Reveal Animations (applied by JS) ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }

/* ── Stagger Children ──────────────────────────────────── */
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.stagger--visible > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.stagger--visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger--visible > *:nth-child(2) { transition-delay: 70ms; }
.stagger--visible > *:nth-child(3) { transition-delay: 140ms; }
.stagger--visible > *:nth-child(4) { transition-delay: 210ms; }
.stagger--visible > *:nth-child(5) { transition-delay: 280ms; }
.stagger--visible > *:nth-child(6) { transition-delay: 350ms; }
.stagger--visible > *:nth-child(7) { transition-delay: 420ms; }
.stagger--visible > *:nth-child(8) { transition-delay: 490ms; }

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .floating-card {
    animation: none !important;
  }

  .pulse-dot {
    animation: none !important;
  }
}