/* Copyright (c) Advams Inc. All rights reserved. */
.hero{
  --car-bg-opacity:.64;
  --responsive-hero-height:720px;
  --hero-inset-nudge:clamp(8px,calc((100vw - 1200px)*.05),32px);
  --hero-frame-inset:max(clamp(132px,13vw,240px),calc((100vw - 1680px)/2));
  --hero-side:calc(var(--hero-frame-inset) + var(--hero-inset-nudge));
  --car-box-right:calc(var(--hero-frame-inset) + var(--hero-inset-nudge));
  --car-width:min(820px,calc(44vw - 15px));
  --car-center-y:calc(50% + 18px);
  --car-glow-y:calc(50% + 18px);
  min-height:max(var(--responsive-hero-height),100vh);
  min-height:max(var(--responsive-hero-height),100svh);
  padding-left:var(--hero-side);
  padding-right:var(--hero-side);
  background:radial-gradient(circle at 76% var(--car-glow-y),#191919 0,transparent 36%),#050505;
}
.hero-copy{max-width:clamp(430px,32vw,540px)}
.hero h1{font-size:clamp(76px,6.1vw,88px)}
.hero-note{left:var(--hero-side)}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("assets/anonymous-car-silhouette-cinematic-transparent-v1.png?v=1.9.6");
  background-image:image-set(
    url("assets/anonymous-car-silhouette-cinematic-transparent-v1.avif") type("image/avif") 1x,
    url("assets/anonymous-car-silhouette-cinematic-transparent-v1.webp") type("image/webp") 1x,
    url("assets/anonymous-car-silhouette-cinematic-transparent-v1.png?v=1.9.6") type("image/png") 1x
  );
  background-repeat:no-repeat;
  background-position:calc(100% - var(--car-box-right)) var(--car-center-y);
  background-size:var(--car-width) auto;
  filter:saturate(.28) brightness(.68) contrast(.9) drop-shadow(0 0 8px rgba(255,229,0,.06));
  opacity:var(--car-bg-opacity);
  transition:opacity .05s linear;
}
.hero::after{display:none}
.hero-visual{
  isolation:isolate;
  z-index:1;
  right:var(--car-box-right);
  top:var(--car-center-y);
  bottom:auto;
  width:var(--car-width);
  transform:translateY(-50%);
  clip-path:none;
}
.hero-visual img{height:auto;opacity:0!important}
.hero-visual picture{display:block;width:100%;height:auto}
.car-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:.64;filter:saturate(.28) brightness(.68) contrast(.9) drop-shadow(0 0 8px rgba(255,229,0,.06))}

@media(min-width:1280px) and (max-height:950px){
  .hero{min-height:max(720px,100svh);padding-top:clamp(126px,16vh,154px);padding-bottom:36px}
  .hero h1{font-size:clamp(76px,6.1vw,88px)}
  .hero .lead{margin-top:28px;font-size:clamp(18px,1.65vw,23px)}
  .hero .actions{margin-top:25px}
  .hero-note{bottom:24px}
}

@media(max-width:1279px){
  .hero{
    --mobile-car-y:510px;
    --mobile-glow-y:65%;
    --stack-car-width:min(820px,94vw,calc(1664px - 86vw));
    padding-right:clamp(32px,6vw,72px);
    padding-left:clamp(32px,6vw,72px);
    background:radial-gradient(circle at 50% var(--mobile-glow-y),#181818 0,transparent 42%),#050505;
  }
  .hero-copy{max-width:700px}
  .hero::before{
    background-position:50% var(--mobile-car-y);
    background-size:var(--stack-car-width) auto;
  }
  .hero-visual{left:50%;right:auto;top:var(--mobile-car-y);bottom:auto;width:var(--stack-car-width);transform:translateX(-50%)}
  .hero-note{right:clamp(32px,6vw,72px);bottom:34px;left:clamp(32px,6vw,72px)}
}

@media(max-width:1000px) and (max-height:600px) and (orientation:landscape){
  .hero{
    --landscape-car-width:min(44vw,400px);
    min-height:max(320px,100svh);
    padding:68px clamp(20px,4vw,38px) 54px;
    background:radial-gradient(circle at 76% 58%,#181818 0,transparent 38%),#050505;
  }
  .hero-copy{max-width:min(48vw,430px)}
  .hero::before{background-position:calc(100% - clamp(20px,4vw,38px)) 44%;background-size:var(--landscape-car-width) auto}
  .hero-visual{right:clamp(20px,4vw,38px);left:auto;top:44%;width:var(--landscape-car-width);transform:translateY(-50%)}
}

@media(prefers-reduced-motion:reduce){.car-particles{display:none!important}.hero{--car-bg-opacity:.64!important}}
@media(max-width:600px){.car-particles{display:block}}

.hero .actions .button{width:150px;height:52px;padding:0 10px;white-space:nowrap;text-align:center}
@media(max-width:380px){.hero .actions{gap:8px}.hero .actions .button{font-size:12px}}