/* ================================================================
   animations.css — All motion, keyframes & transitions
   ================================================================
   EDIT THIS FILE WHEN:
   - Something animates too fast or too slow
   - You want to change the glitch effect on the name
   - You want to adjust nebula pulse speed
   - You want to change how scroll-reveal elements appear

   TABLE OF CONTENTS:
   1.  @keyframes
   2.  Hero entrance animations
   3.  Scroll Reveal utility (.reveal)
   4.  Glitch effect (hero name hover)
   5.  Cursor typing blink
   6.  Galaxy animations
   ================================================================ */

/* ----------------------------------------------------------------
   1. @KEYFRAMES LIBRARY
   ---------------------------------------------------------------- */

/* Elements enter from below */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Navbar slides down on page load */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Cursor blink for typing effect */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Nebula blobs breathe in and out */
@keyframes nebulaPulse {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Shooting star streaks across screen */
@keyframes shoot {
  from {
    transform: translate(-200px, 0) rotate(-30deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    transform: translate(calc(100vw + 200px), 300px) rotate(-30deg);
    opacity: 0;
  }
}

/* Glitch distortion frames */
@keyframes glitch {
  0% {
    text-shadow:
      2px 0 var(--color-cyan),
      -2px 0 var(--color-pink);
  }
  25% {
    text-shadow:
      -2px 0 var(--color-cyan),
      2px 0 var(--color-pink);
    transform: skewX(-2deg);
  }
  50% {
    text-shadow:
      2px 0 var(--color-purple),
      -2px 0 var(--color-cyan);
  }
  75% {
    text-shadow:
      -2px 0 var(--color-pink),
      2px 0 var(--color-purple);
    transform: skewX(2deg);
  }
  100% {
    text-shadow: none;
    transform: skewX(0);
  }
}

/* ----------------------------------------------------------------
   2. HERO ENTRANCE ANIMATIONS
   Staggered delay creates a cinematic entrance feel.
   Adjust the delay values (0.3s, 0.5s…) to change pacing.
   ---------------------------------------------------------------- */
.hero__label {
  animation: fadeUp 0.8s ease 0.3s forwards;
  opacity: 0;
}
.hero__name {
  animation: fadeUp 0.8s ease 0.5s forwards;
  opacity: 0;
}
.hero__typed-wrapper {
  animation: fadeUp 0.8s ease 0.7s forwards;
  opacity: 0;
}
.hero__desc {
  animation: fadeUp 0.8s ease 0.9s forwards;
  opacity: 0;
}
.hero__buttons {
  animation: fadeUp 0.8s ease 1.1s forwards;
  opacity: 0;
}

/* ----------------------------------------------------------------
   3. SCROLL REVEAL UTILITY
   Add class="reveal" to any element in index.html.
   scroll.js adds .is-visible when it enters the viewport.
   ---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

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

/* Optional delay variants — add to elements alongside .reveal */
.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;
}

/* ----------------------------------------------------------------
   5. TYPING CURSOR BLINK
   ---------------------------------------------------------------- */
#typed-cursor {
  display: inline-block;
  color: var(--color-cyan);
  animation: blink 0.8s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}

/* ----------------------------------------------------------------
   6. GALAXY / BACKGROUND ANIMATIONS
   ---------------------------------------------------------------- */
.nebula {
  animation: nebulaPulse 8s ease-in-out infinite alternate;
}

/* Each shooting star gets its own duration/delay in index.html */
.shooting-star {
  animation: shoot linear infinite;
}