/**
 * Animations and Transitions for Tinder-style swipe UI
 */

/* Card Swipe Animations */
.swipe-left {
  animation: swipeLeft 0.5s ease-out forwards;
}

.swipe-right {
  animation: swipeRight 0.5s ease-out forwards;
}

.swipe-up {
  animation: swipeUp 0.5s ease-out forwards;
}

@keyframes swipeLeft {
  0% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%) rotate(-30deg);
    opacity: 0;
  }
}

@keyframes swipeRight {
  0% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateX(150%) rotate(30deg);
    opacity: 0;
  }
}

@keyframes swipeUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-150%) scale(0.8);
    opacity: 0;
  }
}

/* Swipe Indicator Animations */
.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 80vw;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.swipe-indicator.swipe-left {
  left: 30vw;
  top: 50%;
  color: var(--danger-color);
  animation: none;
  z-index: 5;
}

.swipe-indicator.swipe-right {
  right: 30vw;
  top: 50%;
  color: var(--success-color);
  animation: none;
  z-index: 5;
}

.swipe-indicator.swipe-up {
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  color: var(--info-color);
  animation: none;
  z-index: 5;
}

.swipe-indicator.show {
  opacity: 1;
}

/* Pulse Animation for buttons */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.7);
  }
  70% {
    box-shadow: 0 0 0 10vw rgba(var(--primary-color-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0);
  }
}

.btn-like:active,
.btn-super-like:active {
  animation: pulse 0.5s;
}

/* Match Animation - Old (fallback) */
.match-modal-content.classic-animation {
  animation: matchPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes matchPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Match Animation - New Boop Animation (Default) */
.match-modal-content.boop-animation {
  animation: matchBoopContainer 3s ease-out;
  /* animation: matchBoopContainer 4.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);  */
}

@keyframes matchBoopContainer {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Pet Boop Animations - Slide from left */
.matched-pet-avatar.boop-left {
  animation: boopFromLeft 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

@keyframes boopFromLeft {
  0% {
    transform: translateX(-10vw) translateY(0) scale(0.5);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  /* Boop at center */
  25% {
    transform: translateX(0) translateY(0) scale(1.5);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  /* Peak of diagonal arc */
  38% {
    transform: translateX(-6vw) translateY(-10vw) scale(1.35);
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
  }
  /* Descending arc */
  52% {
    transform: translateX(-11vw) translateY(-5vw) scale(1.2);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  /* Landing bounce */
  /* 68% {
        transform: translateX(-130vw) translateY(0) scale(1.1);
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    } */
  /* Bounce back toward center */
  85% {
    transform: translateX(-3vw) translateY(5vw) scale(1.02);
    animation-timing-function: ease-out;
  }
  /* Final settle */
  100% {
    transform: translateX(-3vw) translateY(6vw) scale(1);
    opacity: 1;
  }
}

/* Pet Boop Animations - Slide from right */
.matched-pet-avatar.boop-right {
  animation: boopFromRight 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

@keyframes boopFromRight {
  0% {
    transform: translateX(10vw) translateY(0) scale(0.5);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  /* Boop at center */
  25% {
    transform: translateX(0) translateY(0) scale(1.5);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  /* Peak of diagonal arc */
  38% {
    transform: translateX(6vw) translateY(-10vw) scale(1.35);
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
  }
  /* Descending arc */
  52% {
    transform: translateX(11vw) translateY(-5vw) scale(1.2);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  /* Landing bounce */
  /* 68% {
        transform: translateX(130vw) translateY(0) scale(1.1);
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    } */
  /* Bounce back toward center */
  85% {
    transform: translateX(3vw) translateY(5vw) scale(1.02);
    animation-timing-function: ease-out;
  }
  /* Final settle */
  100% {
    transform: translateX(3vw) translateY(6vw) scale(1);
    opacity: 1;
  }
}

/* User avatar fade in (background for boop animation) */
.matched-user-avatar.boop-background {
  animation: fadeInBackground 2s ease-in 0.2s both;
  opacity: 0.7;
}

@keyframes fadeInBackground {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}

.match-hearts i {
  animation: heartFloat 2s ease-in-out infinite;
}

.match-hearts i:nth-child(1) {
  animation-delay: 0s;
}

.match-hearts i:nth-child(2) {
  animation-delay: 0.3s;
}

.match-hearts i:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes heartFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  50% {
    transform: translateY(-30vw) scale(1.5);
    opacity: 1;
  }
}

/* Fade In/Out */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.fade-out {
  animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide In from Bottom */
.slide-in-bottom {
  animation: slideInBottom 0.4s ease-out;
}

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

/* Slide In from Top */
.slide-in-top {
  animation: slideInTop 0.4s ease-out;
}

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

/* Bounce */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20vw);
  }
  60% {
    transform: translateY(-10vw);
  }
}

.bounce {
  animation: bounce 1s;
}

/* Shake (for errors) */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10vw);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10vw);
  }
}

.shake {
  animation: shake 0.5s;
}

/* Typing Indicator */
.typing-dots span {
  animation: typingDot 1.4s infinite;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-10vw);
    opacity: 1;
  }
}

/* Card Stack Effect */
.profile-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.profile-card:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.profile-card:nth-child(2) {
  transform: scale(0.95) translateY(1vw);
  opacity: 0.8;
}

.profile-card:nth-child(3) {
  transform: scale(0.9) translateY(2vw);
  opacity: 0.6;
}

.profile-card:nth-child(n + 4) {
  transform: scale(0.85) translateY(3vw);
  opacity: 0.4;
}

/* Skeleton Loading */
@keyframes skeleton-loading {
  0% {
    background-position: -200vw 0;
  }
  100% {
    background-position: calc(200vw + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 0vw,
    var(--border-light) 40vw,
    var(--bg-tertiary) 80vw
  );
  background-size: 200vw 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Progress Bar */
@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress-bar {
  animation: progress 1s ease-out;
}

/* Scale on Hover */
.scale-hover {
  transition: transform 0.2s ease;
}

.scale-hover:hover {
  transform: scale(1.05);
}

/* Rotate on Hover */
.rotate-hover {
  transition: transform 0.3s ease;
}

.rotate-hover:hover {
  transform: rotate(5deg);
}

/* Glow Effect */
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5vw var(--primary-color);
  }
  50% {
    box-shadow: 0 0 20vw var(--primary-color);
  }
}

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

/* ============= GAMIFICATION ANIMATIONS ============= */

/* Flash Points - Golden coin flash effect */
@keyframes flashPoints {
  0%,
  100% {
    transform: scale(1);
    color: var(--warning-color, #ffc107);
    text-shadow: none;
  }
  25% {
    transform: scale(1.3);
    color: #ffd700;
    text-shadow: 0 0 15vw rgba(255, 215, 0, 0.8),
      0 0 25vw rgba(255, 215, 0, 0.6);
  }
  50% {
    transform: scale(1.15);
    color: #ffb300;
    text-shadow: 0 0 20vw rgba(255, 179, 0, 0.9);
  }
  75% {
    transform: scale(1.25);
    color: #ffd700;
    text-shadow: 0 0 15vw rgba(255, 215, 0, 0.7);
  }
}

.flash-points {
  animation: flashPoints 3.8s ease-in-out;
}

/* Flash Achievement - Trophy glow and bounce */
@keyframes flashAchievement {
  0% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 rgba(76, 175, 80, 0);
  }
  25% {
    transform: scale(1.2) rotate(-5deg);
    box-shadow: 0 0 20vw rgba(76, 175, 80, 0.8);
  }
  50% {
    transform: scale(1.3) rotate(5deg);
    box-shadow: 0 0 30vw rgba(76, 175, 80, 1);
  }
  75% {
    transform: scale(1.2) rotate(-3deg);
    box-shadow: 0 0 20vw rgba(76, 175, 80, 0.8);
  }
  100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 10vw rgba(76, 175, 80, 0.5);
  }
}

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

/* Flash Reward - Gift box shake and glow */
@keyframes flashReward {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(33, 150, 243, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateY(-3vw) scale(1.1);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateY(3vw) scale(1.1);
  }
  50% {
    box-shadow: 0 0 25vw rgba(33, 150, 243, 0.9);
  }
}

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

/* Pulse Points Icon - Subtle continuous animation */
@keyframes pulsePoints {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.pulse-points {
  animation: pulsePoints 1.6s ease-in-out 3;
}

/* Slide and Glow for Extension Opening */
@keyframes statsExtensionGlow {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(var(--primary-color-rgb, 33, 150, 243), 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.stats-extension-highlight {
  animation: statsExtensionGlow 1.5s ease-in-out;
}

/* New Achievement Badge Pulse */
@keyframes achievementBadgePulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.achievement-badge-new {
  animation: achievementBadgePulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Points Float Up Effect (when gaining points) */
@keyframes pointsFloatUp {
  0% {
    opacity: 0;
    transform: translateY(30vw) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.8);
  }
  80% {
    opacity: 1;
    transform: translateY(-20vw) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40vw) scale(0.8);
  }
}

.points-float-up {
  animation: pointsFloatUp 3.7s ease-out;
  overflow: visible !important; /* Allow animations to go outside bounds */
}

/* Reward Badge Shine Effect */
@keyframes rewardShine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.reward-shine {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 50% 100%;
  animation: rewardShine 1.5s ease-in-out;
}