/* ==================================================================
   Motion layer. Loaded after style.css. Everything animates with
   translate / scale / opacity (not transform) so it never fights the
   existing transform-based styles (rotations, pulses, :active scale).
   ================================================================== */

/* ---------- easings ---------- */
/* out: quick start, soft landing. back: a tiny overshoot for playful pops. */

/* ---------- screens: fade the scrim, lift the panel, stagger its contents ---------- */
.screen.enter { animation: scrimIn .28s ease-out both; }
.screen.enter > .panel { animation: panelIn .55s cubic-bezier(.2, 1.12, .35, 1) backwards; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn { from { opacity: 0; translate: 0 40px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }

:is(.panel, .menu, .previews) > * { --i: 0; }
:is(.panel, .menu, .previews) > *:nth-child(2) { --i: 1; }
:is(.panel, .menu, .previews) > *:nth-child(3) { --i: 2; }
:is(.panel, .menu, .previews) > *:nth-child(4) { --i: 3; }
:is(.panel, .menu, .previews) > *:nth-child(5) { --i: 4; }
:is(.panel, .menu, .previews) > *:nth-child(6) { --i: 5; }
:is(.panel, .menu, .previews) > *:nth-child(7) { --i: 6; }
:is(.panel, .menu, .previews) > *:nth-child(8) { --i: 7; }
:is(.panel, .menu, .previews) > *:nth-child(9) { --i: 8; }

.screen.enter :is(.panel, .previews) > * { animation: rise .5s cubic-bezier(.2, 1, .3, 1) calc(var(--i) * 55ms + 110ms) backwards; }
/* primary buttons keep their idle pulse next to the entrance */
.screen.enter :is(.panel, .previews) > .mbtn.primary {
  animation: rise .5s cubic-bezier(.2, 1, .3, 1) calc(var(--i) * 55ms + 110ms) backwards, pulse 1.1s ease-in-out infinite;
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* the title menu slides in from the right, its buttons one after another */
#title.enter .menu { animation: menuIn .6s cubic-bezier(.2, 1.1, .3, 1) .05s backwards; }
#title.enter .menu > * { animation: slideR .5s cubic-bezier(.2, 1, .3, 1) calc(var(--i) * 60ms + 240ms) backwards; }
@keyframes menuIn { from { opacity: 0; translate: 120px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes slideR { from { opacity: 0; translate: 44px 0; } to { opacity: 1; translate: 0 0; } }

/* the logo floats gently, the two words out of step (translate, so it does not fight logoDrop) */
#title .logo .l1, #title .logo .l2 { animation: bob 3.6s ease-in-out infinite; }
#title .logo .l2 { animation-delay: -1.8s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* leaving: the reverse, quick and light */
.screen.leaving { animation: scrimOut .23s ease-in both; pointer-events: none; }
.screen.leaving > .panel { animation: panelOut .23s ease-in both; }
@keyframes scrimOut { to { opacity: 0; } }
@keyframes panelOut { to { opacity: 0; translate: 0 22px; scale: .96; } }

/* ---------- level tiles pop in as a diagonal wave (--d is set in JS) ---------- */
#lvlGrid .lbtn { animation: tilePop .42s cubic-bezier(.2, 1.25, .4, 1) var(--d, 0ms) backwards; }
@keyframes tilePop { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }

/* ---------- store: cards slide in when the tab changes; a click pops the selected card ---------- */
.items.fresh .card { animation: cardIn .45s cubic-bezier(.2, 1, .3, 1) calc(var(--i, 0) * 45ms) backwards; }
@keyframes cardIn { from { opacity: 0; translate: -34px 0; } to { opacity: 1; translate: 0 0; } }
.card.sel { animation: selPop .34s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes selPop { 0% { scale: .965; } 55% { scale: 1.02; } 100% { scale: 1; } }

/* ---------- buttons, tabs, cards: tap ripple, hover lift, shine ---------- */
.mbtn, .tab, .card, .ibtn {
  position: relative; overflow: hidden; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.mbtn { transition: background .18s, transform .12s, translate .2s, box-shadow .2s; }
.mbtn::after {                                   /* a light sheen that crosses the button on hover */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
.mbtn:active { translate: 0 1px; }
.tab, .card { transition: background .18s, translate .15s, box-shadow .2s; }
.tab:active, .card:active { translate: 0 1px; }
.ibtn { transition: transform .12s, background .15s; }
.ibtn:active { transform: scale(.88); }

@media (hover: hover) {
  .mbtn:hover { translate: 0 -2px; }
  .mbtn:hover::after { left: 130%; }
  .card:hover { translate: 4px 0; }
  .tab:hover { translate: 0 -1px; }
}

.ripple {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,.12) 70%);
  transform: scale(0); animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(var(--s, 30)); opacity: 0; } }

/* a disabled button shakes when tapped */
.mbtn.nope { animation: nope .42s; }
@keyframes nope {
  0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 7px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; }
}

/* ---------- HUD: coins bump when you collect one, hearts shake when you are hit ---------- */
#coinBox.bump { animation: coinBump .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes coinBump { 0% { scale: 1; } 35% { scale: 1.2; } 100% { scale: 1; } }
#hearts.hurt { animation: shake .45s; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }

/* ---------- toasts (store messages) ---------- */
.toast {
  position: absolute; left: 50%; top: calc(14px + var(--safe-t)); z-index: 5; pointer-events: none; white-space: nowrap;
  font-size: 24px; color: #fff; text-shadow: var(--pop); padding: 7px 16px; opacity: 0;
  background: linear-gradient(to bottom, rgba(var(--glass-glow), .55), rgba(var(--glass-body), .42));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 8px 22px rgba(2,20,40,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.toast[data-tone="bad"] { color: #ffc2c2; }
.toast.show { animation: toastIn 2.1s ease both; }
@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(.9); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  22% { transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(1); }
}

/* ---------- reduced motion: keep the layout, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .screen, .screen > *, .screen :is(.panel, .previews, .menu) > *, #title .logo span,
  .card, .tab, .mbtn, .mbtn.nope, #lvlGrid .lbtn, #coinBox, #hearts, .toast, .ripple {
    animation: none !important; transition: none !important;
  }
}