/**
 * Header Animation CSS
 * Tractor drives across header, then content fades in
 * Mobile-friendly and fully responsive
 */

@media (prefers-reduced-motion: reduce) {
  .header-animation,
  .header-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.header-animation {
  pointer-events: none;
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 70px;
  overflow: visible;
  z-index: 1050;
}

.tractor-image {
  position: absolute;
  left: -260px;
  width: 220px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.18));
  opacity: 0.98;
  max-width: 220px;
  height: auto;
}

@keyframes tractor-drive {
  0% { left: -260px; opacity: 0; transform: scale(0.95) rotate(-4deg); }
  10% { opacity: 1; }
  50% { left: 50%; transform: scale(1) rotate(0deg); }
  100% { left: 110%; opacity: 0.9; transform: scale(0.95) rotate(4deg); }
}

.anim-playing .tractor-image {
  animation: tractor-drive 2.2s cubic-bezier(.22,.9,.35,1) forwards;
}

.header-reveal {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.9,.35,1);
}

.anim-done .header-reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.nav-links-wrapper .header-reveal:nth-child(1) { transition-delay: 180ms; }
.nav-links-wrapper .header-reveal:nth-child(2) { transition-delay: 220ms; }
.nav-links-wrapper .header-reveal:nth-child(3) { transition-delay: 260ms; }
.nav-links-wrapper .header-reveal:nth-child(4) { transition-delay: 300ms; }
.nav-links-wrapper .header-reveal:nth-child(5) { transition-delay: 340ms; }

/* ===================================
   MOBILE RESPONSIVE STYLES
   =================================== */

/* Tablets and smaller (below 992px) */
@media (max-width: 991px) {
  .header-animation {
    top: 2px;
    height: 60px;
  }
  
  .tractor-image {
    width: 180px;
    left: -220px;
  }
  
  @keyframes tractor-drive {
    0% { left: -220px; opacity: 0; transform: scale(0.9) rotate(-4deg); }
    10% { opacity: 1; }
    50% { left: 50%; transform: scale(0.95) rotate(0deg); }
    100% { left: 110%; opacity: 0.9; transform: scale(0.9) rotate(4deg); }
  }
  
  .anim-playing .tractor-image {
    animation: tractor-drive 2s cubic-bezier(.22,.9,.35,1) forwards;
  }
}

/* Mobile devices (below 768px) */
@media (max-width: 767px) {
  .header-animation {
    top: 0;
    height: 50px;
  }
  
  .tractor-image {
    width: 140px;
    left: -180px;
  }
  
  @keyframes tractor-drive {
    0% { left: -180px; opacity: 0; transform: scale(0.85) rotate(-3deg); }
    10% { opacity: 1; }
    50% { left: 50%; transform: scale(0.9) rotate(0deg); }
    100% { left: 110%; opacity: 0.85; transform: scale(0.85) rotate(3deg); }
  }
  
  .anim-playing .tractor-image {
    animation: tractor-drive 1.8s cubic-bezier(.22,.9,.35,1) forwards;
  }
  
  .header-reveal {
    transform: translateY(8px) scale(0.98);
  }
  
  /* Faster stagger on mobile */
  .nav-links-wrapper .header-reveal:nth-child(1) { transition-delay: 150ms; }
  .nav-links-wrapper .header-reveal:nth-child(2) { transition-delay: 180ms; }
  .nav-links-wrapper .header-reveal:nth-child(3) { transition-delay: 210ms; }
  .nav-links-wrapper .header-reveal:nth-child(4) { transition-delay: 240ms; }
  .nav-links-wrapper .header-reveal:nth-child(5) { transition-delay: 270ms; }
}

/* Small mobile devices (below 576px) */
@media (max-width: 575px) {
  .header-animation {
    top: 0;
    height: 45px;
  }
  
  .tractor-image {
    width: 110px;
    left: -140px;
  }
  
  @keyframes tractor-drive {
    0% { left: -140px; opacity: 0; transform: scale(0.8) rotate(-2deg); }
    10% { opacity: 1; }
    50% { left: 50%; transform: scale(0.85) rotate(0deg); }
    100% { left: 110%; opacity: 0.8; transform: scale(0.8) rotate(2deg); }
  }
  
  .anim-playing .tractor-image {
    animation: tractor-drive 1.6s cubic-bezier(.22,.9,.35,1) forwards;
  }
  
  .header-reveal {
    transform: translateY(6px) scale(0.98);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22,.9,.35,1);
  }
  
  /* Even faster stagger on small mobile */
  .nav-links-wrapper .header-reveal:nth-child(1) { transition-delay: 120ms; }
  .nav-links-wrapper .header-reveal:nth-child(2) { transition-delay: 140ms; }
  .nav-links-wrapper .header-reveal:nth-child(3) { transition-delay: 160ms; }
  .nav-links-wrapper .header-reveal:nth-child(4) { transition-delay: 180ms; }
  .nav-links-wrapper .header-reveal:nth-child(5) { transition-delay: 200ms; }
}

/* Extra small devices (below 400px) */
@media (max-width: 399px) {
  .tractor-image {
    width: 90px;
    left: -120px;
  }
  
  @keyframes tractor-drive {
    0% { left: -120px; opacity: 0; transform: scale(0.75) rotate(-2deg); }
    10% { opacity: 1; }
    50% { left: 50%; transform: scale(0.8) rotate(0deg); }
    100% { left: 110%; opacity: 0.75; transform: scale(0.75) rotate(2deg); }
  }
  
  .anim-playing .tractor-image {
    animation: tractor-drive 1.4s cubic-bezier(.22,.9,.35,1) forwards;
  }
}

/* Landscape mobile orientation */
@media (max-height: 500px) and (orientation: landscape) {
  .header-animation {
    height: 40px;
  }
  
  .tractor-image {
    width: 100px;
  }
}

/* High DPI displays - sharper rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tractor-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}