/* interactions/complete_the_sentence/animations.css
   CTS Animations — REBUILD PRO (Player friendly, stable)

   Engine hooks (class-based):
   - wrap:  .anim-seq
   - area:  .is-active, .anim-dropPop
   - card:  .anim-correct, .anim-wrongHome
   - check: .anim-success

   Notes:
   - Keep animations subtle & consistent with stage-scale transforms.
   - Avoid “stuck scaled” end states.
   - Respect prefers-reduced-motion.
*/

.cts-wrap *{ -webkit-tap-highlight-color: transparent; }

/* Be selective with will-change (performance) */
.cts-drag-card,
.cts-drop-area,
.cts-check{
  will-change: transform, filter, opacity;
}

/* -----------------------------
   SLIDE START SEQUENCE
----------------------------- */
.cts-wrap.anim-seq .cts-drag-card{
  animation-name: cts-introWiggleGlow !important;
  animation-duration: 1000ms !important;
  animation-timing-function: cubic-bezier(.22,1,.36,1) !important;
  animation-fill-mode: both !important;
}

/* ✅ drag kartın glow/drop-shadow'u second üstüne taşmasın */
.cts-wrap.anim-seq .cts-drag-card,
.cts-drag-card.anim-correct,
.cts-drag-card.anim-wrongHome{
  filter: none !important;
}

/* row delays (2–5 rows supported) */
.cts-wrap.anim-seq .cts-row:nth-child(1) .cts-drag-card{ animation-delay: 0ms; }
.cts-wrap.anim-seq .cts-row:nth-child(2) .cts-drag-card{ animation-delay: 110ms; }
.cts-wrap.anim-seq .cts-row:nth-child(3) .cts-drag-card{ animation-delay: 220ms; }
.cts-wrap.anim-seq .cts-row:nth-child(4) .cts-drag-card{ animation-delay: 330ms; }
.cts-wrap.anim-seq .cts-row:nth-child(5) .cts-drag-card{ animation-delay: 440ms; }
.cts-wrap.anim-seq .cts-drop-area{
  animation: cts-dropIntroGlow 1000ms ease-out both;
}

/* -----------------------------
   DROP HOVER / DROP POP
----------------------------- */
/* active hover pulse (soft, not dizzy) */
.cts-drop-area.is-active{
  animation: cts-softPulse 520ms ease-in-out infinite;
  filter: brightness(1.06) contrast(1.03);
}

/* on drop: quick pop then return to normal (no stuck scale) */
.cts-drop-area.anim-dropPop{
  animation: cts-dropPop 280ms cubic-bezier(.22,1,.36,1) both;
}

/* -----------------------------
   CORRECT / WRONG
----------------------------- */
.cts-drag-card.anim-correct{
  animation: cts-correctWiggle 460ms ease-in-out both;
}

.cts-drag-card.anim-wrongHome{
  animation: cts-wrongWiggleGlow 620ms ease-in-out both;
}

.cts-drag-card.anim-correct .cts-tick{
  animation: cts-tickPop 620ms cubic-bezier(.22,1,.36,1) both;
}

/* -----------------------------
   ALL DONE (success)
----------------------------- */
.cts-check.anim-success{
  animation: cts-successBounce 650ms cubic-bezier(.22,1,.36,1) both;
}

/* -----------------------------
   Keyframes (stable)
----------------------------- */
@keyframes cts-correctWiggle{
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  18%  { transform: translateY(-2px) rotate(-2deg) scale(1.02); }
  36%  { transform: translateY(0) rotate(2deg) scale(1.02); }
  54%  { transform: translateY(-1px) rotate(-1deg) scale(1.01); }
  72%  { transform: translateY(0) rotate(1deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes cts-dropIntroGlow{
  0%{
    filter: brightness(1);
    opacity: .92;
  }
  35%{
    filter: brightness(1.12);
    opacity: 1;
  }
  70%{
    filter: brightness(1.06);
    opacity: 1;
  }
  100%{
    filter: brightness(1);
    opacity: 1;
  }
}

@keyframes cts-introWiggleGlow{
  0%   { transform: translateY(0) rotate(0deg) scale(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  22%  { transform: translateY(-2px) rotate(-2deg) scale(1.02); filter: brightness(1.08) drop-shadow(0 0 10px rgba(255,255,255,.50)); }
  45%  { transform: translateY(0) rotate(2deg) scale(1.02); filter: brightness(1.10) drop-shadow(0 0 14px rgba(255,255,255,.55)); }
  70%  { 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 cts-wrongWiggleGlow{
  0%   { transform: translateY(0) rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  20%  { transform: translateY(-1px) rotate(-2deg) scale(1.01); filter: brightness(1.04) drop-shadow(0 0 10px rgba(255,255,255,.35)); }
  40%  { transform: translateY(0) rotate(2deg) scale(1.01); filter: brightness(1.06) drop-shadow(0 0 12px rgba(255,255,255,.40)); }
  65%  { transform: translateY(-1px) rotate(-1deg) scale(1.005); filter: brightness(1.03) drop-shadow(0 0 10px rgba(255,255,255,.28)); }
  100% { transform: translateY(0) rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

@keyframes cts-tickPop{
  0%   { transform: translateY(-50%) scale(.4) rotate(0deg); opacity:0; }
  35%  { transform: translateY(-50%) scale(1.22) rotate(-8deg); opacity:1; }
  60%  { transform: translateY(-50%) scale(.96) rotate(8deg); opacity:1; }
  82%  { transform: translateY(-50%) scale(1.08) rotate(-5deg); opacity:1; }
  100% { transform: translateY(-50%) scale(1) rotate(0deg); opacity:1; }
}

@keyframes cts-softPulse{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* pop then return (important!) */
@keyframes cts-dropPop{
  0%   { transform: scale(.985); filter: brightness(1.02); }
  60%  { transform: scale(1.03); filter: brightness(1.08); }
  100% { transform: scale(1);    filter: brightness(1.02); }
}

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

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