/* Fixed73 — JClass motion & interaction layer */
:root{--j-motion:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.jclass-splash{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#f7f8fb;transition:opacity .45s var(--j-motion),visibility .45s}
[data-theme="dark"] .jclass-splash{background:#0d1017}
.jclass-splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.jclass-splash-inner{text-align:center;transform:translateY(-2vh)}
.jclass-splash-logo{width:118px;height:118px;filter:drop-shadow(0 18px 28px rgba(15,18,25,.18));animation:jSplashFloat 1.6s var(--j-motion) infinite alternate}
.jclass-splash-word{margin-top:18px;font-weight:900;letter-spacing:.18em;font-size:18px;color:#111827}
[data-theme="dark"] .jclass-splash-word{color:#fff}
.jclass-splash-word span{color:#ef3f43}
.jclass-splash-line{width:150px;height:3px;margin:18px auto 0;border-radius:999px;background:rgba(120,128,145,.2);overflow:hidden}
.jclass-splash-line i{display:block;width:45%;height:100%;border-radius:inherit;background:#ef3f43;animation:jLoad 1.05s var(--j-motion) infinite}
@keyframes jLoad{from{transform:translateX(-120%)}to{transform:translateX(340%)}}
@keyframes jSplashFloat{to{transform:translateY(-7px) rotate(-1deg)}}

body.j-ready .landing-brand-layout{animation:jReveal .75s var(--j-motion) both}
body.j-ready .join-card{animation:jReveal .75s .12s var(--j-motion) both}
@keyframes jReveal{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
.brand-symbol-stage{position:relative}
.brand-symbol-stage:after{content:"";position:absolute;inset:18% 10%;z-index:-1;background:radial-gradient(circle,rgba(239,63,67,.22),transparent 68%);filter:blur(22px);animation:jGlow 3s ease-in-out infinite alternate}
@keyframes jGlow{to{transform:scale(1.14);opacity:.55}}
.brand-symbol-hero{animation:jHeroFloat 4s ease-in-out infinite}
@keyframes jHeroFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1deg)}}

.app-view:not(.hidden){animation:jAppIn .48s var(--j-motion) both}
@keyframes jAppIn{from{opacity:0;transform:scale(.992)}to{opacity:1;transform:none}}
.panel,.join-card,.modal-card,.problem-status,.engine-status-card{transition:transform .22s var(--j-motion),box-shadow .22s var(--j-motion),border-color .22s}
@media (hover:hover){.join-card:hover,.engine-status-card:hover{transform:translateY(-3px)}}
button{transition:transform .15s var(--j-motion),box-shadow .2s,background-color .2s,border-color .2s,opacity .2s}
button:active:not(:disabled){transform:translateY(1px) scale(.985)}
.primary:not(:disabled):hover{box-shadow:0 10px 24px rgba(239,63,67,.24)}

.modal:not(.hidden){animation:jModalFade .22s ease-out both}
.modal:not(.hidden) .modal-card{animation:jModalCard .32s var(--j-motion) both}
@keyframes jModalFade{from{opacity:0}to{opacity:1}}
@keyframes jModalCard{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}

#runBtn.is-running,.mobile-run.is-running{pointer-events:none;position:relative;overflow:hidden}
#runBtn.is-running span,.mobile-run.is-running .mobile-nav-icon{animation:jSpin .8s linear infinite}
#runBtn.is-running:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:jShimmer 1s linear infinite}
@keyframes jSpin{to{transform:rotate(360deg)}}
@keyframes jShimmer{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

.j-save-state{display:inline-flex;align-items:center;gap:6px;min-width:72px;color:#7b8494;font-size:11px;font-weight:700;white-space:nowrap}
.j-save-state:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.j-save-state.is-saving:before{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.13);animation:jPulse .7s infinite alternate}
@keyframes jPulse{to{opacity:.4;transform:scale(.8)}}

.code-area:focus-within{box-shadow:inset 3px 0 0 #ef3f43}
#codeInput,#problemCode{caret-color:#ef3f43}
.toast:not(:empty){animation:jToastIn .3s var(--j-motion) both}
@keyframes jToastIn{from{opacity:0;transform:translate(-50%,12px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}