/* Animated underline for header nav links */
.nav-underline {
  position: relative;
  display: inline-block; /* needed so ::after width matches the text */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2em; /* slight offset below text */
  width: 100%;
  height: 2px; /* thickness of the underline */
  background: currentColor; /* picks up the link color (orange on hover/active) */
  transform: scaleX(0);
  transform-origin: left; /* animate from left to right */
  transition: transform 220ms ease;
  will-change: transform;
}

/* Show the line when hovered, focused (keyboard), or when it's the current page */
.nav-underline:hover::after,
.nav-underline:focus-visible::after,
.nav-underline[aria-current="page"]::after {
  transform: scaleX(1);
}


/* Scroll reveal animations */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-zoom {
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.reveal-up { transform: translateY(16px); }
.reveal-down { transform: translateY(-16px); }
.reveal-left { transform: translateX(16px); }
.reveal-right { transform: translateX(-16px); }
.reveal-zoom { transform: scale(0.96); }

/* Applied by JS when element has entered the viewport */
.reveal-in-view { opacity: 1; transform: none; }

/* Optional staggered delays */
.reveal-delay-0 { transition-delay: 0ms; }
.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }
.reveal-delay-4 { transition-delay: 480ms; }
.reveal-delay-5 { transition-delay: 600ms; }
.reveal-delay-6 { transition-delay: 720ms; }

/* Hover lift helper */
.hover-lift { transition: transform 180ms ease, box-shadow 180ms ease; will-change: transform, box-shadow; }
.hover-lift:hover { transform: translateY(-4px); }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal-"] { transition-duration: 1ms !important; transition-delay: 0ms !important; transform: none !important; opacity: 1 !important; }
}

/* Primary button hover scale */
.btn-primary {
  transition: all 150ms ease-in-out !important;
  will-change: transform;
}

.btn-primary:not(.disabled):not(:disabled):hover,
.btn-primary:not(.disabled):not(:disabled):focus-visible {
  transform: scale(1.03);
}

/* Respect reduced motion preferences for buttons too */
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition-duration: 1ms !important; }
  .btn-primary:hover,
  .btn-primary:focus-visible { transform: none !important; }
}

/* Camper separator animation */
.camp-separator-wrapper { position: relative; height: 0; }
.camp-separator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  height: 100px;
  overflow: hidden; /* prevent horizontal scrollbars while icon goes offscreen */
  z-index: 10;
  pointer-events: none;
}
.camp-separator-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  border-radius: 9999px;
  transform: translateY(-50%);
}
.camper-mover {
  position: absolute;
  top: 30%;
  left: -4rem;
  transform: translateY(-50%);
  will-change: left;
  animation: drive-across 12s linear 0.2s infinite both;
  animation-play-state: paused;
  pointer-events: none;
}
.camper-image {
    background-repeat: no-repeat;
    background-position: center;
    width: 80px;
    min-width: 80px;
    height: 45px;
    background-size: contain;
}
.camp-separator.reveal-in-view .camper-mover, .camp-separator-wrapper.reveal-in-view .camper-mover { animation-play-state: running; }
.camper-icon { width: 28px; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
@media (max-width: 768px) { .camper-image { width: 60px; height: 33.75px; min-width: 60px; } .camper-mover { top: 35%;} }
@keyframes drive-across { from { left: -4rem; } to { left: calc(100% + 4rem); } }
@media (prefers-reduced-motion: reduce) { .camper-mover { animation: none !important; } }



/* Camper icon visibility fix: render via CSS mask instead of inline <svg> so it always shows */
/* Root cause: the current inline SVG path uses a much larger coordinate space than its viewBox,
   so it gets clipped and appears invisible. We mask a simple 64x32 camper shape and color it
   with currentColor to keep the orange theme. */
.camper-mover { z-index: 1; color: oklch(0.70 0.17 44.6); }
.camper-mover > svg { display: none !important; }
/*.camper-mover::before {*/
/*  content: "";*/
/*  display: block;*/
/*  width: 28px;*/
/*  aspect-ratio: 64 / 32;*/
/*  height: auto;*/
/*  background-color: currentColor;*/
/*  !* WebKit/Blink masks *!*/
/*  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M6 8h28a8 8 0 0 1 8 8v4h6a6 6 0 0 1 6 6v2H48a6 6 0 0 0-12 0H26a6 6 0 0 0-12 0H2v-6a6 6 0 0 1 6-6h2V12a4 4 0 0 1 4-4Zm10 0a4 4 0 0 0-4 4v8h12V8H16Zm16 0v12h10v-4a8 8 0 0 0-8-8h-2ZM14 30a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm22 0a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z"/></svg>');*/
/*  -webkit-mask-repeat: no-repeat;*/
/*  -webkit-mask-position: center;*/
/*  -webkit-mask-size: contain;*/
/*  !* Standard masks *!*/
/*  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M6 8h28a8 8 0 0 1 8 8v4h6a6 6 0 0 1 6 6v2H48a6 6 0 0 0-12 0H26a6 6 0 0 0-12 0H2v-6a6 6 0 0 1 6-6h2V12a4 4 0 0 1 4-4Zm10 0a4 4 0 0 0-4 4v8h12V8H16Zm16 0v12h10v-4a8 8 0 0 0-8-8h-2ZM14 30a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm22 0a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z"/></svg>');*/
/*  mask-repeat: no-repeat;*/
/*  mask-position: center;*/
/*  mask-size: contain;*/
/*  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));*/
/*}*/
/*@media (min-width: 768px) {*/
/*  .camper-mover::before { width: 36px; }*/
/*}*/