/* ==========================================================================
   Vorsprung Automobil — enhancement layer
   Adds: hero video styling, micro-animations, scroll reveals, hover polish.
   Layered on top of the mirrored Flatsome stylesheet. Nothing here overrides
   source layout; it only adds motion and the video swap.
   ========================================================================== */

/* --- Hero video (replaces the hero <img class="bg">) --------------------- */
.banner-bg video.bg,
.vs-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.banner-bg video.bg::-webkit-media-controls { display: none !important; }

/* slow cinematic drift on the hero video for a premium feel */
@keyframes vs-hero-drift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1.06) translate3d(0, 0, 0); }
}
.banner.is-selected .banner-bg video.bg {
  animation: vs-hero-drift 28s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .banner.is-selected .banner-bg video.bg { animation: none; }
}

/* --- Scroll reveal ------------------------------------------------------- */
.vs-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--vs-delay, 0ms);
  will-change: opacity, transform;
}
.vs-reveal.vs-in { opacity: 1; transform: translateY(0); }

.vs-reveal--left  { transform: translateX(-36px); }
.vs-reveal--right { transform: translateX(36px); }
.vs-reveal--zoom  { transform: scale(0.94); }
.vs-reveal--left.vs-in, .vs-reveal--right.vs-in, .vs-reveal--zoom.vs-in {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vs-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Hero text entrance -------------------------------------------------- */
@keyframes vs-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.banner.is-selected .text-box-content h1 { animation: vs-fade-up 0.9s 0.15s both cubic-bezier(0.22, 0.61, 0.36, 1); }
.banner.is-selected .text-box-content p  { animation: vs-fade-up 0.9s 0.35s both cubic-bezier(0.22, 0.61, 0.36, 1); }

/* --- Card / tile hover polish ------------------------------------------- */
.vs-hoverable { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease; }
.vs-hoverable:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45); }

/* image tiles gently zoom inside their frame */
.vs-zoomable img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.vs-zoomable:hover img { transform: scale(1.06); }

/* --- Button sheen -------------------------------------------------------- */
.vs-sheen { position: relative; overflow: hidden; }
.vs-sheen::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.vs-sheen:hover::after { left: 140%; }

/* --- Animated underline on primary nav links ---------------------------- */
.nav-top-link { position: relative; }
.nav-top-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 0; height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.nav-top-link:hover::after { width: 60%; }

/* --- Footer / band subtle fade ------------------------------------------ */
@keyframes vs-band-glow {
  0%, 100% { box-shadow: inset 0 0 0 rgba(200,16,46,0); }
  50%      { box-shadow: inset 0 0 60px rgba(200,16,46,0.10); }
}