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

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- Keyframes ----- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes slideFromTop {
  from { opacity: 0; transform: translateY(-80px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

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

/* ----- Hero Entrance (gated behind body.hero-revealed) ----- */

/* Columns and CTAs stay hidden until the .hero-cta section enters view. */
body:not(.hero-revealed) .hero-column,
body:not(.hero-revealed) .hero-column .btn {
  opacity: 0;
}

/* Landscape: columns slide in from the sides */
body.hero-revealed.landscape .column-noleggio {
  animation: slideFromLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
body.hero-revealed.landscape .column-acquista {
  animation: slideFromRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* Portrait: columns slide in from the top/bottom */
body.hero-revealed.portrait .column-noleggio {
  animation: slideFromTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
body.hero-revealed.portrait .column-acquista {
  animation: slideFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* CTA buttons bounce in */
body.hero-revealed .hero-column .btn {
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

/* Scroll indicator: appears after the video intro, hides once user scrolls. */
body:not(.video-visible) .scroll-indicator,
body.hero-revealed .scroll-indicator {
  opacity: 0;
}
body.video-visible:not(.hero-revealed) .scroll-indicator {
  animation: fadeIn 0.5s ease 0.2s both;
}

/* ----- Scroll Reveals ----- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  /* Use !important to override component transitions during entrance */
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.slide--active .reveal-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger entrance */
.truck-grid .reveal-on-scroll:nth-child(1) { transition-delay: 0s; }
.truck-grid .reveal-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.truck-grid .reveal-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.truck-grid .reveal-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.truck-grid .reveal-on-scroll:nth-child(5) { transition-delay: 0.4s; }
.truck-grid .reveal-on-scroll:nth-child(6) { transition-delay: 0.5s; }

/* Remove transition delay on hover so interactive effects feel instant */
.truck-card:hover {
  transition-delay: 0s !important;
}