/* ============================================
   ANIMATIONS — Clean, Minimal
   No neon pulses, no glow blobs
   ============================================ */

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes softBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Accelerating Entrance Animation (Car speed past effect) ── */
.preloader-hidden.revving {
  opacity: 1;
}

.hero__name-first.revving {
  animation: revInLeft 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.hero__name-last.revving {
  animation: revInRight 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.hero__greet.revving {
  animation: fadeInUp 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) forwards 0.4s;
}

.hero__tagline.revving {
  animation: fadeInUp 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) forwards 0.6s;
}

.hero__avatar.revving {
  animation: revInRight 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards 0.2s;
}

@keyframes revInLeft {
  0% {
    opacity: 0;
    transform: translateX(-150px) skewX(-20deg) scaleX(1.5);
    filter: blur(12px);
  }
  70% {
    transform: translateX(10px) skewX(5deg) scaleX(0.9);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0) scaleX(1);
    filter: blur(0);
  }
}

@keyframes revInRight {
  0% {
    opacity: 0;
    transform: translateX(150px) skewX(20deg) scaleX(1.5);
    filter: blur(12px);
  }
  70% {
    transform: translateX(-10px) skewX(-5deg) scaleX(0.9);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0) scaleX(1);
    filter: blur(0);
  }
}