/* Original MU Online character portraits; movement stays inside the stage. */
#class-title { white-space:nowrap; font-size:clamp(26px,4.3vw,64px); letter-spacing:-1px; }
.classes .section-heading { flex-wrap:wrap; }
@media(max-width:760px) { #class-title { font-size:clamp(26px,6.7vw,48px); } }
.class-layout { grid-template-columns:25% 42% 33%; min-height:430px; }
.class-portrait { height:430px; isolation:auto; background:none; margin-inline:0; }
.class-aura { position:absolute; inset:8% 0; border-radius:50%; background:radial-gradient(ellipse,#c49a4a16,transparent 68%); }
.class-portrait .orbit { z-index:0; opacity:.55; }
.class-character {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  mix-blend-mode:lighten; opacity:0; transform:translateX(58px);
  pointer-events:none; z-index:1;
  mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);
  transition:opacity .5s ease,transform .65s cubic-bezier(.2,.75,.2,1);
}
.class-character.is-visible { opacity:1; transform:translateX(0); }
.class-portrait .portrait-caption { z-index:2; bottom:16px; }
@media(max-width:1050px) and (min-width:761px) {
  .class-layout { grid-template-columns:27% 37% 36%; }
  .class-portrait { height:360px; }
}
@media(max-width:760px) {
  .class-layout { grid-template-columns:1fr; }
  .class-tabs { grid-column:1; margin-bottom:8px; max-width:100%; }
  .class-portrait { height:clamp(240px,65vw,360px); margin:0 -12px 10px; }
  .class-character { width:100%; }
  .class-portrait .portrait-caption { bottom:4px; font-size:8px; letter-spacing:2px; }
  .class-detail { padding:14px 0 0; }
  .class-detail h3 { font-size:38px; margin:12px 0; }
  .class-detail p { font-size:14px; }
  .class-detail dl { font-size:12px; }
  .class-detail dl>div { display:flex; }
  .class-detail dd { margin:0; }
}
@media(prefers-reduced-motion:reduce) {
  .class-character { transition:none; transform:none; }
}