/* Lantern Tutor motion (see motion.js). Everything here switches off under prefers-reduced-motion. */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .55s var(--ease) var(--d,0ms),transform .55s var(--ease) var(--d,0ms)}
.tile{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(31,30,38,.45)}
.btn,button{transition:background .2s,transform .15s var(--ease)}
.btn:active,button:active{transform:scale(.97)}

/* hero object on the front page */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-obj{position:relative;height:340px}
.hero-obj lantern-3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-stand{position:absolute;left:50%;top:50%;width:min(60%,240px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 200deg,#fff,#c9c2dc,#fff,#9b93b4,#e6e1f2,#dce7f0,#fff);box-shadow:inset 0 0 0 1px rgba(31,30,38,.12);transition:opacity .6s}
lantern-3d.ready .hero-stand{opacity:0}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-obj{height:240px;order:-1}}

/* lesson step mode */
.stepbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line)}
.stepbar::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--lilac)}
.stepbar__fill{position:absolute;left:0;bottom:-1px;height:3px;background:var(--acc);width:0;transition:width .45s var(--ease);z-index:1}
.stepbar__n{font-size:13px;color:var(--soft);flex:1}
.steps > li.now{animation:stepin .45s var(--ease) both}
@keyframes stepin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.stepnext{margin-top:12px}

/* answers and mark schemes open smoothly */
details[open] > :not(summary){animation:open .35s var(--ease) both}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* chat */
.msg.assistant:last-of-type{animation:msgin .5s var(--ease) both}
@keyframes msgin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.msg.thinking{display:flex;gap:6px;padding:16px 18px}
.msg.thinking i{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:dot 1.2s infinite ease-in-out}
.msg.thinking i:nth-child(2){animation-delay:.15s}.msg.thinking i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}
button.busy{opacity:.75;cursor:progress}

/* lesson done stamp */
.stamp{display:inline-block;animation:stamp .6s var(--ease) both}
@keyframes stamp{0%{transform:scale(2) rotate(-12deg);opacity:0}60%{transform:scale(.92) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
}