/* ═══════════════════════════════════════════════════════════════════════════
   HSI — HERO v2 · "THE NIGHT HAUL"
   Photographic hero: graded long-exposure highway, light ribbons, headlight
   cursor, film grain, editorial type. Layers gated to desktop in JS; the
   photo + grade are pure CSS and carry the design alone on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-v2 { background: #08080a; }

/* media stack clamps to the viewport exactly like the v1 canvas fix */
.hv2-media {
  position: absolute; inset: 0 0 auto 0; height: 100vh; max-height: 100%;
  overflow: hidden; z-index: 0;
}
.hv2-photo {
  position: absolute; left: -6%; top: -8%; width: 112%; height: 116%;
  object-fit: cover; object-position: 62% 42%;
  filter: saturate(0.82) contrast(1.1) brightness(0.88) hue-rotate(-12deg);
  transform: scale(1.06);
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.hv2-grade { position: absolute; inset: 0; pointer-events: none; }
/* charcoal bed — protects the type zone at any crop, keeps trails luminous */
.hv2-grade-a {
  background:
    linear-gradient(90deg, rgba(8,8,11,0.85) 0%, rgba(8,8,11,0.5) 32%, transparent 58%),
    linear-gradient(155deg,
    rgba(8,8,11,0.9) 0%, rgba(8,8,11,0.65) 30%,
    rgba(10,9,9,0.28) 62%, rgba(8,8,10,0.55) 100%);
}
/* warm overlay — pulls the dusk blue into brand orange/amber */
.hv2-grade-b {
  mix-blend-mode: overlay; opacity: 0.85;
  background: linear-gradient(150deg,
    rgba(240,112,32,0.38) 0%, rgba(245,166,35,0.16) 45%, rgba(240,112,32,0.42) 100%);
}
.hv2-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hv2-light { mix-blend-mode: screen; }
.hv2-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%, transparent 55%, rgba(5,5,7,0.55) 100%),
    linear-gradient(180deg, rgba(5,5,7,0.35) 0%, transparent 18%, transparent 70%, rgba(5,5,7,0.8) 100%);
}
.hv2-grain {
  position: absolute; inset: -8%; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  animation: hv2grain 0.85s steps(3) infinite;
}
@keyframes hv2grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2.4%, 1.8%); }
  66%  { transform: translate(1.8%, -2.1%); }
  100% { transform: translate(0, 0); }
}

/* editorial staging */
.hv2-keyline {
  width: 64px; height: 3px; margin: 0 0 30px 2px;
  background: linear-gradient(90deg, var(--orange), var(--amber));
}
.hero-v2 .hero-title {
  font-size: clamp(60px, 9.4vw, 152px);
  line-height: 0.9; letter-spacing: -0.005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hero-v2 .hero-title .accent { padding-left: 0.4em; }
.hero-v2 .hero-title > span { will-change: transform; }
.hero-v2 .hero-sub { color: #cfcfd6; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5); }
.hero-v2 .hero-strip {
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* mobile keeps the full film treatment — only the type crop changes */
@media (max-width: 1024px) {
  .hv2-photo { object-position: 56% 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-grain { animation: none; }
}