/* ============================================
   ANIMATIONS — Keyframes & Transitions
   ============================================ */

/* ---- SCROLL REVEAL ---- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.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; }

/* ---- BOUNCE (scroll indicator) ---- */

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

/* ---- FADE IN UP ---- */

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

/* ---- PULSE (hero accent) ---- */

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

/* ---- SKILL BAR FILL ---- */

@keyframes fillBar {
  from {
    width: 0;
  }
}

/* ---- FLOAT (hero decoration) ---- */

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

.float {
  animation: float 4s ease-in-out infinite;
}

/* ---- HERO TEXT ENTRANCE ---- */

.hero__label,
.hero__title,
.hero__description,
.hero__actions {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.hero__label { animation-delay: 0.2s; }
.hero__title { animation-delay: 0.4s; }
.hero__description { animation-delay: 0.6s; }
.hero__actions { animation-delay: 0.8s; }

.hero__image-wrapper {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

/* ---- NAV LINK HOVER LINE ---- */

@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}