/* ============================================================
   LIBNEXT JAPANESE LANGUAGE LAB — motion
   Every animation is disabled under prefers-reduced-motion.
   ============================================================ */

@keyframes spin{to{transform:rotate(360deg)}}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@keyframes pop{
  0%{transform:scale(.94)}
  55%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-6px)}
  38%{transform:translateX(5px)}
  58%{transform:translateX(-4px)}
  78%{transform:translateX(3px)}
}

@keyframes petalFall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}
  10%{opacity:1}
  100%{transform:translate3d(var(--dx,20px),108vh,0) rotate(var(--rot,420deg));opacity:0}
}

@keyframes ringDraw{from{stroke-dashoffset:var(--circ)}to{stroke-dashoffset:var(--target)}}

@keyframes slideUpToast{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,90,131,.4)}
  50%{box-shadow:0 0 0 10px rgba(224,90,131,0)}
}

/* --- applied --- */
.view{animation:fadeUp .34s cubic-bezier(.2,.8,.25,1) both}
.stagger>*{animation:fadeUp .38s cubic-bezier(.2,.8,.25,1) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.05s}
.stagger>*:nth-child(3){animation-delay:.08s}
.stagger>*:nth-child(4){animation-delay:.11s}
.stagger>*:nth-child(5){animation-delay:.14s}
.stagger>*:nth-child(6){animation-delay:.17s}
.stagger>*:nth-child(7){animation-delay:.2s}
.stagger>*:nth-child(8){animation-delay:.23s}
.stagger>*:nth-child(n+9){animation-delay:.26s}

.quiz-card{animation:fadeUp .3s cubic-bezier(.2,.8,.25,1) both}
.choice.correct{animation:pop .34s cubic-bezier(.2,.8,.25,1)}
.choice.wrong,.typebox input.wrong{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
.feedback{animation:fadeUp .26s cubic-bezier(.2,.8,.25,1) both}
.modal{animation:pop .28s cubic-bezier(.2,.8,.25,1) both}
.modal-back{animation:fadeIn .2s ease both}
.toast{animation:slideUpToast .32s cubic-bezier(.2,.8,.25,1) both}
.lesson-card.current .lc-badge{animation:glowPulse 2.6s ease-in-out infinite}
.result .ring circle.val{animation:ringDraw 1.1s cubic-bezier(.2,.8,.25,1) both}

/* confetti — sakura petals, deliberately sparse */
.petal-host{position:fixed;inset:0;pointer-events:none;z-index:190;overflow:hidden}
.petal{position:absolute;top:0;width:11px;height:11px;border-radius:11px 1px 11px 1px;
  background:var(--sakura-400);opacity:.9;
  animation:petalFall var(--dur,3.2s) cubic-bezier(.3,.4,.6,1) forwards}
.petal:nth-child(3n){background:var(--sakura-200)}
.petal:nth-child(4n){background:var(--kohaku-500);width:8px;height:8px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
  .petal-host{display:none}
  .fc-inner{transition:none}
  .fc.flip .fc-inner{transform:rotateY(180deg)}
}