/* ===== Purple3 Intro Video section (below hero, above Explore Purple3) ===== */
.intro-video{width:min(1180px,92vw);margin:8px auto 18px;position:relative;isolation:isolate}
.intro-video-inner{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:36px;align-items:center;padding:28px 32px;border-radius:22px;
  border:1px solid rgba(174,83,255,.28);
  background:linear-gradient(135deg,rgba(117,42,190,.12),rgba(255,255,255,.025) 60%);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 24px 60px rgba(0,0,0,.28)}

/* ---- media ---- */
.intro-video-media{display:flex;justify-content:center;min-width:0}
.intro-video-frame{position:relative;width:100%;max-width:300px;aspect-ratio:832/1088;border-radius:20px;overflow:hidden;
  background:#0b0813;border:1px solid rgba(185,105,255,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 0 50px rgba(140,60,255,.22),0 24px 50px rgba(0,0,0,.4)}
.intro-video-frame:before{content:"";position:absolute;inset:-1px;z-index:3;border-radius:21px;padding:1px;pointer-events:none;opacity:.8;
  background:linear-gradient(120deg,rgba(214,150,255,.7),rgba(120,40,255,.12) 40%,rgba(214,150,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.intro-video-player{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#0b0813}

/* ---- play / pause control ---- */
.intro-video-toggle{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;
  margin:0;padding:0;border:0;background:linear-gradient(180deg,rgba(6,5,11,.05),rgba(6,5,11,.45));color:#fff;cursor:pointer;
  transition:background .3s ease,opacity .3s ease}
.intro-video-toggle[hidden]{display:none}
.intro-video-toggle:focus-visible{outline:2px solid #cf98ff;outline-offset:-4px}
.intro-video-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,#7721d8,#a446fa);border:1px solid rgba(220,170,255,.6);
  box-shadow:0 0 0 8px rgba(160,76,255,.18),0 0 40px rgba(165,80,255,.5),0 12px 30px rgba(0,0,0,.45);
  transition:transform .25s ease,box-shadow .25s ease}
.intro-video-icon svg{width:34px;height:34px}
.intro-video-icon .ico-play{margin-left:4px}
.intro-video-icon .ico-pause{display:none}
.intro-video-toggle:hover .intro-video-icon,.intro-video-toggle:focus-visible .intro-video-icon{transform:scale(1.06);box-shadow:0 0 0 10px rgba(160,76,255,.22),0 0 52px rgba(165,80,255,.6),0 12px 30px rgba(0,0,0,.45)}
.intro-video-hint{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#efe8f7;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* playing state: control stays present and focusable, icon hides until hover/focus */
.intro-video-frame.is-playing .intro-video-toggle{background:transparent;opacity:0}
.intro-video-frame.is-playing .intro-video-toggle:hover,.intro-video-frame.is-playing .intro-video-toggle:focus-visible{opacity:1;background:linear-gradient(180deg,rgba(6,5,11,.05),rgba(6,5,11,.35))}
.intro-video-frame.is-playing .ico-play{display:none}
.intro-video-frame.is-playing .ico-pause{display:block}
.intro-video-frame.is-playing .intro-video-hint{display:none}
@media(hover:none){.intro-video-frame.is-playing .intro-video-toggle:hover{opacity:0}}

/* ---- copy ---- */
.intro-video-copy{min-width:0}
.intro-video-copy .eyebrow{display:block}
.intro-video-copy h2{font-family:Sora,Inter,sans-serif;font-size:clamp(28px,2.9vw,42px);line-height:1.05;letter-spacing:-.035em;margin:8px 0 14px;color:#fff}
.intro-video-copy h2 em{font-style:normal;background:linear-gradient(90deg,#c886ff 0%,#a04cff 55%,#7b2cff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.intro-video-copy p{margin:0;color:#bdb2c9;font-size:16px;line-height:1.65;max-width:640px}
.intro-video-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

@media(prefers-reduced-motion:reduce){.intro-video-icon,.intro-video-toggle{transition:none}}

/* ---- responsive ---- */
@media(max-width:1100px){
  .intro-video-inner{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px;padding:24px}
  .intro-video-frame{max-width:270px}
}
@media(max-width:900px){
  .intro-video{margin:0 auto 14px}
  .intro-video-inner{grid-template-columns:1fr;gap:20px;padding:20px 18px 22px}
  .intro-video-copy{order:1}
  .intro-video-media{order:2}
  .intro-video-frame{max-width:min(280px,74vw)}
  .intro-video-copy p{font-size:15px}
  .intro-video-actions{margin-top:16px}
  .intro-video-actions .btn{flex:1 1 auto}
  .intro-video-icon{width:64px;height:64px}
  .intro-video-icon svg{width:28px;height:28px}
  .intro-video{width:min(100% - 28px,1180px)}
  .intro-video-inner{gap:16px;padding:18px 16px 20px}
  .intro-video-copy h2{font-size:clamp(27px,8.2vw,36px);margin-bottom:10px}
  .intro-video-copy p{line-height:1.55}
  .intro-video-frame{max-width:min(250px,68vw)}
}