/* Motion lessons — one motion language for every course.
   Landscape and portrait are both first-class; nothing clips (scenes scroll as a last resort). */
.ms-wrap{margin:6px 0 4px;}
.ms-stage{
  position:relative;aspect-ratio:16/9;min-height:300px;background:#0B2559;border-radius:14px;
  overflow:hidden;color:#FAFBFD;font-family:var(--sans,'Poppins',system-ui,Arial,sans-serif);
}
.ms-ring{position:absolute;top:16px;right:18px;width:14px;height:14px;border-radius:50%;border:3px solid #1D4ED8;z-index:3;}
.ms-ring::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#38BDF8;}

.ms-scene{
  position:absolute;inset:0;padding:clamp(20px,4.2vw,44px);padding-bottom:clamp(58px,10vw,86px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.6vw,16px);
  opacity:0;visibility:hidden;transition:opacity .32s ease;overflow:auto;
}
.ms-scene.on{opacity:1;visibility:visible;}

.ms-beat{display:block;opacity:0;transform:translateY(10px);transition:opacity .42s ease,transform .42s ease;}
.ms-beat.on{opacity:1;transform:none;}
.ms-beat.dim{opacity:.45;}

.ms-kicker{font-size:clamp(10px,1.5vw,12px);letter-spacing:.16em;text-transform:uppercase;color:#7F9DD6;font-weight:500;margin:0 0 8px;}
.ms-h1{font-size:clamp(21px,4.4vw,40px);line-height:1.08;font-weight:600;letter-spacing:-.02em;margin:0;color:#FAFBFD;}
.ms-h2{font-size:clamp(18px,3.4vw,30px);line-height:1.18;font-weight:600;letter-spacing:-.015em;margin:0;color:#FAFBFD;}
.ms-sub{font-size:clamp(13px,1.9vw,17px);line-height:1.5;color:#B4C5E6;font-weight:300;margin:10px 0 0;max-width:40ch;}
.ms-sit{font-size:clamp(13px,1.9vw,17px);color:#E7EDFA;font-weight:300;margin:0;max-width:44ch;}

.ms-tag{display:inline-block;font-size:clamp(9px,1.2vw,10.5px);letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:3px;margin-bottom:7px;}
.t-weak{background:#2F4A86;color:#C6D4EC;}
.t-strong{background:#38BDF8;color:#0B2559;}
.ms-msg{background:#0D2E63;border-left:3px solid #6F86C0;padding:clamp(9px,1.6vw,14px) clamp(11px,1.8vw,16px);
  font-size:clamp(12px,1.7vw,14.5px);line-height:1.55;color:#D3DEF2;font-weight:300;max-width:52ch;}
.ms-msg.good{border-left-color:#38BDF8;}
.ms-item{margin:0;display:flex;gap:12px;align-items:baseline;font-size:clamp(12px,1.7vw,15px);}
.ms-item b{color:#FAFBFD;font-weight:600;min-width:9em;}
.ms-item span{color:#B4C5E6;font-weight:300;}

/* caption + progress */
.ms-cap{position:absolute;left:0;right:0;bottom:12px;padding:0 clamp(16px,3vw,34px);text-align:center;z-index:2;
  font-size:clamp(11.5px,1.6vw,13.5px);line-height:1.85;color:#E7EDFA;font-weight:300;pointer-events:none;}
.ms-line{display:none;}
.ms-line.on{display:inline;background:rgba(0,0,0,.42);padding:4px 9px;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.ms-cap span.cap-on{color:#38BDF8;font-weight:500;}
.ms-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14);z-index:3;}
.ms-prog i{display:block;height:100%;width:0;background:#38BDF8;}

/* controls under the stage */
.ms-bar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.ms-btn{appearance:none;border:1px solid var(--line,#E4E9F0);background:#fff;color:var(--petrol,#0B2559);
  font:inherit;font-size:14px;font-weight:500;padding:9px 15px;border-radius:9px;cursor:pointer;}
.ms-btn:hover{border-color:var(--teal,#1D4ED8);}
.ms-btn.primary{background:var(--petrol,#0B2559);color:#fff;border-color:var(--petrol,#0B2559);}
.ms-hint{font-size:13px;color:var(--muted,#64748B);}

/* portrait / narrow: taller stage so type stays legible instead of letterboxed */
@media (max-width:700px), (orientation:portrait){
  .ms-stage{aspect-ratio:4/5;min-height:340px;}
  .ms-item{flex-direction:column;gap:2px;}
  .ms-item b{min-width:0;}
}
@media (prefers-reduced-motion:reduce){
  .ms-scene,.ms-beat{transition:none!important;transform:none!important;}
}