/* Original event-led motion. Load after style.css; no assets or libraries required. */
:root {
  --delight-ease: cubic-bezier(.16, 1, .3, 1);
  --delight-spring: cubic-bezier(.22, 1.3, .36, 1);
  --delight-warm: #d58a54;
  --delight-leaf: #719553;
}

/* The existing icon is a real SVG flame. Keep its readable silhouette at rest. */
.flame-stat .icon {
  fill: #f4b86d;
  stroke: #c87943;
  transform-box: fill-box;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 2px 4px #d58a5420);
  animation: delight-flame 2.6s ease-in-out 3;
}
.flame-stat:hover .icon, .flame-stat:focus-visible .icon {
  animation: delight-flame .9s ease-in-out 2;
}
.streak-line .icon { fill: #f4bb742b; }

/* A few quiet pulses point to the next lesson, then leave the route still. */
.current .node-circle { position: relative; isolation: isolate; }
.current .node-circle::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1.5px solid #d58a545c;
  border-radius: 45%;
  opacity: 0;
  pointer-events: none;
  animation: delight-node-ring 2.7s ease-out 3;
}
.lesson-node.just-unlocked .node-circle { animation: delight-unlock .66s var(--delight-spring) both; }
.lesson-node.just-unlocked .node-circle .icon { animation: delight-icon-land .7s var(--delight-spring) both; }
.lesson-node:active .node-circle { transform: translateY(2px) scale(.96); }
.node-circle { transition: background .2s, transform .2s var(--delight-ease), box-shadow .2s; }

/* task-enter belongs on a new task only, never on a token or option rerender. */
.lesson-shell .learn-card, .lesson-shell .prompt-card { animation: none; }
.lesson-shell.task-enter .learn-card,
.lesson-shell.task-enter .prompt-card { animation: delight-card-arrive .46s var(--delight-ease) both; }
.lesson-shell.task-enter .answer-grid,
.lesson-shell.task-enter #answer-form,
.lesson-shell.task-enter .match-columns,
.lesson-shell.task-enter .token-bank { animation: delight-controls-arrive .42s var(--delight-ease) .055s both; }
.answer-option:active:not(:disabled), .build-token:active:not(:disabled) { transform: translateY(2px) scale(.985); }
.answer-option.selected .option-key { transition: background .2s, color .2s, transform .2s; transform: scale(1.06); }
.built-token.token-enter { animation: delight-token-land .2s var(--delight-ease) both; }
.match-card.just-matched .icon { animation: delight-check-land .36s var(--delight-spring) both; }

/* Feedback stays local to the answer. No full-screen flashing or shaking. */
.lesson-shell.answer-correct .answer-option.is-correct,
.lesson-shell.answer-correct .input-correct,
.lesson-shell.answer-correct .build-correct { animation: delight-answer-correct .58s var(--delight-ease) both; }
.lesson-shell.answer-wrong .answer-option.is-wrong,
.lesson-shell.answer-wrong .input-wrong,
.lesson-shell.answer-wrong .build-wrong { animation: delight-answer-nudge .36s ease-in-out both; }
.feedback-correct .feedback-icon { animation: delight-check-land .42s var(--delight-spring) both; }
.feedback-correct .feedback-icon .icon path {
  stroke-dasharray: 28;
  stroke-dashoffset: 0;
  animation: delight-check-draw .32s ease-out .08s both;
}
.answer-footer.feedback-correct { box-shadow: 0 -5px 26px #90ad6d0b; }

/* Brief, nonblocking event overlays. Remove their nodes after 2200 / 1500 ms. */
.combo-toast {
  position: fixed;
  z-index: 30;
  top: max(85px, calc(env(safe-area-inset-top) + 74px));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100vw - 36px);
  padding: 11px 17px;
  border: 1px solid #ead7a9;
  border-radius: 50px;
  color: #846428;
  background: #fff9e9;
  box-shadow: 0 8px 26px #71572810;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: delight-combo 2.2s var(--delight-ease) both;
}
.combo-toast .icon { width: 18px; height: 18px; flex-shrink: 0; color: #b38b3b; }
.combo-toast::before, .combo-toast::after {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  top: 7px;
  background: #d4af63;
  border-radius: 1px;
  transform: rotate(45deg);
}
.combo-toast::before { left: -11px; }
.combo-toast::after { right: -10px; top: 25px; width: 4px; height: 4px; }
.xp-pop {
  position: fixed;
  z-index: 35;
  left: var(--xp-x, 50%);
  top: var(--xp-y, 110px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 20px;
  border: 1px solid #ead9ac;
  background: #fffaeb;
  color: #967128;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: delight-xp-float 1.5s var(--delight-ease) both;
}
.xp-pop .icon { width: 15px; height: 15px; fill: #e9c76e66; }

.streak-celebration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 350px;
  margin: 20px auto;
  padding: 16px 20px;
  border: 1px solid #ecd7b9;
  border-radius: 16px;
  background: #fff7e9;
  color: #916539;
  text-align: left;
  animation: delight-card-arrive .5s var(--delight-ease) both;
}
.streak-celebration > .icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  fill: #f4b86d;
  stroke: #ca7943;
  transform-origin: 50% 85%;
  animation: delight-flame 1.1s ease-in-out 2;
}
.streak-celebration strong { display: block; font-size: 15px; line-height: 1.5; }
.streak-celebration small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.6; color: #927657; }
.day.done.today > div { animation: delight-day-land .5s var(--delight-spring) both; }
.day.done.today .icon { animation: delight-check-land .42s var(--delight-spring) .08s both; }

.goal-ring { transition: box-shadow .35s, background .45s; }
.goal-ring.goal-complete { box-shadow: 0 0 0 4px #e8ecd944; }
.goal-ring.goal-just-reached { animation: delight-goal-land .72s var(--delight-ease) both; }
.goal-ring.goal-just-reached::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid #a7b87c;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: delight-goal-ring .85s ease-out both;
}
.goal-ring.goal-just-reached > .icon { animation: delight-check-land .5s var(--delight-spring) .12s both; }

/* The fox keeps its existing slow breathing loop. Its surroundings welcome once. */
.summary-art { animation: delight-mascot-arrive .65s var(--delight-ease) both; }
.summary-halo { animation: delight-halo-arrive .85s var(--delight-ease) both; }
.summary-spark { animation: delight-spark-arrive .75s var(--delight-ease) .12s both; }
.summary-stats > div { animation: delight-controls-arrive .5s var(--delight-ease) both; }
.summary-stats > div:nth-child(2) { animation-delay: .06s; }
.summary-stats > div:nth-child(3) { animation-delay: .12s; }
.new-achievement { animation: delight-card-arrive .58s var(--delight-ease) .12s both; }
.new-achievement > .icon:first-child { animation: delight-award-land .72s var(--delight-ease) .2s both; }
.confetti i { animation-name: delight-confetti; animation-duration: 2.35s; }

@keyframes delight-flame {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  38% { transform: rotate(2deg) scale(.97, 1.055); }
  72% { transform: rotate(-2.5deg) scale(1.04, .98); }
}
@keyframes delight-node-ring {
  0%, 16% { opacity: 0; transform: scale(.88); }
  34% { opacity: .45; }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes delight-unlock {
  0% { transform: translateY(5px) scale(.88); }
  55% { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes delight-icon-land {
  0% { transform: scale(.65) rotate(-12deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes delight-card-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes delight-controls-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes delight-token-land {
  from { transform: translateY(3px) scale(.94); }
  to { transform: translateY(0) scale(1); }
}
@keyframes delight-answer-correct {
  0% { transform: scale(1); }
  35% { transform: scale(1.018); box-shadow: 0 3px 0 #bdd2a8, 0 0 0 5px #b9d49a36; }
  100% { transform: scale(1); }
}
@keyframes delight-answer-nudge {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-3px); }
  48% { transform: translateX(3px); }
  72% { transform: translateX(-1.5px); }
}
@keyframes delight-check-land {
  0% { transform: scale(.76); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes delight-check-draw {
  from { stroke-dashoffset: 28; }
  to { stroke-dashoffset: 0; }
}
@keyframes delight-combo {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.94); }
  12%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -9px) scale(.98); }
}
@keyframes delight-xp-float {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.92); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -38px) scale(.98); }
}
@keyframes delight-day-land {
  from { transform: scale(.8); }
  60% { transform: scale(1.12); }
  to { transform: scale(1); }
}
@keyframes delight-goal-land {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.075); }
}
@keyframes delight-goal-ring {
  from { opacity: .6; transform: scale(.95); }
  to { opacity: 0; transform: scale(1.28); }
}
@keyframes delight-mascot-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes delight-halo-arrive {
  from { opacity: .5; transform: scale(.87); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes delight-spark-arrive {
  from { opacity: 0; transform: rotate(-10deg) scale(.6); }
  to { opacity: 1; transform: rotate(20deg) scale(1); }
}
@keyframes delight-award-land {
  0% { transform: rotate(-10deg) scale(.86); }
  55% { transform: rotate(7deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes delight-confetti {
  0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(var(--rotate)); }
  12% { opacity: .8; }
  70% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(24px, 72vh, 0) rotate(calc(var(--rotate) + 160deg)); }
}

@media (max-width: 600px) {
  .combo-toast { top: max(91px, calc(env(safe-area-inset-top) + 83px)); font-size: 11px; padding: 9px 14px; }
  .streak-celebration { max-width: 100%; padding: 14px 16px; }
  .streak-celebration strong { font-size: 14px; }
}

/* Both preference paths apply even when this sheet is loaded after the base sheet. */
.reduce-motion, .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.reduce-motion .confetti,
.reduce-motion .current .node-circle::after,
.reduce-motion .goal-ring.goal-just-reached::after,
.reduce-motion .combo-toast::before,
.reduce-motion .combo-toast::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .confetti, .current .node-circle::after, .goal-ring.goal-just-reached::after, .combo-toast::before, .combo-toast::after { display: none; }
}