/**
 * ANIMATIONS.CSS - Animacje dla gier (flip, bounce, shake, confetti, etc.)
 */

/* === FLIP ANIMATION (dla kart Memory) === */

.flip-container {
  perspective: 1000px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--flip-duration) ease-in-out;
  transform-style: preserve-3d;
}

.flip-card--flipped {
  transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-border-radius);
}

.flip-card__front {
  transform: rotateY(0deg);
}

.flip-card__back {
  transform: rotateY(180deg);
}

/* === BOUNCE === */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 0.6s ease-in-out;
}

/* === SHAKE (np. przy błędzie) === */

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* === PULSE (pulsowanie) === */

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}

/* === WIGGLE (kręcenie się) === */

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

.wiggle {
  animation: wiggle 0.5s ease-in-out;
}

/* === TADA (triumph effect) === */

@keyframes tada {
  0% {
    transform: scale(1) rotate(0deg);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.tada {
  animation: tada 1s ease-in-out;
}

/* === GLOW (poświata) === */

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 107, 157, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 107, 157, 0.8);
  }
}

.glow {
  animation: glow 1.5s ease-in-out infinite;
}

/* === RAINBOW (tęczowe obramowanie) === */

@keyframes rainbow {
  0% {
    border-color: var(--rainbow-pink);
  }
  16.6% {
    border-color: var(--rainbow-purple);
  }
  33.3% {
    border-color: var(--rainbow-blue);
  }
  50% {
    border-color: var(--rainbow-green);
  }
  66.6% {
    border-color: var(--rainbow-yellow);
  }
  83.3% {
    border-color: var(--rainbow-orange);
  }
  100% {
    border-color: var(--rainbow-pink);
  }
}

.rainbow-border {
  border: 4px solid;
  animation: rainbow 3s linear infinite;
}

/* === ZOOM IN === */

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn var(--transition-slow) ease-out;
}

/* === ZOOM OUT === */

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.zoom-out {
  animation: zoomOut var(--transition-slow) ease-in;
}

/* === ROTATE === */

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 2s linear infinite;
}

/* === CONFETTI PARTICLE === */

@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  animation: confetti-fall 3s linear forwards;
  z-index: 1000;
}

/* === SPARKLE === */

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.sparkle {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  animation: sparkle 1s ease-out forwards;
}

/* === HEART BEAT === */

@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

.heart-beat {
  animation: heartBeat 1.3s ease-in-out infinite;
}

/* === JELLO === */

@keyframes jello {
  0%, 100% {
    transform: skew(0deg, 0deg);
  }
  30% {
    transform: skew(-12.5deg, -12.5deg);
  }
  40% {
    transform: skew(6.25deg, 6.25deg);
  }
  50% {
    transform: skew(-3.125deg, -3.125deg);
  }
  65% {
    transform: skew(1.5625deg, 1.5625deg);
  }
  75% {
    transform: skew(-0.78125deg, -0.78125deg);
  }
}

.jello {
  animation: jello 1s ease-in-out;
}

/* === FLASH (błysk) === */

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation: flash 1s ease-in-out;
}

/* === SLIDE IN FROM SIDES === */

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInLeft var(--transition-slow) ease-out;
}

.slide-in-right {
  animation: slideInRight var(--transition-slow) ease-out;
}

/* === MATCHED CARD (dla Memory) === */

@keyframes cardMatched {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.card-matched {
  animation: cardMatched 0.6s ease-out;
  box-shadow: 0 0 20px var(--color-success);
}

/* === MISMATCHED CARD (dla Memory) === */

@keyframes cardMismatch {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.card-mismatch {
  animation: cardMismatch 0.4s ease-out;
}

/* === ACCESSIBILITY - Reduced Motion === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}