/* animations.css — the fun layer for Pathfinder.
   Every keyframe animation here is switched off under prefers-reduced-motion
   (see the block at the bottom), so the calm experience is always one setting away. */

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes pf-enter      { from { opacity:0; transform:translateY(16px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes pf-pop        { 0%{transform:scale(1);} 45%{transform:scale(1.05);} 100%{transform:scale(1);} }
@keyframes pf-wiggle     { 0%,100%{transform:translateX(0);} 15%{transform:translateX(-9px) rotate(-1.5deg);} 30%{transform:translateX(8px) rotate(1.5deg);} 45%{transform:translateX(-6px);} 60%{transform:translateX(5px);} 75%{transform:translateX(-3px);} }
@keyframes pf-correct    { 0%{transform:scale(.96);} 40%{transform:scale(1.03);} 100%{transform:scale(1);} }
@keyframes pf-float      { 0%{transform:translateY(8vh) translateX(0);} 50%{transform:translateY(-6vh) translateX(var(--drift,0));} 100%{transform:translateY(8vh) translateX(0);} }
@keyframes pf-bob        { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-12px) rotate(4deg);} }
@keyframes pf-pulse      { 0%,100%{transform:scale(1); box-shadow:0 8px 20px rgba(23,107,104,.25);} 50%{transform:scale(1.035); box-shadow:0 14px 30px rgba(23,107,104,.4);} }
@keyframes pf-shimmer    { from{background-position:0 0;} to{background-position:44px 0;} }
@keyframes pf-star-pop   { 0%{opacity:0; transform:scale(0) rotate(-40deg);} 70%{opacity:1; transform:scale(1.25) rotate(8deg);} 100%{opacity:1; transform:scale(1) rotate(0);} }
@keyframes pf-rocket-bob { 0%,100%{transform:translateY(-50%) rotate(38deg);} 50%{transform:translateY(-70%) rotate(46deg);} }

/* ---- Page + card entrance ---------------------------------------------- */
#app > section { animation: pf-enter .45s cubic-bezier(.2,.75,.25,1) both; }
.session-grid > .card { animation: pf-enter .5s cubic-bezier(.2,.75,.25,1) both; }
.session-grid > .card:nth-child(2){ animation-delay:.05s; }
.session-grid > .card:nth-child(3){ animation-delay:.1s; }
.session-grid > .card:nth-child(4){ animation-delay:.15s; }
.session-grid > .card:nth-child(5){ animation-delay:.2s; }
.session-grid > .card:nth-child(n+6){ animation-delay:.25s; }

/* ---- Bouncy, tactile buttons ------------------------------------------- */
.primary, .secondary, .answer, .nav-button, .brand { transition: transform .18s cubic-bezier(.3,1.4,.5,1), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.primary:hover, .secondary:hover { transform: translateY(-2px) scale(1.03); }
.primary:active, .secondary:active, .answer:active { transform: translateY(1px) scale(.97); }
.answer:hover { transform: translateX(4px) scale(1.01); }
.answer.selected { animation: pf-pop .35s ease; }
.brand:hover span { animation: pf-bob 1s ease-in-out infinite; }
.nav-button:hover { transform: translateY(-1px); }

/* ---- Answer reactions --------------------------------------------------- */
.answer.wrong-shake { animation: pf-wiggle .55s ease; border-color:#e0a08a !important; background:#fbece4 !important; }
.answer.right-glow  { border-color:#4caf50 !important; background:#e9f7ec !important; box-shadow:0 0 0 3px rgba(76,175,80,.25); }

.feedback--correct { animation: pf-correct .5s ease; border-left-color:#4caf50; background:#e9f7ec; }
.feedback--correct strong::before { content:"🎉 "; }
.feedback--incorrect { border-left-color:#e08a5a; }
.feedback--incorrect strong::before { content:"💪 "; }

/* ---- Progress bar with a rocket riding the fill ------------------------- */
.progress-track { position:relative; overflow:visible; }
.progress-fill { position:relative; border-radius:999px; background-image:linear-gradient(115deg, var(--gold) 40%, #f5d182 50%, var(--gold) 60%); background-size:44px 100%; animation: pf-shimmer 1.1s linear infinite; }
.progress-rocket { position:absolute; right:-.55em; top:50%; transform:translateY(-50%) rotate(38deg); font-size:1.35rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)); animation: pf-rocket-bob 1.4s ease-in-out infinite; }
.progress-fill[style*="width:0%"] .progress-rocket { display:none; }

/* ---- Home screen delights ---------------------------------------------- */
.mission { position:relative; overflow:visible; }
.mascot { font-size:clamp(2.6rem,9vw,4.2rem); line-height:1; display:inline-block; animation: pf-bob 2.4s ease-in-out infinite; transform-origin:70% 90%; }
.mission .primary { animation: pf-pulse 2.2s ease-in-out infinite; }
.mission .primary:hover { animation-play-state:paused; }

/* ---- Ambient floating shapes (added once to <body>) --------------------- */
.floaties { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.floatie { position:absolute; top:0; opacity:.5; will-change:transform; animation: pf-float linear infinite; }

/* ---- Confetti layer ----------------------------------------------------- */
.confetti-layer { position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; }
.confetti-piece { position:absolute; top:0; left:0; display:block; will-change:transform,opacity; }
.confetti-piece.is-emoji { line-height:1; }

/* ---- Completion stars --------------------------------------------------- */
.win-stars { display:flex; gap:.35rem; font-size:2rem; margin:.4rem 0 .2rem; }
.win-star { animation: pf-star-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.win-star:nth-child(2){ animation-delay:.12s; }
.win-star:nth-child(3){ animation-delay:.24s; }
.win-star:nth-child(4){ animation-delay:.36s; }
.win-star:nth-child(5){ animation-delay:.48s; }

/* ---- Sound toggle ------------------------------------------------------- */
.sound-toggle { font-size:1.15rem; line-height:1; padding:.5rem .6rem; }
.sound-toggle[aria-pressed="false"] { opacity:.55; }

/* ---- Respect the calm: switch every animation off on request ------------ */
@media (prefers-reduced-motion: reduce) {
  #app > section, .session-grid > .card, .answer.selected, .answer.wrong-shake,
  .feedback--correct, .mascot, .floatie, .progress-fill, .progress-rocket,
  .mission .primary, .win-star, .brand:hover span {
    animation: none !important;
  }
  .primary, .secondary, .answer, .nav-button, .brand span { transition: none !important; }
  .floaties { display:none; }
  .progress-rocket { display:none; }
}