/* ============================================================
   Animations & reveal utilities
   ============================================================ */

/* Fade up reveal — used by ScrollTrigger */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-power), transform 1s var(--ease-power);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero title staggered reveal */
.hero-title-line {
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 1s var(--ease-power), transform 1s var(--ease-power);
}
.hero.is-ready .hero-title-line {
  opacity: 1;
  transform: translateY(0);
}
.hero.is-ready .hero-title-line:nth-child(2) { transition-delay: 0.15s; }

.hero-tag,
.hero-sub,
.hero-cta,
.hero-stats {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-power), transform 0.8s var(--ease-power);
}
.hero.is-ready .hero-tag { transition-delay: 0.0s; opacity: 1; transform: translateY(0); }
.hero.is-ready .hero-sub { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.hero.is-ready .hero-cta { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.hero.is-ready .hero-stats { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* Glitch on hero title second line */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: var(--bg-1);
  overflow: hidden;
  pointer-events: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--accent-red);
}
.glitch::before {
  animation: glitch-1 4s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  text-shadow: 2px 0 var(--accent-red);
  opacity: 0.7;
}
.glitch::after {
  animation: glitch-2 5s infinite linear alternate-reverse;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  text-shadow: -2px 0 var(--accent-blue);
  color: var(--accent-blue);
  opacity: 0.6;
}
@keyframes glitch-1 {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  92% { transform: translate(-3px, -1px); opacity: 0.7; }
  94% { transform: translate(2px, 1px); opacity: 0.7; }
  96% { transform: translate(-1px, 0); opacity: 0.5; }
}
@keyframes glitch-2 {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  90% { transform: translate(2px, 0); opacity: 0.6; }
  93% { transform: translate(-2px, 1px); opacity: 0.5; }
  97% { transform: translate(1px, -1px); opacity: 0.4; }
}

/* Section title underline draw */
.section-title {
  position: relative;
  display: inline-block;
}

/* Tilt cards */
.fleet-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Counter pop animation */
.is-counting {
  animation: count-pop 0.4s var(--ease-power);
}
@keyframes count-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); color: var(--accent-red); }
  100% { transform: scale(1); }
}

/* Speedometer needle / arc draws when in view */
@keyframes speedo-fill {
  to { stroke-dashoffset: 100; }
}

/* Gallery slide entrance — clip path reveal */
.gallery-slide.is-active .gallery-slide-num,
.gallery-slide.is-active .gallery-slide-title,
.gallery-slide.is-active .gallery-slide-text {
  animation: slide-text-rise 0.8s var(--ease-power) backwards;
}
.gallery-slide.is-active .gallery-slide-title { animation-delay: 0.15s; }
.gallery-slide.is-active .gallery-slide-text { animation-delay: 0.3s; }
@keyframes slide-text-rise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Floating particles for hero */
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--ink-0);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: particle-float linear infinite;
}
@keyframes particle-float {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 0.8; }
  90% { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--dx, 100px), var(--dy, -200px)); }
}

/* Reduce motion respectful */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}