/* animations.css — keyframe animations for the jigsaw game.
   All animation rules inside @media (prefers-reduced-motion: no-preference)
   so they are automatically skipped for users who prefer reduced motion.
   The game is fully playable without these animations. */

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

  /* Splash logo gentle bounce on entry */
  .splash-logo {
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .splash-title {
    animation: fadeSlideUp 0.5s ease 0.15s both;
  }
  .splash-sub {
    animation: fadeSlideUp 0.5s ease 0.25s both;
  }
  .splash-start {
    animation: fadeSlideUp 0.5s ease 0.38s both;
  }

  @keyframes bounceIn {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
  }

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

  /* Category / image card hover pop */
  .category-card:hover  { animation: pop 180ms cubic-bezier(0.34,1.56,0.64,1) both; }
  .image-card:hover      { animation: pop 180ms cubic-bezier(0.34,1.56,0.64,1) both; }

  @keyframes pop {
    from { transform: scale(1); }
    to   { transform: scale(1.04) translateY(-4px); }
  }

  /* Piece snap pulse — applied via class added briefly by engine */
  .piece-snap-pulse {
    animation: snapPulse 350ms ease-out both;
  }

  @keyframes snapPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  /* Progress bar fill smooth animation is handled by the CSS transition in styles.css */

  /* Celebrate star entrance */
  .cel-star--earned {
    animation: starPop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .cel-star--earned:nth-child(2) { animation-delay: 120ms; }
  .cel-star--earned:nth-child(3) { animation-delay: 240ms; }

  @keyframes starPop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    80%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1)   rotate(0deg); opacity: 1; }
  }

  /* Celebrate emoji entrance */
  .celebrate-emoji {
    animation: celebrateEmoji 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes celebrateEmoji {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    75%  { transform: scale(1.15) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  /* Celebrate title */
  .celebrate-title {
    animation: fadeSlideUp 0.5s ease 0.25s both;
  }

  /* HUD hint button flash */
  #hud-hint:focus-visible,
  #hud-hint:active {
    animation: hintFlash 400ms ease;
  }

  @keyframes hintFlash {
    0%, 100% { background: var(--col-cream); }
    50%      { background: var(--col-sun); }
  }

  /* Sticker earned entrance */
  .sticker-item--earned {
    animation: stickerDrop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes stickerDrop {
    from { transform: scale(0.5) translateY(-20px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);     opacity: 1; }
  }

  /* Toast entrance is handled by CSS transition in styles.css */

  /* Preview panel gentle pulse to draw attention on first show */
  .preview-panel {
    animation: previewPulse 1.2s ease 0.8s 2 both;
  }

  @keyframes previewPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
    50%      { box-shadow: 0 4px 30px rgba(255,184,77,0.6); }
  }

  /* Progress bar milestone flash */
  .progress-fill.milestone-flash {
    animation: milestoneFlash 900ms ease both;
  }

  @keyframes milestoneFlash {
    0%, 100% { filter: brightness(1); }
    30%      { filter: brightness(1.5); }
    60%      { filter: brightness(1); }
    80%      { filter: brightness(1.3); }
  }

  /* Age button entrance stagger */
  .age-btn:nth-child(1) { animation: fadeSlideUp 0.4s ease 0.1s both; }
  .age-btn:nth-child(2) { animation: fadeSlideUp 0.4s ease 0.2s both; }
  .age-btn:nth-child(3) { animation: fadeSlideUp 0.4s ease 0.3s both; }

} /* end @media prefers-reduced-motion: no-preference */

/* Accessible: ensure reduced-motion users still see final states */
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-title, .splash-sub, .splash-start,
  .cel-star--earned, .celebrate-emoji, .celebrate-title,
  .sticker-item--earned, .age-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }
}