/**
 * Visual Effects - GameBoy Style Enhancements
 * Screen shakes, flashes, particle effects, and animations
 */

/* Screen Flash Effect */
@keyframes screenFlash {
  0% { background-color: transparent; }
  50% { background-color: rgba(255, 255, 255, 0.9); }
  100% { background-color: transparent; }
}

.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  animation: screenFlash 0.15s ease-out;
}

/* Pixel Particles Enhanced */
.cursor-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 0;
  pointer-events: none;
  z-index: 99998;
  animation: particleFadeOut 0.6s ease-out forwards;
  box-shadow: 
    1px 0 0 currentColor,
    -1px 0 0 currentColor,
    0 1px 0 currentColor,
    0 -1px 0 currentColor;
}

@keyframes particleFadeOut {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * 30px), calc(var(--dy) * 30px)) scale(0);
  }
}

/* Card Hover Sparkles */
@keyframes sparkleFloat {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(0) rotate(180deg);
  }
}

.card-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 0;
  pointer-events: none;
  z-index: 10;
  animation: sparkleFloat 0.8s ease-out forwards;
  box-shadow: 
    1px 0 0 currentColor,
    -1px 0 0 currentColor,
    0 1px 0 currentColor,
    0 -1px 0 currentColor,
    0 0 4px currentColor;
}

/* Button Press Feedback */
@keyframes buttonPress {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

.button-press {
  animation: buttonPress 0.15s ease-out;
}

.pagination-button:active,
.detail-close:active,
.about-button:active,
.about-modal-close:active {
  transform: translateY(2px) scale(0.98);
  transition: transform 0.1s ease-out;
}

.pagination-button:active svg,
.detail-close:active svg,
.about-button:active svg,
.about-modal-close:active svg {
  transform: scale(0.95);
}

/* Rolling Number Animation */
@keyframes numberRoll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-100%);
    opacity: 0;
  }
  51% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.number-rolling {
  display: inline-block;
  animation: numberRoll 0.5s ease-in-out;
}

.found-count {
  display: inline-block;
  position: relative;
}

/* Pixel Loading Spinner */
@keyframes pixelSpinner {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.2;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.pixel-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  animation: pixelSpinner 1s linear infinite;
}

.pixel-spinner::before,
.pixel-spinner::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: currentColor;
  box-shadow: 
    1px 0 0 currentColor,
    -1px 0 0 currentColor,
    0 1px 0 currentColor,
    0 -1px 0 currentColor;
}

.pixel-spinner::before {
  top: 0;
  left: 0;
}

.pixel-spinner::after {
  bottom: 0;
  right: 0;
}

/* Image Loading States */
.wapuu-sprite img,
.detail-modal-image img {
  transition: opacity 0.3s ease;
}

.wapuu-sprite img[data-loading="true"],
.detail-modal-image img[data-loading="true"] {
  opacity: 0.3;
}

.wapuu-sprite img[data-loading="true"]::after,
.detail-modal-image img[data-loading="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: pixelSpinner 0.8s linear infinite;
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 20px;
  pointer-events: none;
  animation: ripple 0.6s ease-out;
  transform: translate(-50%, -50%);
}

/* Scroll Animation for Cards */
.wapuu-gallery-card.scroll-in {
  animation: fadeInScale 0.5s ease-out forwards;
}

.wapuu-gallery-card.scroll-hidden {
  opacity: 0;
  transform: scale(0.9);
  animation: none;
}

/* Modal Entrance Animation */
@keyframes modalEntrance {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.wapuu-gallery-detail-modal {
  animation: modalEntrance 0.2s ease-out;
}

/* Prevent animations on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .screen-flash,
  .cursor-particle,
  .card-sparkle,
  .button-press,
  .number-rolling,
  .pixel-spinner,
  .wapuu-gallery-detail-modal {
    animation: none !important;
  }
  
  .pagination-button:active,
  .detail-close:active,
  .about-button:active,
  .about-modal-close:active {
    transform: none;
  }
}