/* interactions/multiple_choice/choose_correct_picture_animations.css
   Choose Correct Picture – Animations (Player mode friendly)
*/

.ccp-wrap *{ -webkit-tap-highlight-color: transparent; }
.ccp-choice, .ccp-qtext{ will-change: transform, filter, opacity; }

/* -----------------------------
   SLIDE START SEQUENCE
   - anim-seq class'ını IsdarAnim.seq ekliyor
----------------------------- */
.ccp-wrap.anim-seq .ccp-qtext{
  animation: ccp-fadeUp 650ms ease-out both;
}

.ccp-wrap.anim-seq .ccp-choice{
  animation: ccp-wiggleGlow 650ms ease-in-out both;
}

/* ✅ Stagger: engine inline style.animationDelay veriyor
   (CSS nth-child ile tekrar vermiyoruz) */

/* -----------------------------
   CORRECT / WRONG / REVEAL
   (engine animPulse ile class basıyor)
----------------------------- */
.ccp-choice.anim-correct{
  animation: ccp-pop 800ms ease-in-out both;
  filter: brightness(1.05) contrast(1.05);
}

.ccp-choice.anim-wrong{
  animation: ccp-shake 650ms ease-in-out both;
  filter: brightness(1.02) contrast(1.05);
}

.ccp-choice.anim-reveal{
  animation: ccp-glow 700ms ease-in-out both;
}

/* tick/cross pop
   engine mc-tick / mc-cross ekliyor (CSS uyumu için korunmuştu) */
.ccp-choice.anim-correct .mc-tick{
  animation: ccp-markPop 650ms ease-in-out both;
}
.ccp-choice.anim-wrong .mc-cross{
  animation: ccp-markPop 650ms ease-in-out both;
}

/* -----------------------------
   Keyframes
----------------------------- */
@keyframes ccp-fadeUp{
  0%{ opacity:0; transform:translateY(10px) scale(.995); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes ccp-pop{
  0%{ transform:scale(.96); }
  40%{ transform:scale(1.03); }
  70%{ transform:scale(.99); }
  100%{ transform:scale(1); }
}

@keyframes ccp-shake{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-10px); }
  40%{ transform:translateX(10px); }
  60%{ transform:translateX(-7px); }
  80%{ transform:translateX(7px); }
  100%{ transform:translateX(0); }
}

@keyframes ccp-glow{
  0%{ transform:scale(.99); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ transform:scale(1.02); filter:brightness(1.08) drop-shadow(0 0 14px rgba(255,255,255,.55)); }
  100%{ transform:scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

@keyframes ccp-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,.45));}
  40%{transform:translateY(0) rotate(2deg) scale(1.02); filter:brightness(1.10) drop-shadow(0 0 14px rgba(255,255,255,.55));}
  65%{transform:translateY(-1px) rotate(-1deg) scale(1.01); filter:brightness(1.06) drop-shadow(0 0 10px rgba(255,255,255,.40));}
  100%{transform:translateY(0) rotate(0deg) scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));}
}

@keyframes ccp-markPop{
  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;}
}

/* -----------------------------
   Reduced motion
----------------------------- */
@media (prefers-reduced-motion: reduce){
  .ccp-wrap.anim-seq .ccp-choice,
  .ccp-wrap.anim-seq .ccp-qtext,
  .ccp-choice.anim-correct,
  .ccp-choice.anim-wrong,
  .ccp-choice.anim-reveal,
  .ccp-choice.anim-correct .mc-tick,
  .ccp-choice.anim-wrong .mc-cross{
    animation:none !important;
  }
}