/* interactions/choose_the_correct_option/choose_the_correct_option_animations.css
   Choose The Correct Option – Animations (Player mode friendly)
*/

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

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

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

/* ✅ Stagger: engine inline style.animationDelay veriyor */

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

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

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

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

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

@keyframes cto-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 cto-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 cto-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));}
}

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