/* ============================================================
   Black Foot Logistics — UX polish (additive patch)
   Loaded after styles.css / nav-fix.css; does not modify them.
   1. Hero load-in sequence
   2. Scroll-reveal for sections (classes applied by polish.js)
   3. Metallic sheen sweep on primary CTAs
   4. Compact header once scrolled
   ============================================================ */

/* ---------- 1. Hero load-in ---------- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: hero-rise 600ms var(--ease) backwards; }
  .hero-inner > .eyebrow   { animation-delay: 80ms; }
  .hero-inner > h1         { animation-delay: 160ms; }
  .hero-inner > .hero-sub  { animation-delay: 280ms; }
  .hero-inner > .hero-ctas { animation-delay: 400ms; }
}

/* ---------- 2. Scroll reveal ---------- */
/* .reveal is only ever added by polish.js, so users without JS
   (or with reduced motion) always see content immediately. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 3. Metallic sheen on primary CTAs ---------- */
/* .signup/.cut/.gate buttons exist only on the Intelligence pages */
.btn-primary, .signup .btn, .cut .btn, .gate .btn { position: relative; overflow: hidden; }
.btn-primary::after, .signup .btn::after, .cut .btn::after, .gate .btn::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -80%;
  width: 55%;
  transform: skewX(-18deg);
  background: linear-gradient(105deg,
    rgba(185, 190, 198, 0) 0%,
    rgba(185, 190, 198, 0.6) 50%,
    rgba(185, 190, 198, 0) 100%);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.signup .btn:hover::after,
.cut .btn:hover::after,
.gate .btn:hover::after {
  animation: btn-sheen 650ms ease;
}
@keyframes btn-sheen {
  0%   { left: -80%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}

/* ---------- 4. Compact header on scroll ---------- */
/* Rides the .is-scrolled class that script.js already toggles.
   Overriding --header-h here also keeps the mobile menu panel
   aligned, since it positions itself from the same variable. */
.site-header {
  transition:
    background-color 250ms var(--ease),
    border-color 250ms var(--ease),
    backdrop-filter 250ms var(--ease),
    height 250ms var(--ease);
}
.site-header.is-scrolled { --header-h: 64px; }
.brand-mark { transition: height 250ms var(--ease); }
.site-header.is-scrolled .brand-mark { height: 34px; }