/* =========================================================
   brand-polish.css
   Subtle, branding-safe motion additions.
   - Red accent #DD3333 used consistently.
   - All transitions <=300ms, ease-out, GPU-friendly.
   - Respects prefers-reduced-motion.
   ========================================================= */

/* --- 1. Scroll progress bar (inserted by JS, styled here) --- */
#brand-scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #DD3333;
  z-index: 9999;
  pointer-events: none;
  transition: width 80ms linear;
  box-shadow: 0 0 4px rgba(221,51,51,.35);
}

/* --- 2. Card hover lift (flat, no 3D) ------------------ */
@media (hover: hover) and (pointer: fine){
  .location-card,
  .course-card,
  .vehicle-card{
    transition:
      transform .22s cubic-bezier(.22,.61,.36,1),
      box-shadow .22s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  .location-card:hover,
  .course-card:hover,
  .vehicle-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -20px rgba(20,20,20,.22),
                0 4px 12px -4px rgba(221,51,51,.12);
  }
}

/* --- 3. Primary CTA shine sweep on hover --------------- */
@media (hover: hover) and (pointer: fine){
  .btn-brand{
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn-brand::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background: linear-gradient(
      100deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,.35) 50%,
      transparent 65%,
      transparent 100%
    );
    transform: translateX(-120%);
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }
  .btn-brand:hover::after{
    transform: translateX(120%);
  }
}

/* --- 4. Nav-link underline grow ------------------------ */
@media (hover: hover) and (pointer: fine){
  .navbar .nav-link:not(.dropdown-toggle){
    position: relative;
  }
  .navbar .nav-link:not(.dropdown-toggle)::after{
    content:"";
    position:absolute;
    left: .75rem;
    right: .75rem;
    bottom: .25rem;
    height: 2px;
    background: #DD3333;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
    border-radius: 1px;
  }
  .navbar .nav-link:not(.dropdown-toggle):hover::after,
  .navbar .nav-link:not(.dropdown-toggle).active::after{
    transform: scaleX(1);
  }
}

/* --- 5. Reveal-on-scroll for sections without existing animations --- */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

/* --- Reduced motion guard ------------------------------ */
@media (prefers-reduced-motion: reduce){
  #brand-scroll-progress{ transition: none; }
  .location-card, .course-card, .vehicle-card{ transition: none; }
  .location-card:hover, .course-card:hover, .vehicle-card:hover{ transform: none; box-shadow: inherit; }
  .btn-brand::after{ display: none; }
  .navbar .nav-link::after{ transition: none; }
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}