/* =============================================================
   ANIMATIONS.CSS — Keyframes and scroll-reveal
   A.BABA CYBERLORD Portfolio
   ============================================================= */

/* ------------------------------------------------------------------
   Keyframes
------------------------------------------------------------------ */
@keyframes ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%       { transform: scale(1.06); opacity: 0.15; }
}

@keyframes scroll-line {
  0%, 100% { transform: scaleY(1);   opacity: 0.5; }
  50%       { transform: scaleY(0.3); opacity: 0.08; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes dot-blink {
  0%, 70%, 100% { opacity: 0.3; box-shadow: 0 0 4px rgba(0, 229, 195, 0.4); }
  35%            { opacity: 1;   box-shadow: 0 0 10px rgba(0, 229, 195, 0.9); }
}

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

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ------------------------------------------------------------------
   Scroll-reveal system
   Applied via IntersectionObserver in nav.js
------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.17s; }
.reveal--delay-3 { transition-delay: 0.26s; }
.reveal--delay-4 { transition-delay: 0.35s; }

/* ------------------------------------------------------------------
   Hero entrance (runs immediately on page load)
------------------------------------------------------------------ */
.hero__content > * {
  animation: fade-in-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero__eyebrow   { animation-delay: 0.05s; }
.hero__name      { animation-delay: 0.15s; }
.hero__realname  { animation-delay: 0.22s; }
.hero__tagline   { animation-delay: 0.30s; }
.hero__intro     { animation-delay: 0.38s; }
.hero__actions   { animation-delay: 0.46s; }
.hero__badges    { animation-delay: 0.54s; }

.hero__avatar-wrap {
  animation: fade-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}

/* Nav entrance */
.site-header {
  animation: fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Page hero entrance */
.page-hero__inner > * {
  animation: fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.page-hero__inner .section__label { animation-delay: 0.05s; }
.page-hero__inner .page-hero__title { animation-delay: 0.15s; }
.page-hero__inner .page-hero__subtitle { animation-delay: 0.25s; }

/* Project card filter transition */
.project-card {
  transition: opacity 0.25s ease,
              transform 0.3s ease,
              border-color 0.2s ease,
              box-shadow 0.3s ease;
}

.project-card.hiding {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Timeline */
.timeline-item {
  animation: slide-in-right 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Roadmap */
.roadmap-item {
  animation: fade-in-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Profile pic glow pulse */
.profile-pic__glow {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   Reduced-motion — all animations disabled
------------------------------------------------------------------ */
@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; }
  .hero__content > * { animation: none; opacity: 1; transform: none; }
  .hero__avatar-wrap { animation: none; opacity: 1; }
  .page-hero__inner > * { animation: none; opacity: 1; transform: none; }
  .profile-pic__ring { animation: none; }
  .hero__scroll-line { animation: none; }
  .profile-pic__status-dot { animation: none; opacity: 1; }
  .profile-pic__glow { animation: none; }
}

/* ------------------------------------------------------------------
   Additional keyframes for homepage hero
------------------------------------------------------------------ */
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 15px) scale(0.97); }
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

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