/* J Online Classes v1.0.1 — brand refresh and animated learning scenes */
.learning-motion-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  background:#1b0d0a url('../images/learning-motion-poster.webp') center/cover no-repeat;
}

.auth-page-motion .auth-panel{
  position:relative;
  z-index:2;
  box-shadow:22px 0 55px rgba(15,7,5,.14);
}

.auth-page-motion .auth-panel .brand img{
  width:68px;
  height:68px;
  object-fit:contain;
}

.auth-learning-visual{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#1b0d0a url('../images/learning-motion-poster.webp') center/cover no-repeat;
}

.auth-learning-visual .motion-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(10,5,4,.12),rgba(10,5,4,.52)),
    linear-gradient(90deg,rgba(46,20,15,.78),rgba(46,20,15,.2) 72%);
}

.auth-visual-content{
  position:relative;
  z-index:2;
  width:min(760px,100%);
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}

.auth-learning-visual .auth-cards article{
  background:rgba(20,10,8,.46);
  border-color:rgba(255,255,255,.26);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.auth-learning-visual .auth-cards article:hover{
  transform:translateY(-4px);
  border-color:rgba(212,175,55,.75);
  background:rgba(49,23,18,.66);
}

.learning-motion-card{
  background:#1b0d0a url('../images/learning-motion-poster.webp') center/cover no-repeat;
  isolation:isolate;
}

.product-motion-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(7,4,3,.05) 25%,rgba(7,4,3,.78) 100%);
}

.learning-motion-card .video-caption{z-index:4}
.learning-motion-card .play-orb{z-index:3;background:rgba(212,175,55,.92);backdrop-filter:blur(5px)}

.learning-live{
  position:absolute;
  left:15px;
  top:15px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(11,11,13,.34);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.learning-live i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#55e8a7;
  box-shadow:0 0 0 5px rgba(85,232,167,.17);
  animation:learningLive 1.8s ease-in-out infinite;
}

.motion-pulse{animation:motionPulse 2.8s ease-in-out infinite}

@keyframes motionPulse{
  0%,100%{transform:scale(1);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 0 rgba(212,175,55,.25)}
  50%{transform:scale(1.06);box-shadow:0 14px 36px rgba(0,0,0,.38),0 0 0 16px rgba(212,175,55,0)}
}

@keyframes learningLive{
  0%,100%{opacity:.55;transform:scale(.82)}
  50%{opacity:1;transform:scale(1)}
}

@media(max-width:1050px){
  .auth-learning-visual{
    display:flex;
    min-height:560px;
    padding:70px clamp(25px,8vw,80px);
  }
  .auth-learning-visual h2{font-size:clamp(2.8rem,8vw,4rem)}
}

@media(max-width:640px){
  .auth-learning-visual{min-height:690px;padding:55px 25px}
  .auth-learning-visual .auth-cards{grid-template-columns:1fr}
  .auth-learning-visual .auth-cards article{padding:15px}
  .auth-learning-visual .auth-cards b{margin:7px 0 2px}
  .learning-live{font-size:.58rem}
}

@media(prefers-reduced-motion:reduce){
  .learning-motion-media{display:none}
  .motion-pulse,.learning-live i{animation:none}
  .auth-learning-visual .auth-cards article{transition:none}
}