/* Cinematic generated hero backgrounds — loaded after site.css so local typography edits stay intact. */
.hero-media {
  inset: -3%;
  background-image: var(--hero-image) !important;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: heroCinematicDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroCinematicDrift {
  0% { transform: scale(1.08) translate3d(0,0,0); }
  100% { transform: scale(1.14) translate3d(-1.2%,.8%,0); }
}

.page-hero {
  isolation: isolate;
  background: #0a0b0d;
}
.page-hero-media {
  position: absolute;
  inset: -3%;
  z-index: -3;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-position, center);
  transform: scale(1.06);
  animation: heroCinematicDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5,6,8,.22), rgba(5,6,8,.54) 46%, rgba(5,6,8,.88) 100%),
    linear-gradient(0deg, rgba(5,6,8,.88), rgba(5,6,8,.08) 68%);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 25% 35%, transparent 0, rgba(0,0,0,.12) 48%, rgba(0,0,0,.36) 100%);
  pointer-events: none;
}
.page-hero > .container {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 3px 28px rgba(0,0,0,.35);
}
.page-hero p {
  color: rgba(255,255,255,.76);
  text-shadow: 0 2px 20px rgba(0,0,0,.28);
}
.page-hero .eyebrow { color: rgba(255,255,255,.78); }
.page-hero .ghost-word {
  z-index: 0;
  color: rgba(255,255,255,.035);
}

@media (max-width: 820px) {
  .hero-media {
    background-position: 48% center;
    animation-duration: 22s;
  }
  .page-hero-media {
    inset: -5%;
    background-position: 53% center;
    animation-duration: 22s;
  }
  .page-hero::before {
    background:
      linear-gradient(0deg, rgba(5,6,8,.94) 8%, rgba(5,6,8,.70) 64%, rgba(5,6,8,.34)),
      linear-gradient(90deg, rgba(5,6,8,.15), rgba(5,6,8,.58));
  }
  .page-hero h1 {
    font-size: clamp(44px,13vw,68px);
    line-height: 1.12;
    letter-spacing: 0;
  }
  .page-hero p {
    font-size: 15px;
    line-height: 1.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media,
  .page-hero-media {
    animation: none !important;
    transform: scale(1.04) !important;
  }
}

/* Hero images: no dark overlay */
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after,
.hero-scroll-shade,
.page-hero-scroll-shade {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

.hero-media,
.page-hero-media {
  filter: none !important;
  opacity: 1 !important;
}


/* Homepage hero background video */
.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: -3 !important;
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
}

@media (max-width: 760px) {
  .hero-video {
    object-position: center center !important;
  }
}


/* Horizontally flipped hero artwork: cars, services, about, contact */
.page-hero-media-flipped {
  animation-name: heroCinematicDriftFlipped !important;
}
@keyframes heroCinematicDriftFlipped {
  0% { transform: scaleX(-1) scale(1.08) translate3d(0,0,0); }
  100% { transform: scaleX(-1) scale(1.14) translate3d(-1.2%,.8%,0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-media-flipped {
    transform: scaleX(-1) scale(1.04) !important;
  }
}

/* Static horizontal mirror for selected page heroes (no GSAP dependency). */
.page-hero-media.page-hero-media-flipped {
  animation: none !important;
  transform: scaleX(-1) scale(1.06) !important;
  transform-origin: center center !important;
}
@media (max-width: 820px) {
  .page-hero-media.page-hero-media-flipped {
    transform: scaleX(-1) scale(1.06) !important;
  }
}