/* ==========================================================================
   LUNORIA ACADEMY — MOTION
   One orchestrated moment per event, not constant movement. Respects
   prefers-reduced-motion via main.css's global override.
   ========================================================================== */

/* Page content fade-in (single pass, not per-card) */
.page-enter{ animation: pageEnter 420ms var(--ease) both; }
@keyframes pageEnter{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Question card transition */
.q-card{ animation: qIn 320ms var(--ease) both; }
@keyframes qIn{
  from{ opacity:0; transform: translateX(10px); }
  to{ opacity:1; transform: translateX(0); }
}
.q-card.leaving{ animation: qOut 180ms var(--ease) both; }
@keyframes qOut{
  from{ opacity:1; transform: translateX(0); }
  to{ opacity:0; transform: translateX(-10px); }
}

/* Answer feedback flash */
.flash-good{ animation: flashGood 650ms var(--ease); }
@keyframes flashGood{
  0%{ box-shadow: 0 0 0 0 rgba(127,174,131,0); }
  30%{ box-shadow: 0 0 0 3px var(--good-bg); }
  100%{ box-shadow: 0 0 0 0 rgba(127,174,131,0); }
}
.flash-bad{ animation: flashBad 650ms var(--ease); }
@keyframes flashBad{
  0%{ box-shadow: 0 0 0 0 rgba(181,97,95,0); }
  30%{ box-shadow: 0 0 0 3px var(--bad-bg); }
  100%{ box-shadow: 0 0 0 0 rgba(181,97,95,0); }
}

/* Level up burst */
.levelup-burst{
  position: fixed; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.55);
  z-index: 200;
  animation: fadeBg 220ms var(--ease) both;
}
@keyframes fadeBg{ from{opacity:0;} to{opacity:1;} }

.levelup-card{
  background: var(--panel-raised);
  border: 1px solid var(--gold);
  padding: 40px 54px;
  text-align: center;
  animation: levelPop 520ms var(--ease) both;
  box-shadow: 0 0 60px rgba(212,175,55,.18);
}
@keyframes levelPop{
  0%{ opacity:0; transform: scale(.9); }
  60%{ opacity:1; transform: scale(1.02); }
  100%{ opacity:1; transform: scale(1); }
}
.levelup-number{
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold-bright);
  line-height: 1;
}

/* Achievement toast slide-in */
.toast-stack{
  position: fixed; top: 20px; right: 20px;
  display:flex; flex-direction:column; gap:10px;
  z-index: 300;
}
.toast{
  background: var(--panel-raised);
  border: 1px solid var(--gold-muted);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  min-width: 260px;
  max-width: 320px;
  animation: toastIn 360ms var(--ease) both;
  display:flex; gap: 12px; align-items:flex-start;
}
.toast.leaving{ animation: toastOut 260ms var(--ease) both; }
@keyframes toastIn{
  from{ opacity:0; transform: translateX(30px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes toastOut{
  from{ opacity:1; transform: translateX(0); }
  to{ opacity:0; transform: translateX(30px); }
}

@media (max-width: 600px){
  .toast-stack{ left: 12px; right: 12px; top: 12px; }
  .toast{ max-width: none; width: 100%; }
}

/* Reward chest / card reveal */
.reveal{
  animation: revealIn 560ms var(--ease) both;
}
@keyframes revealIn{
  0%{ opacity:0; transform: translateY(14px) scale(.98); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

/* Claim code shimmer (subtle, not neon) */
.claim-code{
  position: relative;
  overflow: hidden;
}
.claim-code::after{
  content:"";
  position:absolute; top:0; bottom:0; width: 60%;
  background: linear-gradient(100deg, transparent, rgba(241,215,106,.09), transparent);
  left: -60%;
  animation: codeShine 3.4s ease-in-out infinite;
}
@keyframes codeShine{
  0%{ left: -60%; }
  45%, 100%{ left: 120%; }
}

/* Progress ring stroke animation driven by JS stroke-dashoffset transition */
.ring-fg{ transition: stroke-dashoffset 900ms var(--ease); }

/* Hover elevation (used only on genuinely interactive elements, not everything) */
.elevate:hover{ transform: translateY(-2px); }

/* Background particles — faint drifting motes, very low opacity, capped count */
.particle-field{
  position: fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.particle{
  position:absolute;
  width: 3px; height:3px;
  background: var(--gold-muted);
  border-radius: 50%;
  opacity: .25;
  animation: drift linear infinite;
}
@keyframes drift{
  from{ transform: translateY(0); }
  to{ transform: translateY(-110vh); }
}

/* Lock icon pulse on hover only (not idle) */
.locked:hover .lock-icon{ transform: scale(1.1); }
.lock-icon{ transition: transform var(--dur-fast) var(--ease); }