/* ============================================================
   NotePlus — Hero "Study Squad" carousel
   Namespaced .npc-* ; inherits noteplus-play.css tokens.
   Display: Nunito (--np-font-chunky) · Body: Plus Jakarta (--np-font-display)
   ============================================================ */
/* No card chrome — the carousel merges directly into the hero.
   padding-bottom reserves a clean strip for the dots/arrows beneath the slide. */
.npc{position:relative;padding-bottom:12px;}
.npc-vp{position:relative;height:clamp(450px,56vh,492px);}
/* tighten the hero band so the whole carousel fits a laptop screen */
.mk-r .mk-hero{padding:30px 0 34px;}
/* hide the amber ambient orb the parallax JS injects (the orange blob) */
.mk-hero .np-orb.o3{display:none;}
.npc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:52px;padding:0;}
.npc-slide.is-active{opacity:1;visibility:visible;}

/* per-character glow only — soft, transparent, sits behind the mascot and
   fades into the page so the hero stays one continuous surface */
.npc-s1{background:radial-gradient(46% 62% at 74% 44%,rgba(139,92,246,.16),transparent 72%);}
.npc-s2{background:radial-gradient(46% 62% at 74% 44%,rgba(16,185,129,.16),transparent 72%);}
.npc-s3{background:radial-gradient(46% 62% at 74% 44%,rgba(249,115,22,.16),transparent 72%);}
.npc-s4{background:radial-gradient(46% 62% at 74% 44%,rgba(245,158,11,.18),transparent 72%);}
.npc-s5{background:radial-gradient(46% 62% at 74% 44%,rgba(59,130,246,.16),transparent 72%);}
.npc-s6{background:radial-gradient(46% 62% at 74% 44%,rgba(185,138,94,.18),transparent 72%);}
.npc-s7{background:radial-gradient(52% 62% at 70% 46%,rgba(16,185,129,.14),transparent 72%);}

.npc-copy{position:relative;z-index:3;}
.npc-copy>*{opacity:0;transform:translateY(16px);}
.is-active .npc-copy>*{animation:npcRise .6s cubic-bezier(.22,.61,.36,1) forwards;}
.is-active .npc-copy>*:nth-child(1){animation-delay:.04s;}
.is-active .npc-copy>*:nth-child(2){animation-delay:.11s;}
.is-active .npc-copy>*:nth-child(3){animation-delay:.18s;}
.is-active .npc-copy>*:nth-child(4){animation-delay:.25s;}
.is-active .npc-copy>*:nth-child(5){animation-delay:.32s;}
@keyframes npcRise{to{opacity:1;transform:none;}}

.npc-kicker{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:6px 8px 6px 14px;
  font-family:var(--np-font-chunky);font-weight:800;font-size:12.5px;color:var(--np-ink-muted);box-shadow:0 4px 14px rgba(15,23,42,.08);}
.npc-num{font-size:11px;color:#fff;border-radius:999px;padding:3px 10px;font-weight:900;}
.npc-h{font-family:var(--np-font-chunky);font-weight:900;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.02em;margin:12px 0 0;color:var(--np-ink);}
.npc-h .hl{position:relative;white-space:nowrap;}
.npc-h .hl i{position:absolute;left:-2px;right:-2px;bottom:5px;height:13px;border-radius:8px;z-index:-1;opacity:.4;display:block;}
.npc-p{font-family:var(--np-font-display);font-size:15px;color:var(--np-ink-muted);line-height:1.6;margin:13px 0 0;max-width:430px;font-weight:500;}

/* character nameplate caption */
.npc-namecard{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:10px 15px;margin-top:16px;max-width:445px;
  box-shadow:0 16px 34px -20px rgba(15,23,42,.4);border:1px solid var(--np-border-2);}
.npc-av{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.npc-nm{font-family:var(--np-font-chunky);font-weight:900;font-size:18px;color:var(--np-ink);line-height:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.npc-rl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:6px;padding:2px 7px;color:#fff;font-family:var(--np-font-display);}
.npc-ds{font-family:var(--np-font-display);font-size:12.5px;color:var(--np-ink-muted);margin-top:5px;font-weight:600;font-style:italic;}
.npc-traits{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.npc-traits span{font-family:var(--np-font-display);font-size:10.5px;font-weight:700;background:var(--np-surface-2);color:var(--np-ink-muted);border-radius:7px;padding:3px 9px;}
.npc-cta{margin-top:16px;}
.npc-cta .mk-trust{margin-top:12px;}

/* stage + characters */
.npc-stage{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;}
.npc-svg{width:clamp(200px,23vw,266px);height:auto;filter:drop-shadow(0 24px 28px rgba(15,23,42,.16));}
.is-active .npc-svg{animation:npcEnter .7s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes npcEnter{from{opacity:0;transform:translateY(28px) scale(.86);}to{opacity:1;transform:none;}}
.npc-boing{animation:npcBoing 4.5s ease-in-out infinite;transform-origin:bottom center;}
@keyframes npcBoing{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-11px) rotate(-1.5deg);}}

/* floating bubbles + doodles */
.npc-bub{position:absolute;background:#fff;border-radius:15px;padding:10px 14px;display:flex;align-items:center;gap:9px;
  box-shadow:0 18px 34px -16px rgba(15,23,42,.4);font-family:var(--np-font-chunky);font-weight:800;font-size:13px;color:var(--np-ink);z-index:4;max-width:205px;}
.npc-bub .e{font-size:17px;flex-shrink:0;}
.npc-bub small{display:block;font-family:var(--np-font-display);font-weight:600;font-size:10.5px;color:var(--np-ink-muted);margin-top:1px;}
.is-active .npc-bub{animation:npcPop .6s cubic-bezier(.34,1.56,.64,1) both;}
.is-active .npc-bub.d2{animation-delay:.25s;}
.is-active .npc-bub.d3{animation-delay:.45s;}
@keyframes npcPop{from{opacity:0;transform:translateY(14px) scale(.8);}to{opacity:1;transform:none;}}
.npc-float{animation:npcBob 5s ease-in-out infinite;}
.npc-float.b2{animation-delay:1.6s;}
.npc-float.b3{animation-delay:.8s;}
@keyframes npcBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.npc-doodle{position:absolute;font-size:22px;z-index:3;animation:npcTw 3.5s ease-in-out infinite;}
.npc-doodle.t2{animation-delay:1.2s;}
.npc-doodle.t3{animation-delay:2s;}
@keyframes npcTw{0%,100%{transform:scale(1) rotate(0);opacity:.5;}50%{transform:scale(1.25) rotate(12deg);opacity:1;}}
.npc-ring{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.npc-ring i{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--np-font-chunky);font-weight:900;font-size:12.5px;color:var(--np-ink);font-style:normal;}

/* squad row */
.npc-squad{display:flex;align-items:flex-end;justify-content:center;}
.npc-squad svg{width:clamp(80px,11vw,124px);height:auto;margin:0 -18px;filter:drop-shadow(0 14px 18px rgba(15,23,42,.16));}
.npc-squad .m1{animation:npcBoing 4.5s ease-in-out 0s infinite;}
.npc-squad .m2{animation:npcBoing 4.5s ease-in-out .3s infinite;z-index:3;}
.npc-squad .m3{animation:npcBoing 4.5s ease-in-out .6s infinite;}
.npc-squad .m4{animation:npcBoing 4.5s ease-in-out .9s infinite;}
.npc-squad .m5{animation:npcBoing 4.5s ease-in-out 1.2s infinite;}
.npc-squad .m6{animation:npcBoing 4.5s ease-in-out 1.5s infinite;}

/* controls */
.npc-dots{display:none;}
.npc-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(15,23,42,.18);cursor:pointer;padding:0;transition:.25s;}
.npc-dots button.on{width:28px;border-radius:6px;background:var(--np-brand);}
.npc-arrow{position:absolute;z-index:6;bottom:2px;width:42px;height:42px;border-radius:50%;background:#fff;cursor:pointer;
  border:1px solid var(--np-border-2);display:flex;align-items:center;justify-content:center;color:var(--np-ink);
  box-shadow:0 4px 12px -6px rgba(15,23,42,.22);transition:.14s;}
.npc-arrow:hover{transform:translateY(-2px);border-color:var(--np-brand-light);}
.npc-arrow:active{transform:translateY(1px);}
.npc-arrow svg{width:18px;height:18px;}
.npc-arrow.prev{right:52px;}
.npc-arrow.next{right:0;}
.npc-timer{display:none;}

/* ---- Mobile / tablet: a distinct, stacked carousel ----
   Mascot on top, centered copy beneath, dots centered in-flow.
   CSS media queries swap this in automatically as the window resizes. */
@media (max-width:980px){
  .npc{padding-bottom:0;}
  .npc-vp{height:auto;}
  .npc-slide{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:4px 0 4px;}
  .npc-slide:not(.is-active){display:none;}
  .npc-stage{order:1;width:100%;height:auto;}
  .npc-copy{order:2;width:100%;}
  .npc-svg{width:clamp(140px,40vw,184px);margin:0;}
  .npc-bub,.npc-doodle,.npc-arrow{display:none;}
  .npc-kicker{margin:0 auto;}
  .npc-h{font-size:clamp(28px,8vw,40px);margin-top:12px;}
  .npc-p{font-size:15px;margin-left:auto;margin-right:auto;}
  .npc-namecard{margin:16px auto 0;text-align:left;}
  .npc-slide .mk-cta-row{justify-content:center !important;}
  .npc-dots{position:static;left:auto;transform:none;justify-content:center;width:100%;margin-top:18px;}
}
@media (max-width:600px){
  .npc-namecard{max-width:none;width:100%;}
  .npc-h{font-size:clamp(26px,8.5vw,34px);}
  .npc-p{font-size:14.5px;}
  .npc-slide .mk-cta-row .np-btn{flex:1 1 auto;justify-content:center;}
}