/* =========================================================
   Virtual conferences hero banner (v2/meeting/index.blade.php).
   From the "virtual-conferences-hero-v3-venue" reference design. Tokens are scoped to .pt4 (not :root)
   and the generic .mcpe-btn classes are prefixed with .pt4. The video popup is the Bootstrap
   .Watch_video modal used on the practical-training landing page (rules at the end of this file).
   ========================================================= */
/* =========================================================
   MYCPE ONE V5.0 TOKENS
   ========================================================= */
.pt4{
  --brand-50:#EBEEFD; --brand-100:#D8DEFC; --brand-200:#9CABF7; --brand-300:#758AF4;
  --brand-400:#4E69F1; --brand-500:#3A58EF; --brand-600:#314BD0; --brand-700:#283FB1;
  --brand-800:#12327B; --brand-900:#04092A;
  --gray-50:#F9FAFB; --gray-100:#F2F4F7; --gray-200:#EAECF0; --gray-300:#D0D5DD;
  --gray-500:#667085; --gray-600:#475467; --gray-700:#344054; --gray-900:#101828;
  --success:#12B76A; --warning:#F79009; --danger:#F04438;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* =========================================================
   MYCPE ONE BUTTON SYSTEM (white variant, XL = Figma 12px 20px / 16/24)
   ========================================================= */
.pt4 .mcpe-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:4px;border:0;font-family:'Inter',sans-serif;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease;
}
.pt4 .mcpe-btn__icon{display:inline-flex;flex-shrink:0;width:20px;height:20px;}
.pt4 .mcpe-btn__icon svg{display:block;width:100%;height:100%;}
.pt4 .mcpe-btn--xl{padding:12px 20px;font-size:16px;line-height:24px;}
.pt4 .mcpe-btn--primary.mcpe-btn--white{background:#fff!important;color:#3A58EF!important;box-shadow:0 1px 2px rgba(16,24,40,.05);}
.pt4 .mcpe-btn--primary.mcpe-btn--white:hover{background:#EDEEF2!important;color:#334DD2!important;box-shadow:0 4px 10px rgba(16,24,40,.12);transform:translateY(-1px);}
.pt4 .mcpe-btn--primary.mcpe-btn--white:active{background:#DFE1E6!important;color:#2C43B6!important;transform:translateY(1px);}
.pt4 .mcpe-btn--secondary.mcpe-btn--white{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff;}
.pt4 .mcpe-btn--secondary.mcpe-btn--white:hover{background:rgba(255,255,255,.30)!important;}
.pt4 .mcpe-btn--secondary.mcpe-btn--white:active{background:rgba(255,255,255,.42)!important;}
.pt4 .mcpe-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.5)!important;}
.pt4 .mcpe-btn--secondary.mcpe-btn--white:focus-visible{box-shadow:inset 0 0 0 1px #fff,0 0 0 4px rgba(255,255,255,.5)!important;}

/* =========================================================
   HERO
   ========================================================= */
.pt4{
  position:relative;isolation:isolate;overflow:hidden;font-family:var(--font);color:#fff;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(58,88,239,.55), transparent 60%),
    radial-gradient(760px 560px at 85% 55%, rgba(58,88,239,.45), transparent 62%),
    radial-gradient(700px 400px at 55% 115%, rgba(78,105,241,.35), transparent 60%),
    linear-gradient(180deg,#0E2B72 0%,var(--brand-800) 45%,var(--brand-900) 100%);
  padding:72px 0;
}
.pt4 *{box-sizing:border-box;}
.pt4 .container{max-width:1320px;}
.pt4-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 65% 45%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 80% 80% at 65% 45%,#000 10%,transparent 75%);}

/* ---------- left column ---------- */
.pt4-eyebrow{display:flex;width:fit-content;align-items:center;gap:10px;background:#fff;border-radius:500px;padding:4px 16px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;color:#2A3343;}
.pt4-eyebrow i{width:24px;height:24px;display:inline-flex;}
.pt4-eyebrow i svg{width:24px;height:24px;}
.pt4-title{font-size:48px;line-height:60px;letter-spacing:-.96px;font-weight:700;color:#fff;margin:12px 0 0;}
.pt4-sub{margin:16px 0 0;max-width:36em;font-size:20px;line-height:30px;font-weight:500;color:rgba(255,255,255,.88);}
.pt4-points{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.pt4-points li{display:flex;align-items:flex-start;gap:12px;font-size:20px;line-height:30px;font-weight:400;color:#fff;}
.pt4-points .ck{flex:0 0 28px;width:28px;height:28px;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.pt4-points .ck svg{width:14px;height:14px;}
.pt4-cta{display:flex;flex-wrap:wrap;gap:24px;margin-top:36px;}
.pt4-cta .mcpe-btn__icon{transition:transform .2s;}
.pt4-cta .mcpe-btn--primary:hover .mcpe-btn__icon{transform:translateX(4px);}
.pt4-cta .mcpe-btn--secondary:hover .mcpe-btn__icon{transform:scale(1.12);}

/* =========================================================
   RIGHT : VIRTUAL CONFERENCE VENUE
   ========================================================= */
.vc-wrap{position:relative;max-width:640px;margin-left:auto;}
.vc-holder{position:relative;width:100%;height:470px;}
.vc-stage{position:absolute;left:0;top:0;width:640px;height:470px;transform-origin:0 0;}
.vc-halo{position:absolute;left:320px;top:250px;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;
  background:radial-gradient(circle,rgba(120,150,255,.34),rgba(58,88,239,.10) 45%,transparent 70%);filter:blur(10px);pointer-events:none;animation:p4Breathe 7s ease-in-out infinite;}
.is-compact .vc-halo{left:210px;top:170px;}
@keyframes p4Breathe{50%{transform:scale(1.08);opacity:.85;}}

/* cursor parallax (individual `translate` property, never fights keyframe transforms) */
.vc-par{translate:calc(var(--mx,0) * var(--d,0) * 1px) calc(var(--my,0) * var(--d,0) * 1px);transition:translate .5s cubic-bezier(.2,.8,.2,1);}
.vc-fl{position:absolute;z-index:4;animation:vcPop .7s var(--td,0s) cubic-bezier(.2,.8,.2,1) backwards,vcBob var(--bd,7s) calc(var(--td,0s) + .8s) ease-in-out infinite;}
@keyframes vcPop{from{opacity:0;transform:translateY(18px) scale(.94);}}
@keyframes vcBob{50%{transform:translateY(-6px);}}
@keyframes vcPulseG{0%{box-shadow:0 0 0 0 rgba(18,183,106,.6);}70%,100%{box-shadow:0 0 0 6px rgba(18,183,106,0);}}

/* ---------- glass cards ---------- */
.vc-card{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-family:var(--font);color:#fff;
  background:linear-gradient(180deg,rgba(22,44,138,.66),rgba(8,18,68,.76));border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 24px 48px -16px rgba(2,6,30,.7),inset 0 1px 0 rgba(255,255,255,.3);}
.vc-card b{display:block;font:700 13px/18px var(--font);color:#fff;}
.vc-card span.s{display:block;font:500 11px/15px var(--font);color:rgba(255,255,255,.74);}


/* expert card */
.vc-exav{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand-400),var(--brand-600));color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.35);}
.vc-exav svg{width:19px;height:19px;}
.vc-exav u{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--success);border:2px solid #1A3AA8;}

/* Q&A card */
.mp-qa-card{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;width:100%;height:172px;padding:12px 14px;overflow:hidden;}
.mp-qa-h{display:flex;align-items:center;justify-content:space-between;font:700 12px/16px var(--font);color:#fff;}
.mp-qa-h em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-weight:600;font-size:10px;color:#6CE9A6;}
.mp-qa-h em i{width:6px;height:6px;border-radius:50%;background:var(--success);animation:vcPulseG 1.8s ease-out infinite;}

/* CPE card */
.vc-cpe-card{gap:12px;padding:10px 16px 10px 12px;}
.vc-ring{position:relative;flex:0 0 52px;width:52px;height:52px;}
.vc-ring svg{position:absolute;inset:0;width:100%;height:100%;}
.vc-ring circle{fill:none;stroke-width:6;}
.vc-ring .trk{stroke:rgba(255,255,255,.20);}
.vc-ring .bar{stroke:url(#vcRing);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%;animation:vcFill 5.6s 1.5s ease-in-out both;}
.vc-ring .t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 13px/1 var(--font);color:#fff;}
/* plays once (after the card pops in) and stays full */
@keyframes vcFill{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
.vc-cpe-tx{position:relative;min-width:116px;}
.vc-cpe-tx .s1,.vc-cpe-tx .s2{display:block;font:500 11px/15px var(--font);}
.vc-cpe-tx .s1{color:rgba(255,255,255,.74);animation:vcS1 5.8s 1.5s ease both;}
.vc-cpe-tx .s2{position:absolute;left:0;top:18px;color:#6CE9A6;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap;opacity:0;animation:vcS2 5.8s 1.5s ease both;}
.vc-cpe-tx .s2 svg{width:12px;height:12px;}
/* "Session in progress" -> "+1.0 credit earned" once, as the ring completes */
@keyframes vcS1{0%,90%{opacity:1;}100%{opacity:0;}}
@keyframes vcS2{0%,90%{opacity:0;}100%{opacity:1;}}


/* ---------- isometric venue ---------- */
.vv-s{position:absolute;left:0;top:0;width:640px;height:470px;z-index:1;transform-origin:0 0;}
.is-compact .vv-s{transform:scale(.656);}
.vv{position:absolute;inset:0;animation:vvIn 1.1s cubic-bezier(.2,.8,.2,1) both;}
.vv svg{display:block;width:640px;height:470px;overflow:visible;}
@keyframes vvIn{from{opacity:0;transform:translateY(20px) scale(.97);}}
.vb{transform-box:fill-box;transform-origin:50% 100%;animation:vcGrow 1s calc(1.2s + var(--i)*.12s) cubic-bezier(.2,.8,.2,1) both;}
@keyframes vcGrow{from{transform:scaleY(0);}}
.vc-trend{stroke-dasharray:1;stroke-dashoffset:0;animation:vcDraw 1.4s 1.9s ease both;}
@keyframes vcDraw{from{stroke-dashoffset:1;}}
.vfdot{animation:vfBlink 1.6s ease-in-out infinite;}
@keyframes vfBlink{50%{opacity:.35;}}
.vfring{transform-box:fill-box;transform-origin:center;animation:vfRing 2.8s ease-out infinite;}
@keyframes vfRing{0%{transform:scale(.55);opacity:.95;}100%{transform:scale(1.35);opacity:0;}}
.seat .pp{fill:#7B93FF;animation:ppOn 8s var(--dl,0s) infinite;}
.seat .pg{opacity:0;animation:ppGlow 8s var(--dl,0s) infinite;}
@keyframes ppOn{0%,10%{fill:#7B93FF;}18%,58%{fill:#13CDF8;}66%,100%{fill:#7B93FF;}}
@keyframes ppGlow{0%,10%{opacity:0;}18%,58%{opacity:.5;}66%,100%{opacity:0;}}
.seat.hot .pp{animation:none;fill:#6CE9A6;}
.seat.hot .pg{animation:none;opacity:.85;fill:#6CE9A6;}
.bub{opacity:0;animation:bubUp 6.6s var(--dl,0s) ease-out infinite;}
@keyframes bubUp{0%{opacity:0;transform:translateY(8px);}12%{opacity:1;transform:translateY(0);}68%{opacity:1;}100%{opacity:0;transform:translateY(-34px);}}

.vx-expw{left:0;top:26px;--d:18;--td:.6s;--bd:7s;}
.vx-cpew{left:448px;top:2px;--d:20;--td:.8s;--bd:7.5s;}
.vx-qaw{left:468px;top:288px;width:172px;--d:14;--td:1s;--bd:8s;}
.vx-joinw{left:0;top:382px;--d:12;--td:1.2s;--bd:8.5s;}

.vx-join{flex-direction:column;align-items:stretch;gap:9px;}
.vx-join-h{display:flex;align-items:center;gap:10px;}
.vc-pin{flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.vc-pin svg{width:17px;height:17px;}
.vx-dev{display:flex;gap:6px;}
.vx-dev span{flex:1;height:26px;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;color:#fff;}
.vx-dev svg{width:15px;height:15px;}

/* live poll card */
.vx-poll{gap:7px;height:178px;padding:12px 14px;}
.vx-q{font:700 11.5px/15px var(--font);color:#fff;}
.vx-opt .r{display:flex;justify-content:space-between;gap:6px;font:500 10.5px/14px var(--font);color:rgba(255,255,255,.86);}
.vx-opt .r b{display:inline;font:700 10.5px/14px var(--font);color:#fff;font-variant-numeric:tabular-nums;}
.vx-opt .bar{height:5px;margin-top:3px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden;}
.vx-opt .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#7B93FF,#13CDF8);transition:width .9s cubic-bezier(.2,.8,.2,1);}
.vx-opt.lead .bar i{background:linear-gradient(90deg,#13CDF8,#6CE9A6);}
.vx-opt.lead .r b{color:#6CE9A6;}
.vx-votes{font:500 10px/12px var(--font);color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;}
.vx-votes b{display:inline;font:700 10px/12px var(--font);color:#fff;}

/* ---------- compact layout (phones) ---------- */
.is-compact .vx-expw,.is-compact .vx-joinw{display:none;}
.is-compact .vx-qaw{left:0;top:330px;width:206px;}
.is-compact .vx-cpew{left:218px;top:330px;}
.is-compact .vc-cpe-card{gap:10px;padding:10px 12px 10px 10px;}
.is-compact .vc-cpe-tx{min-width:0;}
.is-compact .vc-ring{flex:0 0 44px;width:44px;height:44px;}
.is-compact .vc-ring .t{font-size:12px;}
.is-compact .vc-cpe-tx .s1,.is-compact .vc-cpe-tx .s2{font-size:10px;}
.is-compact .vc-cpe-tx .s2{top:17px;}

/* entrance for left column */
.pt4-copy>*{animation:p4Up .8s cubic-bezier(.2,.8,.2,1) both;}
.pt4-copy>*:nth-child(2){animation-delay:.08s;} .pt4-copy>*:nth-child(3){animation-delay:.16s;} .pt4-copy>*:nth-child(4){animation-delay:.24s;} .pt4-copy>*:nth-child(5){animation-delay:.32s;}
@keyframes p4Up{from{opacity:0;transform:translateY(22px);}}

/* pause the scene when it is off-screen */
.pt4.is-paused .vc-stage *{animation-play-state:paused!important;}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:991.98px){
  .pt4-title{font-size:40px;line-height:48px;letter-spacing:-.8px;}
  .vc-wrap{margin:8px auto 0;}
}
@media (max-width:575.98px){
  .pt4{padding:44px 0 52px;}
  .pt4-title{font-size:32px;line-height:40px;letter-spacing:-.64px;}
  .pt4-sub{font-size:18px;line-height:27px;}
  .pt4-points li{font-size:18px;line-height:27px;} .pt4-points .ck{margin-top:0;}
  .pt4-cta{gap:16px;} .pt4-cta .mcpe-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .pt4 *,.pt4 *::before,.pt4 *::after{animation:none!important;transition:none!important;}
  .vc-ring .bar{stroke-dashoffset:0;}
  .seat .pp{fill:#13CDF8;} .bub{opacity:0;}
  .vc-cpe-tx .s1{opacity:0;} .vc-cpe-tx .s2{opacity:1;}
}

/* =========================================================
   VIDEO POPUP (same as practical-training-programs-landing-page.css)
   ========================================================= */
.Watch_video .modal-content {
    border: 0;
    width: 100%;
    max-width: inherit;
    background: transparent;
}
.Watch_video .modal-header {
    position: relative;
    padding: 0;
}
.Watch_video .modal-header .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #1d46f0;
    opacity: 1;
    padding: 15px;
    border-radius: 50%;
    z-index: 9;
}