/* All animations gated on prefers-reduced-motion: no-preference */

@media (prefers-reduced-motion: reduce) {
  .card-inner { transition-duration: 0ms !important; }
  .screen { transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-reduced-motion: no-preference) {

/* ─── Screen entrance ────────────────────────────────────────────────────── */
@keyframes bounceIn {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.06); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen--splash .splash-logo    { animation: bounceIn  0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.screen--splash .splash-title   { animation: fadeSlideUp 0.5s 0.1s both; }
.screen--splash .splash-sub     { animation: fadeSlideUp 0.5s 0.2s both; }
.screen--splash .splash-start   { animation: fadeSlideUp 0.5s 0.3s both; }

.age-card {
  animation: fadeSlideUp 0.4s both;
}
.age-card:nth-child(2) { animation-delay: 0.08s; }
.age-card:nth-child(3) { animation-delay: 0.16s; }

.category-card {
  animation: fadeSlideUp 0.35s both;
}
.category-card:nth-child(2) { animation-delay: 0.06s; }
.category-card:nth-child(3) { animation-delay: 0.12s; }
.category-card:nth-child(4) { animation-delay: 0.18s; }
.category-card:nth-child(5) { animation-delay: 0.22s; }
.category-card:nth-child(6) { animation-delay: 0.26s; }

/* ─── Card flip states ───────────────────────────────────────────────────── */

/* Match pop: card scales up after successful match */
@keyframes matchPop {
  0%   { transform: rotateY(180deg) scale(1); }
  35%  { transform: rotateY(180deg) scale(1.13); }
  65%  { transform: rotateY(180deg) scale(0.97); }
  100% { transform: rotateY(180deg) scale(1); }
}

.card--matched .card-inner {
  animation: matchPop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Mismatch shake */
@keyframes mismatchShake {
  0%,100% { transform: rotateY(180deg) translateX(0); }
  20%     { transform: rotateY(180deg) translateX(-7px); }
  40%     { transform: rotateY(180deg) translateX(7px); }
  60%     { transform: rotateY(180deg) translateX(-5px); }
  80%     { transform: rotateY(180deg) translateX(5px); }
}

.card--mismatch .card-inner {
  animation: mismatchShake 500ms ease both;
}

/* Memory flash reveal pulse */
@keyframes flashRevealPulse {
  0%,100% { box-shadow: var(--shadow-card); }
  50%     { box-shadow: 0 0 20px 6px var(--col-sky); }
}

.card--flash-reveal .card-face--front {
  animation: flashRevealPulse 700ms ease 2;
}

/* ─── Celebrate animations ──────────────────────────────────────────────── */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes celebrateEmoji {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes celebrateTitle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen--celebrate .celebrate-emoji { animation: celebrateEmoji 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }
.screen--celebrate .celebrate-title { animation: celebrateTitle  0.5s 0.15s both; }
.screen--celebrate .star-row        { animation: fadeSlideUp    0.4s 0.25s both; }
.screen--celebrate .celebrate-stats { animation: fadeSlideUp    0.4s 0.35s both; }
.screen--celebrate .celebrate-btns  { animation: fadeSlideUp    0.4s 0.45s both; }

.star--earned {
  animation: starPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.star--earned:nth-child(2) { animation-delay: 0.1s; }
.star--earned:nth-child(3) { animation-delay: 0.2s; }

/* ─── Sticker animations ────────────────────────────────────────────────── */
@keyframes stickerDrop {
  0%   { transform: scale(0.5) translateY(-20px); opacity: 0; }
  70%  { transform: scale(1.08) translateY(2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes foilShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.sticker-item--owned { animation: stickerDrop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

.sticker-item--foil.sticker-item--owned {
  background: linear-gradient(90deg, #FFD700, #FFF, #FFD700, #C0C0C0, #FFD700) !important;
  background-size: 300% 100% !important;
  animation: stickerDrop 0.4s cubic-bezier(0.34,1.56,0.64,1) both,
             foilShimmer 2.4s linear infinite;
}

/* ─── Foil badge ─────────────────────────────────────────────────────────── */
@keyframes foilBadgeShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.foil-badge {
  animation: foilBadgeShimmer 2.5s linear infinite;
}

/* ─── Button pop on hover ─────────────────────────────────────────────────── */
@keyframes pop {
  0%,100% { transform: translateY(-2px) scale(1); }
  50%     { transform: translateY(-4px) scale(1.04); }
}

/* ─── Card back subtle breathe ─────────────────────────────────────────── */
@keyframes cardBackBreath {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 0.85; }
}

.card-face--back::after {
  animation: cardBackBreath 3.5s ease-in-out infinite;
}

/* ─── Age / category cards pop in ────────────────────────────────────────── */
@keyframes popIn {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.screen--age .age-grid .age-card {
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

} /* end @media no-preference */