/* One entrance sequence; the clean original image is the final resting frame. */
.hero .hero-car{animation:none;transform:none;filter:none}
.hero-logo-intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;visibility:hidden;opacity:0;mix-blend-mode:screen}
.hero-logo-intro img{width:min(76vw,76svh,760px);height:auto;filter:drop-shadow(0 0 35px #83d5d83d)}
.intro-skip{position:absolute;right:var(--pad);bottom:78px;z-index:22;background:#071012e8;border:1px solid #ffffff45;border-radius:30px;padding:10px 18px;font-size:12px;color:#e2eeee}
.intro-skip[hidden]{display:none}.intro-replay{font-size:12px;color:var(--muted);padding:8px 0;margin-left:auto}.hero-bottom{gap:22px}
.intro-play .hero-car{animation:driveIn 1.9s cubic-bezier(.15,.68,.18,1) both;will-change:transform;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 96%,transparent)}
.intro-play .hero-logo-intro{animation:logoArrival 3.9s ease-in-out both}
.intro-play .hero-content{animation:contentAfterIntro .8s 2.8s both}
.intro-play .hero-discover{animation:contentAfterIntro .8s 3s both}
.intro-play .hero h1>span{animation:none}
.intro-play .hero-shade{animation:shadeAfterIntro 3.6s both}
.intro-play .hero-art .light-line{animation:cleanSweep 2.3s 1.2s both}
.intro-done .hero-art .light-line{animation:none;opacity:0}
.intro-done .hero-discover,.intro-done h1>span{animation:none;opacity:1;transform:none}
@keyframes driveIn{0%{transform:translateX(110vw) scale(.91);opacity:0;filter:blur(4px) brightness(.6)}12%{opacity:1}76%{transform:translateX(-1.5%) scale(1);filter:blur(0) brightness(1.08)}100%{transform:none;opacity:1;filter:none}}
@keyframes logoArrival{0%,16%{visibility:visible;opacity:0;transform:translateX(35vw) scale(.72)}36%{visibility:visible;opacity:1;transform:translateX(0) scale(1)}66%{opacity:1;transform:scale(1.04)}90%{opacity:0;transform:translateY(-5vh) scale(1.17)}100%{visibility:hidden;opacity:0;transform:translateY(-5vh) scale(1.17)}}
@keyframes contentAfterIntro{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes shadeAfterIntro{0%,65%{opacity:.25}100%{opacity:1}}
@keyframes cleanSweep{0%{left:22%;opacity:0}28%{opacity:.75}100%{left:110%;opacity:0}}
/* A keyboard user can use the landing page immediately, including during the intro. */
.intro-play .hero-content:focus-within{animation:none;opacity:1;transform:none}
@media(max-width:800px){.hero-logo-intro img{width:min(94vw,64svh)}.hero-bottom{gap:18px}.intro-skip{bottom:70px}.hero .hero-badge{top:auto;bottom:55px}.intro-replay{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-logo-intro,.intro-skip,.intro-replay{display:none!important}.hero .hero-car,.hero-content,.hero-discover{animation:none!important;opacity:1;transform:none!important}.hero-shade{opacity:1}}