/* DriveHaus navbar polish for the current navbar-classic markup. */

/* Function: defines shared durations and easing curves for lightweight motion. */
:root {
  --dh-motion-fast: 160ms; /* Function: standardizes quick control feedback. */
  --dh-motion-medium: 260ms; /* Function: standardizes ordinary UI transitions. */
  --dh-motion-slow: 420ms; /* Function: standardizes larger panel movement. */
  --dh-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Function: keeps transform motion calm and consistent. */
  --dh-motion-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Function: keeps entrance motion responsive without overshoot. */
}

/* Function: removes the mobile browser tap flash from form fields and tappable controls without hiding keyboard focus rings. */
@media (hover: none) and (pointer: coarse) {
  :where(a, button, input, select, textarea, label, summary, [role="button"], [role="tab"], [role="switch"], [role="checkbox"]) {
    -webkit-tap-highlight-color: transparent; /* Function: disables the iOS and Android grey tap overlay that reads as flicker. */
    touch-action: manipulation; /* Function: removes the legacy double-tap delay on interactive controls. */
  }
}

/* Function: pauses decorative animation until motion-controller.js marks it visible and allowed. */
.motion-controlled {
  animation-play-state: paused !important; /* Function: stops off-screen or hidden-tab animation work. */
  will-change: auto !important; /* Function: avoids permanently pinning large compositor layers. */
}

/* Function: resumes decorative animation only while it is useful to the user. */
.motion-controlled.motion-is-active {
  animation-play-state: running !important; /* Function: restarts the controlled CSS animation. */
}

/* Function: lets actively moving large visuals get a temporary compositor hint. */
.hero-concierge__bg img.motion-is-active,
.buy-finder__photo img.motion-is-active,
.testimonial-track.motion-is-active,
.testimonials-grid .testimonial-track.motion-is-active {
  will-change: transform !important; /* Function: promotes only currently running transform animations. */
}

/* Function: gives transform-backed progress bars one shared animation primitive. */
.finance-progress__bar,
.sf-flow-progress__bar,
.nr-progress .bar,
.nx-fill {
  transform: scaleX(var(--dh-progress-ratio, 0)); /* Function: fills progress without changing layout width. */
  transform-origin: left center; /* Function: anchors progress fill to the start of the track. */
  transition: transform var(--dh-motion-slow) var(--dh-motion-ease); /* Function: smooths progress changes on the compositor. */
  width: 100% !important; /* Function: keeps the element at full layout width while transform handles fill. */
  will-change: transform; /* Function: limits the progress hint to a small element. */
}

/* Function: disables decorative motion after JavaScript detects reduced-motion preference. */
.motion-reduced .motion-controlled {
  animation: none !important; /* Function: removes decorative keyframes when motion is reduced. */
  transform: none !important; /* Function: keeps imagery and tracks still. */
  will-change: auto !important; /* Function: releases compositor memory under reduced motion. */
}

/* Function: disables decorative motion globally for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important; /* Function: prevents smooth-scroll motion for reduced-motion users. */
    animation-duration: 1ms !important; /* Function: collapses any missed decorative animation. */
    animation-iteration-count: 1 !important; /* Function: prevents missed animations from looping. */
    transition-duration: 1ms !important; /* Function: collapses any missed decorative transition. */
  }

  .motion-controlled {
    animation: none !important; /* Function: removes decorative keyframes when motion is reduced. */
    transform: none !important; /* Function: keeps imagery and tracks still. */
    will-change: auto !important; /* Function: releases compositor memory under reduced motion. */
  }
}

/* Reserve the live logo image space so the sticky header does not hop during load. */
.navbar-classic__logo-img {
  aspect-ratio: 667 / 161;
  height: 42px;
  width: auto;
  image-rendering: auto;
  backface-visibility: hidden;
}

/* Keep the sticky header height stable while fonts and images settle. */
.navbar-classic {
  min-height: 66px;
}

/* Prepare live nav buttons for tactile transform-only interaction. */
.navbar-classic__links li a,
.navbar-classic__mobile-toggle {
  will-change: transform, box-shadow;
}

/* Smooth release animation after navigating between navbar pages. */
@keyframes nr-unpress {
  0% {
    transform: translateY(1px);
    box-shadow: none;
  }
  55% {
    transform: translateY(-1px);
    box-shadow: none;
  }
  100% {
    transform: translateY(0);
    box-shadow: none;
  }
}

/* Apply the release animation only to the nav button that triggered navigation. */
.navbar-classic__links li a.unpress-on-load {
  animation: nr-unpress 260ms cubic-bezier(.2, .9, .1, 1) both;
}

/* Skip decorative motion during first paint to avoid loading jitter. */
html[data-nr-loading="1"] .navbar-classic,
html[data-nr-loading="1"] .navbar-classic__links a,
html[data-nr-loading="1"] .navbar-classic__mobile-toggle,
html[data-nr-loading="1"] .navbar-classic__mobile-toggle::before,
html[data-nr-loading="1"] .navbar-classic__mobile-toggle::after,
html[data-nr-loading="1"] .navbar-classic__mobile-toggle svg line,
html[data-nr-loading="1"] .navbar-classic__logo-img {
  transition: none !important;
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
}

/* Honor users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .navbar-classic__links li a,
  .navbar-classic__mobile-toggle,
  .navbar-classic__mobile-toggle::before,
  .navbar-classic__mobile-toggle::after,
  .navbar-classic__mobile-toggle svg line {
    transition: none !important;
  }

  .navbar-classic__links li a.unpress-on-load {
    animation: none !important;
  }
}