/* interactions/match_the_word_with_the_picture/animations.css
   MWP Animations – Player mode friendly
*/

.mwp-wrap *{ -webkit-tap-highlight-color: transparent; }
.mwp-drag-card, .mwp-drop-area, .mwp-check{ will-change: transform, filter, opacity; }

/* -----------------------------
   SLIDE START SEQUENCE
----------------------------- */
.mwp-wrap.anim-seq .mwp-drag-card{
  animation: mwp-wiggleGlow 700ms ease-in-out both;
}
.mwp-wrap.anim-seq .mwp-drags .mwp-slot:nth-child(1) .mwp-drag-card{ animation-delay: 0ms; }
.mwp-wrap.anim-seq .mwp-drags .mwp-slot:nth-child(2) .mwp-drag-card{ animation-delay: 90ms; }
.mwp-wrap.anim-seq .mwp-drags .mwp-slot:nth-child(3) .mwp-drag-card{ animation-delay: 180ms; }
.mwp-wrap.anim-seq .mwp-drags .mwp-slot:nth-child(4) .mwp-drag-card{ animation-delay: 270ms; }
.mwp-wrap.anim-seq .mwp-drags .mwp-slot:nth-child(5) .mwp-drag-card{ animation-delay: 360ms; }
.mwp-wrap.anim-seq .mwp-drags .mwp-slot:nth-child(6) .mwp-drag-card{ animation-delay: 450ms; }

/* -----------------------------
   DROP HOVER / DROP POP
----------------------------- */
.mwp-drop-area.is-active{
  animation: mwp-pulse 600ms ease-in-out infinite;
  filter: grayscale(0) brightness(1.05) contrast(1.05);
  opacity: 1;
}

.mwp-drop-area.anim-dropPop{
  animation: mwp-dropPop 280ms ease-out both;
}

/* -----------------------------
   CORRECT / WRONG
----------------------------- */
.mwp-drag-card .mwp-tick{
  opacity: 0;
  transform: scale(.5);
}
.mwp-drag-card.is-correct .mwp-tick{
  opacity: 1;
  transform: scale(1);
}

.mwp-drag-card.anim-correct .mwp-tick{
  animation: mwp-tickPop 650ms ease-in-out both;
}
.mwp-drag-card.anim-correct{
  animation: mwp-wiggle 450ms ease-in-out both;
}

.mwp-drag-card.anim-wrongHome{
  animation: mwp-wiggleGlow 650ms ease-in-out both;
}

/* -----------------------------
   ALL DONE (success)
----------------------------- */
.mwp-check.anim-success{
  animation: mwp-successBounce 650ms ease-in-out both;
}

/* -----------------------------
   Keyframes
----------------------------- */
@keyframes mwp-wiggle{
  0%{transform:translateY(0) rotate(0deg) scale(1);}
  15%{transform:translateY(-2px) rotate(-2deg) scale(1.02);}
  30%{transform:translateY(0) rotate(2deg) scale(1.02);}
  45%{transform:translateY(-1px) rotate(-1deg) scale(1.01);}
  60%{transform:translateY(0) rotate(1deg) scale(1.01);}
  100%{transform:translateY(0) rotate(0deg) scale(1);}
}

@keyframes mwp-wiggleGlow{
  0%{transform:translateY(0) rotate(0deg) scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));}
  20%{transform:translateY(-2px) rotate(-2deg) scale(1.02); filter:brightness(1.08) drop-shadow(0 0 10px rgba(255,255,255,.55));}
  40%{transform:translateY(0) rotate(2deg) scale(1.02); filter:brightness(1.10) drop-shadow(0 0 14px rgba(255,255,255,.60));}
  65%{transform:translateY(-1px) rotate(-1deg) scale(1.01); filter:brightness(1.06) drop-shadow(0 0 10px rgba(255,255,255,.45));}
  100%{transform:translateY(0) rotate(0deg) scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));}
}

@keyframes mwp-tickPop{
  0%{transform:scale(.4) rotate(0deg); opacity:0;}
  35%{transform:scale(1.25) rotate(-8deg); opacity:1;}
  60%{transform:scale(.95) rotate(8deg); opacity:1;}
  80%{transform:scale(1.08) rotate(-5deg); opacity:1;}
  100%{transform:scale(1) rotate(0deg); opacity:1;}
}

@keyframes mwp-pulse{
  0%{transform:translateX(-50%) scale(1);}
  50%{transform:translateX(-50%) scale(1.03);}
  100%{transform:translateX(-50%) scale(1);}
}

@keyframes mwp-dropPop{
  0%{transform:translateX(-50%) scale(.96); filter:brightness(1.02);}
  100%{transform:translateX(-50%) scale(1.03); filter:brightness(1.08);}
}

@keyframes mwp-successBounce{
  0%{transform:scale(1);}
  35%{transform:scale(1.08);}
  60%{transform:scale(.98);}
  100%{transform:scale(1);}
}

@media (prefers-reduced-motion: reduce){
  .mwp-wrap.anim-seq .mwp-drag-card,
  .mwp-wrap.anim-seq .mwp-drop-area,
  .mwp-drag-card.anim-correct,
  .mwp-drag-card.anim-wrongHome,
  .mwp-drop-area.is-active,
  .mwp-drop-area.anim-dropPop,
  .mwp-check.anim-success{
    animation:none !important;
  }
}