/* ============================================
   1) TEK SEFERLİK ANİMASYONLAR
   ============================================ */

/* Fade Left */
.animate-fade-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: animFadeLeft 1.2s ease-out forwards;
}
@keyframes animFadeLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Fade Right */
.animate-fade-right {
    opacity: 0;
    transform: translateX(50px);
    animation: animFadeRight 1.2s ease-out forwards;
}

@keyframes animFadeRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Fade Down */
.animate-fade-down {
  opacity: 0;
  transform: translateY(-50px);
  animation: animFadeDown 1.2s ease-out forwards;
}
@keyframes animFadeDown {
  0% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Fade Up */
.animate-fade-up {
  opacity: 0;
  transform: translateY(50px);
  animation: animFadeUp 1.2s ease-out forwards;
}
@keyframes animFadeUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Float Loop up-down-up-end*/
.animate-float-loop {
  animation: animFloatLoopOnce 2.2s ease-in-out forwards;
}

@keyframes animFloatLoopOnce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-12px); }
  70%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}


/* Pop */
.animate-pop {
    animation: animPopIn 0.50s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
}
@keyframes animPopIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}



/* ============================================
   2) SONSUZ LOOP — ARROWFLOAT MANTIĞI (KUSURSUZ)
   ============================================ */

/* Fade Left Infinite */
.animate-fade-left.animate-infinite {
  animation: animFadeLeftInf 3s linear infinite;
}
@keyframes animFadeLeftInf {
  0%   { transform: translateX(-50px); opacity: 0; }
  20%  { opacity: 0.4; }
  50%  { transform: translateX(0); opacity: 1; }
  80%  { opacity: 0.4; }
  100% { transform: translateX(60px); opacity: 0; }
}

/* Fade Right Infinite */
.animate-fade-right.animate-infinite {
  animation: animFadeRightInf 3s linear infinite;
}
@keyframes animFadeRightInf {
  0%   { transform: translateX(50px); opacity: 0; }
  20%  { opacity: 0.4; }
  50%  { transform: translateX(-10px); opacity: 1; }
  80%  { opacity: 0.4; }
  100% { transform: translateX(-40px); opacity: 0; }
}

/* Fade Down Infinite */
.animate-fade-down.animate-infinite {
  animation: animFadeDownInf 3s linear infinite;
}
@keyframes animFadeDownInf {
  0%   { transform: translateY(-50px); opacity: 0; }
  20%  { opacity: 0.4; }
  50%  { transform: translateY(0); opacity: 1; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(60px); opacity: 0; }
}

/* Fade Up Infinite (SENİN ÖRNEKLE %100 AYNI) */
.animate-fade-up.animate-infinite {
  animation: animFadeUpInf 3s linear infinite;
}
@keyframes animFadeUpInf {
  0%   { transform: translateY(40px); opacity: 0; }
  20%  { opacity: 0.4; }
  50%  { transform: translateY(-20px); opacity: 1; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-60px); opacity: 0; }
}

/* Float Loop Infinite */
.animate-float-loop.animate-infinite {
  animation: animFloatLoopInf 3s ease-in-out infinite;
}

@keyframes animFloatLoopInf {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* Pop Infinite */
.animate-pop.animate-infinite {
  animation: animPopInf 1.8s linear infinite;
}
@keyframes animPopInf {
  0%   { transform: scale(0.8); opacity: 0; }
  25%  { transform: scale(1.18); opacity: 1; }
  60%  { transform: scale(1.0); opacity: 1; }
  85%  { opacity: 0.4; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* Coin Infinite default animation */
.animate-coin-flip {
    animation: coinFlipFloat 5s ease-in-out infinite;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

@keyframes coinFlipFloat {
  0%   { transform: translateY(0) rotateY(0deg); }
  20%  { transform: translateY(-14px) rotateY(16deg); }
  50%  { transform: translateY(-22px) rotateY(0deg); }
  80%  { transform: translateY(-14px) rotateY(-16deg); }
  100% { transform: translateY(0) rotateY(0deg); }
}