#cpVideoStage{
  position:fixed;inset:0;z-index:100001;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3vh,40px);
  padding:clamp(20px,4vh,60px) clamp(18px,4vw,72px);
  background:#0a0710;
  background-image:
    radial-gradient(58% 46% at 20% 6%,  rgba(139,92,246,.26) 0%, transparent 62%),
    radial-gradient(54% 48% at 86% 24%, rgba(236,24,102,.24) 0%, transparent 64%),
    radial-gradient(80% 70% at 50% 112%,rgba(168,85,247,.16) 0%, transparent 72%);
  opacity:1;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1);
}
#cpVideoStage.cp-vs-out{opacity:0;pointer-events:none}


#cpVideoStage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    linear-gradient(115deg,transparent 40%,rgba(236,24,102,.32) 40.1%,transparent 40.4%),
    linear-gradient(65deg, transparent 66%,rgba(139,92,246,.28) 66.1%,transparent 66.4%);
}


.cp-vs-brand{
  position:absolute;top:clamp(16px,2.4vh,30px);left:clamp(18px,2.4vw,36px);z-index:4;
  display:flex;align-items:center;gap:14px;
  padding:12px 20px 12px 14px;border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;animation:cpVsFade .9s .25s forwards;
}
.cp-vs-brand img{height:clamp(30px,3.4vh,44px);width:auto;display:block}
.cp-vs-brand .rule{width:1px;height:26px;background:rgba(255,255,255,.2)}
.cp-vs-brand .cap{
  font:700 11px/1.35 'Poppins',system-ui,Arial,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}


.cp-vs-skip{
  position:absolute;top:clamp(16px,2.4vh,30px);right:clamp(18px,2.4vw,36px);z-index:4;
  font:600 13.5px/1 'Poppins',system-ui,Arial,sans-serif;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:10px 20px;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .2s cubic-bezier(.2,.7,.2,1);
  opacity:0;animation:cpVsFade .9s .5s forwards;
}
.cp-vs-skip:hover{color:#fff;background:rgba(236,24,102,.28);border-color:rgba(236,24,102,.5)}

#cpVideoStage.cp-vs-pending .cp-vs-skip{opacity:.5;pointer-events:none}


.cp-vs-head{text-align:center;z-index:3;max-width:1100px}
.cp-vs-head .kick{
  font:700 clamp(10.5px,1.05vw,13px)/1 'Poppins',system-ui,Arial,sans-serif;
  letter-spacing:.42em;text-transform:uppercase;color:#ff6aa6;margin-bottom:14px;
  opacity:0;animation:cpVsFade .9s .35s forwards}
.cp-vs-head h1{
  margin:0;color:#fff;font-weight:800;letter-spacing:-.022em;
  font:800 clamp(26px,3.9vw,54px)/1.08 'Poppins',system-ui,Arial,sans-serif;
  text-shadow:0 10px 50px rgba(236,24,102,.45);
  opacity:0;animation:cpVsRise 1s .45s cubic-bezier(.2,.75,.2,1) forwards}
.cp-vs-head h1 .g{
  background:linear-gradient(100deg,#ff8fbb,#ec1866 45%,#a855f7);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}


.cp-vs-frame{
  position:relative;z-index:3;
  width:min(1180px,92vw);
  aspect-ratio:16/9;
  max-height:62vh;
  border-radius:20px;
  padding:10px;
  background:linear-gradient(150deg,rgba(236,24,102,.5),rgba(139,92,246,.42) 55%,rgba(255,255,255,.1));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 40px 120px -30px rgba(236,24,102,.55),
    0 30px 90px -40px rgba(139,92,246,.6);
  opacity:0;transform:translateY(26px) scale(.985);
  animation:cpVsRise 1.15s .55s cubic-bezier(.2,.75,.2,1) forwards;
}
.cp-vs-frame video{
  display:block;width:100%;height:100%;
  border-radius:12px;background:#000;
  object-fit:contain;              
}

.cp-vs-frame .fc{position:absolute;width:26px;height:26px;border-color:#ff2d8a;pointer-events:none;z-index:2}
.cp-vs-frame .fc.tl{top:-3px;left:-3px;border-top:2px solid;border-left:2px solid;border-top-left-radius:20px}
.cp-vs-frame .fc.tr{top:-3px;right:-3px;border-top:2px solid;border-right:2px solid;border-top-right-radius:20px}
.cp-vs-frame .fc.bl{bottom:-3px;left:-3px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:20px}
.cp-vs-frame .fc.br{bottom:-3px;right:-3px;border-bottom:2px solid;border-right:2px solid;border-bottom-right-radius:20px}


.cp-vs-frame::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-42px;height:60px;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%,rgba(236,24,102,.4),transparent 72%);
  filter:blur(18px);pointer-events:none}


.cp-vs-play{
  position:absolute;inset:0;margin:auto;width:96px;height:96px;z-index:5;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  background:rgba(236,24,102,.9);color:#fff;font-size:34px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 12px rgba(236,24,102,.18),0 20px 60px -12px rgba(236,24,102,.7);
  transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.cp-vs-play:hover{transform:scale(1.07)}
.cp-vs-play[hidden]{display:none}


.cp-vs-foot{
  z-index:3;text-align:center;
  font:500 clamp(12px,1.1vw,14.5px)/1.5 'Poppins',system-ui,Arial,sans-serif;
  color:rgba(255,255,255,.6);letter-spacing:.04em;
  opacity:0;animation:cpVsFade 1s 1.4s forwards}

@keyframes cpVsFade{to{opacity:1}}
@keyframes cpVsRise{to{opacity:1;transform:none}}


#cpIntro.cp-awaiting-video{opacity:0;pointer-events:none;visibility:hidden}
#cpIntro.cp-arriving{animation:cpArrive .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes cpArrive{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

@media (max-height:700px){
  .cp-vs-frame{max-height:52vh}
  .cp-vs-head h1{font-size:clamp(20px,3vw,34px)}
  .cp-vs-foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cp-vs-brand,.cp-vs-skip,.cp-vs-head .kick,.cp-vs-head h1,.cp-vs-frame,.cp-vs-foot{
    animation:none;opacity:1;transform:none}
  #cpIntro.cp-arriving{animation:none}
}