/* ==========================================================================
   Grade 8 Portal — Animations
   All animations are additionally gated by prefers-reduced-motion in style.css.
   ========================================================================== */

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flashGood { 0% { background-color: rgba(46,158,91,.25); } 100% { background-color: transparent; } }
@keyframes flashBad { 0% { background-color: rgba(216,72,60,.25); } 100% { background-color: transparent; } }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
@keyframes bounceIn { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tileAppear { from { transform: scale(0); } to { transform: scale(1); } }

.anim-fade-up { animation: fadeUp .5s var(--ease) both; }
.anim-fade-in { animation: fadeIn .4s var(--ease) both; }
.anim-pop { animation: popIn .28s var(--ease) both; }
.anim-slide-down { animation: slideDown .3s var(--ease) both; }
.anim-shake { animation: shake .4s var(--ease); }
.anim-bounce-in { animation: bounceIn .45s var(--ease) both; }

.stagger > * { animation: fadeUp .5s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(n+7) { animation-delay: .32s; }

.modal-backdrop.open .modal { animation: popIn .22s var(--ease) both; }
.toast { animation: slideInRight .3s var(--ease) both; }
.card, .mini-card, .arcade-card, .lb-row { animation: fadeUp .5s var(--ease) both; }

.card:hover, .mini-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }

.loading-spinner { width: 22px; height: 22px; border: 3px solid var(--line-strong); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }

.badge-unlock { animation: bounceIn .5s var(--ease) both; }