/* ===========================================================
   Apex Auto Prep — embedded "intro" video player
   Scoped so it can live inside the homepage without clashing
   with the site styles (.stage -> .vstage, pop -> vpop).
   =========================================================== */

.player{width:100%;max-width:960px;margin-inline:auto;aspect-ratio:16/9;border-radius:22px;overflow:hidden;position:relative;background:#eef4fb;box-shadow:var(--sh-lg);border:1px solid var(--line)}
.vstage{position:absolute;inset:0}
.cscene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease}
.cscene.active{opacity:1;visibility:visible}
.cscene svg{width:100%;height:100%;display:block}

/* caption */
.cap{position:absolute;left:0;right:0;bottom:64px;text-align:center;padding:0 6%;z-index:6;pointer-events:none}
.cap span{display:inline-block;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);padding:9px 20px;border-radius:12px;font-size:clamp(.92rem,2.3vw,1.32rem);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink);border:1px solid rgba(10,14,23,.06);box-shadow:0 8px 24px rgba(10,14,23,.16);transform:translateY(12px);opacity:0;transition:.5s}
.cscene.active .cap span{transform:none;opacity:1}

/* big play overlay */
.cover{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:linear-gradient(160deg,#eef4fb,#dbeafe);cursor:pointer;text-align:center;color:var(--ink)}
.cover.hidden{display:none}
.cover .pbtn{width:96px;height:96px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 20px 50px -10px rgba(6,182,212,.7);transition:transform .25s;margin-inline:auto;color:#fff}
.cover:hover .pbtn{transform:scale(1.08)}
.cover .pbtn svg{width:40px;height:40px;margin-left:5px}
.cover h2{margin-top:22px;font-size:clamp(1.3rem,3.6vw,2rem);letter-spacing:-.02em;color:var(--ink)}
.cover p{color:var(--muted);margin-top:6px}

/* controls */
.controls{position:absolute;left:0;right:0;bottom:0;z-index:15;padding:12px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(0deg,rgba(255,255,255,.96),rgba(255,255,255,0));opacity:0;transition:opacity .3s}
.player:hover .controls,.player.paused .controls{opacity:1}
.ctrl{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(10,14,23,.07);color:var(--ink);transition:.2s;flex:none;cursor:pointer}
.ctrl:hover{background:var(--brand);color:#fff}
.ctrl svg{width:18px;height:18px}
.bar{flex:1;height:7px;background:rgba(10,14,23,.12);border-radius:99px;cursor:pointer;position:relative}
.bar__fill{height:100%;width:0;background:var(--grad);border-radius:99px}
.bar__chaps{position:absolute;inset:0}
.bar__chaps i{position:absolute;top:0;bottom:0;width:2px;background:rgba(10,14,23,.28)}
.time{font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none}

/* scene animation helpers (run when .active) */
@keyframes inUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes inL{from{transform:translateX(-120px);opacity:0}to{transform:none;opacity:1}}
@keyframes inR{from{transform:translateX(120px);opacity:0}to{transform:none;opacity:1}}
@keyframes vpop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes bobY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drive{from{transform:translateX(-560px)}to{transform:translateX(0)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes fall{0%{transform:translateY(-40px);opacity:0}15%{opacity:1}100%{transform:translateY(150px);opacity:0}}
@keyframes sweep{0%{transform:translateX(-200px) skewX(-16deg);opacity:0}40%{opacity:.9}100%{transform:translateX(420px) skewX(-16deg);opacity:0}}
@keyframes sparkle{0%,100%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}}
@keyframes flashUp{0%,100%{opacity:0}50%{opacity:.85}}
@keyframes stampIn{0%{transform:scale(2.4) rotate(-18deg);opacity:0}70%{transform:scale(.9) rotate(-12deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}

@media (max-width:640px){ .cap{bottom:52px} }
@media (prefers-reduced-motion:reduce){ .player *{animation-duration:.01ms!important} }