/* ============================================================================
   animations.css — Keyframe library for UI, HUD and cinematic transitions
   ========================================================================== */

/* ---------- Screen transitions ---------- */
@keyframes screen-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes screen-out {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateY(-14px) scale(0.99); filter: blur(5px); }
}
@keyframes row-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Menu backdrop ---------- */
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 62px, 62px 0; }
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.85; }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.02); opacity: 0.9; }
}

/* ---------- HUD feedback ---------- */
@keyframes crit-throb {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%      { opacity: 0.55; filter: brightness(1.7); }
}
@keyframes pulse-danger {
  0%   { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.75); transform: scale(1); }
  60%  { box-shadow: 0 0 0 14px rgba(255, 45, 85, 0); transform: scale(1.14); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); transform: scale(1); }
}
@keyframes num-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); filter: brightness(1.6); }
  100% { transform: scale(1); }
}
@keyframes obj-flash {
  0%   { color: var(--c-lime); text-shadow: 0 0 24px var(--c-lime); transform: scale(1.06); }
  100% { color: var(--tx-hi); text-shadow: 0 0 12px rgba(0,240,255,0.35); transform: scale(1); }
}
@keyframes life-burst {
  0%   { transform: scale(1); opacity: 1; }
  35%  { transform: scale(1.9); opacity: 1; filter: brightness(2.2); }
  100% { transform: scale(0.4); opacity: 0.14; filter: brightness(0.4); }
}

/* ---------- Banner slam ---------- */
@keyframes banner-slam {
  0%   { opacity: 0; transform: scale(2.6); filter: blur(14px); letter-spacing: 0.6em; }
  16%  { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: 0.14em; }
  74%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12) translateY(-14px); filter: blur(4px); }
}

/* ---------- Powers ---------- */
@keyframes ready-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.08); }
}
@keyframes power-pop {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.85); }
  40%  { transform: scale(1.3); box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes power-live {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

/* ---------- Toasts ---------- */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-22px) scale(0.88); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes toast-out {
  0%, 74% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translateY(-18px) scale(0.94); filter: blur(4px); }
}

/* ---------- Buttons / badges ---------- */
@keyframes badge-pop {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.28); }
  96%           { transform: scale(0.94); }
}
@keyframes ach-shine {
  0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); }
  50%      { transform: scale(1.12) rotate(-6deg); filter: brightness(1.5); }
}
@keyframes day-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,176,32,0.35); }
  50%      { box-shadow: 0 0 30px rgba(255,176,32,0.75); }
}

/* ---------- Results ---------- */
@keyframes medal-in {
  0%   { opacity: 0; transform: scale(0.2) rotate(-180deg); }
  70%  { opacity: 1; transform: scale(1.16) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ring-out {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes crate-shake {
  0%, 100% { transform: rotate(0) scale(1); }
  20%      { transform: rotate(-9deg) scale(1.06); }
  45%      { transform: rotate(11deg) scale(1.1); }
  70%      { transform: rotate(-6deg) scale(1.04); }
}
@keyframes loot-in {
  from { opacity: 0; transform: translateY(24px) scale(0.6) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Orientation gate ---------- */
@keyframes rotate-hint {
  0%, 42%   { transform: rotate(0deg); }
  58%, 92%  { transform: rotate(90deg); }
  100%      { transform: rotate(0deg); }
}

/* ---------- Loading ---------- */
@keyframes logo-flicker {
  0%, 100% { opacity: 1; }
  92%      { opacity: 0.55; }
  94%      { opacity: 1; }
  96%      { opacity: 0.3; }
}
.loading__rocket { animation: logo-flicker 5.5s steps(1, end) infinite; }

/* ---------- Utility animation classes used by JS ---------- */
.anim-shake     { animation: ui-shake 400ms var(--ease-out); }
@keyframes ui-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-9px); }
  30%      { transform: translateX(8px); }
  48%      { transform: translateX(-6px); }
  66%      { transform: translateX(4px); }
  84%      { transform: translateX(-2px); }
}

.anim-glitch { position: relative; animation: glitch 620ms steps(2, end) 2; }
@keyframes glitch {
  0%   { transform: translate(0); filter: hue-rotate(0deg); }
  20%  { transform: translate(-3px, 2px); filter: hue-rotate(90deg); }
  40%  { transform: translate(3px, -2px); filter: hue-rotate(-70deg); }
  60%  { transform: translate(-2px, -1px); filter: hue-rotate(40deg); }
  80%  { transform: translate(2px, 1px); filter: hue-rotate(-20deg); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

.anim-pop-in { animation: pop-in 380ms var(--ease-back) both; }
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

.anim-fade-in { animation: fade-in var(--t-base) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.anim-slide-up { animation: slide-up 420ms var(--ease-out) both; }
@keyframes slide-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.anim-float { animation: float 4.2s var(--ease-io) infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Staggered children helper — set --i on each child */
.stagger > * { animation: slide-up 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* Reduced motion kills the decorative loops entirely */
.app[data-motion="reduced"] .screens__grid,
.app[data-motion="reduced"] .screens__glow,
.app[data-motion="reduced"] .anim-float,
.app[data-motion="reduced"] .loading__rocket,
.app[data-motion="reduced"] .power.is-ready .power__ico,
.app[data-motion="reduced"] .medal::after,
.app[data-motion="reduced"] .day.is-today { animation: none !important; }

.app[data-motion="reduced"] .stagger > * { animation-delay: 0ms !important; }