/* ===== Stride "Lively" layer — Duolingo-springy. Active only with body.lively (staff views). ===== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --spring-soft: cubic-bezier(.22, 1.2, .36, 1); }

/* page + card entrances (stagger via --i set by lively.js) */
body.lively .content > * { animation: lv-rise .5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
body.lively .card, body.lively .lb-row, body.lively .task, body.lively .notice {
  animation: lv-pop .45s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes lv-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes lv-pop { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }

/* buttons: squash & bounce */
body.lively .btn { transition: transform .18s var(--spring), filter .15s, box-shadow .2s; }
body.lively .btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
body.lively .btn:active { transform: scale(.9); }
body.lively .btn-accent:hover { box-shadow: 0 6px 18px var(--accent-soft), 0 0 0 3px var(--accent-soft); }

/* nav: active item bounces, icons pop on hover */
body.lively .nav a { transition: transform .2s var(--spring), background .15s, color .15s; }
body.lively .nav a:hover { transform: translateX(3px); }
body.lively .nav a.active { animation: lv-nav-bounce .45s var(--spring); }
body.lively .nav a .ico { display: inline-block; transition: transform .25s var(--spring); }
body.lively .nav a:hover .ico { transform: scale(1.25) rotate(-6deg); }
@keyframes lv-nav-bounce { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (max-width: 820px) {
  body.lively .nav a.active { animation: lv-tab-pop .4s var(--spring); }
  @keyframes lv-tab-pop { 0% { transform: translateY(4px) scale(.9); } 60% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } }
}

/* XP bar: shimmer + tip sparkle */
body.lively .xp-fill { position: relative; overflow: visible; }
body.lively .xp-fill::after { content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  background-size: 220% 100%; animation: lv-shimmer 2.4s linear infinite; }
body.lively .xp-level { animation: lv-glow 2.6s ease-in-out infinite; }
@keyframes lv-shimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@keyframes lv-glow { 0%,100% { box-shadow: 0 0 10px var(--accent-soft); } 50% { box-shadow: 0 0 22px var(--accent-soft); } }

/* badges: hover wiggle; unlocked ones float */
body.lively .badge-tile { transition: transform .25s var(--spring); }
body.lively .badge-tile:hover { transform: translateY(-5px) rotate(-2deg) scale(1.06); }
body.lively .badge-tile.unlocked .badge-icon { display: inline-block; animation: lv-float 3.2s ease-in-out infinite; }
@keyframes lv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* leaderboard: top1 crown glow; rows slide on hover */
body.lively .lb-row { transition: transform .22s var(--spring); }
body.lively .lb-row:hover { transform: translateX(6px) scale(1.01); }
body.lively .lb-row.top1 { animation: lv-champ 3s ease-in-out infinite; }
@keyframes lv-champ { 0%,100% { box-shadow: 0 0 16px rgba(253,203,110,.12); } 50% { box-shadow: 0 0 30px rgba(253,203,110,.3); } }

/* chips, avatars, bells */
body.lively .avatar { transition: transform .25s var(--spring); }
body.lively .list-row:hover .avatar { transform: scale(1.12) rotate(4deg); }
body.lively .bell:hover { animation: lv-ring .5s ease-in-out; }
@keyframes lv-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 60% { transform: rotate(-14deg); } }

/* toast: springs up */
body.lively .toast.show { animation: lv-toast .45s var(--spring); }
@keyframes lv-toast { 0% { transform: translate(-50%, 30px) scale(.8); } 100% { transform: translate(-50%, 0) scale(1); } }

/* modal: bouncier */
body.lively .modal { animation: lv-modal .5s var(--spring); }
@keyframes lv-modal { 0% { transform: scale(.7) translateY(24px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* points fly-up particle */
.lv-fly { position: fixed; z-index: 1002; font-weight: 800; color: var(--success); pointer-events: none;
  animation: lv-flyup 1.1s var(--spring-soft) forwards; font-size: 18px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@keyframes lv-flyup { 0% { opacity: 0; transform: translateY(0) scale(.7); } 15% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: translateY(-90px) scale(1); } }

/* mascot */
.lv-mascot-card { display: flex; align-items: center; gap: 14px; }
.lv-mascot { width: 86px; height: 70px; flex-shrink: 0; }
.lv-mascot .cloud { animation: lv-float 3.4s ease-in-out infinite; transform-origin: center; }
.lv-mascot.cheer .cloud { animation: lv-cheer .6s var(--spring) infinite alternate; }
@keyframes lv-cheer { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-8px) rotate(3deg); } }
.lv-mascot .eye { animation: lv-blink 4.5s infinite; transform-origin: center; }
@keyframes lv-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.lv-mascot.sleep .eye { transform: scaleY(.12); animation: none; }
.lv-zzz { animation: lv-zfloat 2.2s ease-in-out infinite; opacity: 0; }
@keyframes lv-zfloat { 0% { opacity: 0; transform: translate(0,0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px,-14px); } }
.lv-bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px;
  position: relative; font-size: 14px; animation: lv-pop .5s var(--spring); }
.lv-bubble::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px;
  background: var(--surface-2); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg); }

/* respect calm preferences absolutely */
@media (prefers-reduced-motion: reduce) { body.lively * { animation: none !important; transition: none !important; } }