/*
 * AutoVINChecks — Premium scroll-driven 3D automotive layer (v32).
 * PRESENTATION ONLY. No VIN, geo, currency, checkout, email or SEO logic here.
 * All layers are pointer-events:none and sit behind the hero content (z-index < 3).
 */

/* Scene: give the hero a real perspective camera. */
.avc-hero.av3d{
  perspective:1400px!important;
  perspective-origin:68% 52%!important;
  transform-style:preserve-3d;
}

/* The photographic vehicle plate (existing ::before) becomes the mid layer. */
.avc-hero.av3d::before{
  transform:
    translate3d(var(--av3d-car-x,0px),var(--av3d-car-y,0px),var(--av3d-car-z,0px))
    rotateY(var(--av3d-car-ry,0deg))
    rotateX(var(--av3d-car-rx,0deg))
    scale(var(--av3d-car-s,1.06))!important;
  transform-origin:68% 62%!important;
  transition:none!important;
  will-change:transform;
  backface-visibility:hidden;
  filter:brightness(var(--av3d-car-b,.95)) saturate(.97) contrast(1.03)!important;
}

/* Watermark word = far layer, drifts slowest. */
.avc-hero.av3d::after{
  transform:translate3d(calc(-50% + var(--av3d-mark-x,0px)),var(--av3d-mark-y,0px),0)
            scale(var(--av3d-mark-s,1))!important;
  transition:none!important;
  will-change:transform;
}

/* ---------- Injected depth layers ---------- */
.av3d-layer{
  position:absolute;inset:-6% -8%;
  pointer-events:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* 1. Far atmospheric backdrop (behind the photo) */
.av3d-back{
  z-index:0;
  background:
    radial-gradient(70% 55% at 76% 26%,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(60% 50% at 14% 78%,rgba(224,31,38,.12) 0%,rgba(224,31,38,0) 70%),
    linear-gradient(180deg,rgba(20,21,23,.30) 0%,rgba(24,25,27,.10) 44%,rgba(16,17,18,.46) 100%);
  transform:translate3d(var(--av3d-back-x,0px),var(--av3d-back-y,0px),0) scale(var(--av3d-back-s,1.04));
}

/* 2. Volumetric light shaft across the vehicle (premium lighting) */
.av3d-light{
  z-index:2;
  background:
    linear-gradient(102deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.10) 56%,rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
  opacity:var(--av3d-light-o,.5);
  transform:translate3d(var(--av3d-light-x,0px),0,0);
}

/* 3. Soft floor reflection + contact shadow under the vehicle */
.av3d-floor{
  z-index:2;
  top:auto;bottom:-4%;height:46%;
  background:
    radial-gradient(52% 68% at 68% 22%,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 72%),
    linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.72) 100%);
  transform:translate3d(var(--av3d-floor-x,0px),var(--av3d-floor-y,0px),0) scaleY(var(--av3d-floor-sy,1));
  opacity:var(--av3d-floor-o,1);
}

/* 4. Atmospheric haze / cinematic vignette in front of everything visual */
.av3d-haze{
  z-index:2;
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 46%,rgba(0,0,0,.42) 100%);
  opacity:var(--av3d-haze-o,.7);
  transform:translate3d(0,var(--av3d-haze-y,0px),0) scale(var(--av3d-haze-s,1));
}

/* Hero content always above every visual layer — never covered. */
.avc-hero.av3d .avc-hero-inner{position:relative;z-index:6!important}
.avc-hero.av3d .avc-hero-overlay{z-index:1!important}
.avc-hero.av3d{overflow:hidden!important}

/* ---------- Mobile: same concept, reduced intensity ---------- */
@media (max-width:820px){
  .avc-hero.av3d{perspective:900px!important;perspective-origin:64% 42%!important}
  .avc-hero.av3d::before{transform-origin:62% 78%!important}
  .av3d-light{opacity:calc(var(--av3d-light-o,.5) * .55)}
  .av3d-floor{height:38%}
  .av3d-haze{opacity:calc(var(--av3d-haze-o,.7) * .8)}
}

/* ---------- Reduced motion: static premium presentation ---------- */
@media (prefers-reduced-motion:reduce){
  .avc-hero.av3d::before{
    transform:scale(1.05)!important;transition:none!important;
  }
  .avc-hero.av3d::after{transform:translate3d(-50%,0,0)!important}
  .av3d-layer{transform:none!important;transition:none!important}
}
.av3d-static .avc-hero.av3d::before{transform:scale(1.05)!important}
.av3d-static .av3d-layer{transform:none!important}

/* Mobile framing: keep the vehicle visible in the upper band, above the copy,
   without ever overlapping the H1, VIN input or CTA (content is z-index 6). */
@media (max-width:820px){
  .avc-hero.av3d::before{
    background-position:70% 58%!important;
    background-size:cover!important;
  }
  .avc-hero.av3d .avc-hero-overlay{
    background:
      radial-gradient(120% 52% at 78% 8%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 62%),
      radial-gradient(100% 55% at 8% 92%,rgba(224,31,38,.12) 0%,rgba(224,31,38,0) 70%),
      linear-gradient(180deg,
        rgba(10,10,11,.20) 0%,
        rgba(10,10,11,.12) 18%,
        rgba(12,12,13,.52) 40%,
        rgba(12,12,13,.86) 60%,
        rgba(10,10,11,.96) 100%)!important;
  }
}