/* 
 * animations.css - Punk/Zine animations for the Gaming Tools Showcase
 * This file contains edgy, DIY-style animations to enhance the punk/zine aesthetic
 */

/* Fade in animation for cards with punk rotation */
@keyframes punkFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px) rotate(3deg); 
    filter: grayscale(100%) contrast(1.5);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) rotate(var(--random-rotate)); 
    filter: grayscale(30%) contrast(1.1);
  }
}

.card {
  --random-rotate: 0.5deg;
  opacity: 0;
  transform: translateY(20px) rotate(var(--random-rotate));
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  filter: grayscale(30%) contrast(1.1);
}

.card:nth-child(2n) {
  --random-rotate: -0.5deg;
}

.card:nth-child(3n) {
  --random-rotate: 0.8deg;
}

.card.visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--random-rotate));
}

/* Filter transition with photocopy effect */
.cards-grid.filtering {
  transition: opacity 0.3s ease;
  opacity: 0.7;
  filter: contrast(1.2) brightness(0.9);
}

.cards-grid.searching {
  transition: opacity 0.3s ease;
  opacity: 0.7;
  filter: contrast(1.2) brightness(0.9);
}

/* Pulse animation for filter buttons with distortion */
@keyframes punkPulse {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(1deg); }
  75% { transform: scale(1.02) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.filter-button.pulse {
  animation: punkPulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover effects with punk attitude */
.sidebar-button.button-hover {
  background-color: rgba(255, 42, 109, 0.2);
  transform: translateX(-5px) rotate(-1deg);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Modal animations with punk attitude */
.modal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.modal-open {
  opacity: 1;
}

.modal .modal-content {
  transform: translateY(20px) rotate(1deg);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal.modal-open .modal-content {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

/* DIY Toast notification */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px) rotate(2deg);
  background-color: #ff2a6d;
  color: #000000;
  padding: 1rem 2rem;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  font-family: 'Permanent Marker', cursive;
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
  border: 2px dashed #000000;
}

.toast.toast-visible {
  transform: translateX(-50%) translateY(0) rotate(2deg);
  opacity: 1;
}

/* Header underline animation with punk style */
.header-underline {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 0;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    #ff2a6d,
    #ff2a6d 10px,
    #05d9e8 10px,
    #05d9e8 20px
  );
  transform: translateX(-50%) rotate(-0.5deg);
  opacity: 0;
  transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.header-underline.animate {
  width: 80%;
  opacity: 1;
}

/* Static TV effect on hover for card links */
@keyframes staticEffect {
  0% { background-position: 0% 0%; }
  10% { background-position: -5% -5%; }
  20% { background-position: -10% 5%; }
  30% { background-position: 5% -10%; }
  40% { background-position: -5% -5%; }
  50% { background-position: -10% -10%; }
  60% { background-position: 5% 5%; }
  70% { background-position: 10% 10%; }
  80% { background-position: -10% 10%; }
  90% { background-position: 10% -10%; }
  100% { background-position: 0% 0%; }
}

.card-link:hover {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
  animation: staticEffect 0.2s steps(10) infinite;
}

/* Punk border effect for cards */
.card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: repeating-linear-gradient(
    45deg, 
    #ff2a6d, 
    #ff2a6d 10px, 
    #05d9e8 10px, 
    #05d9e8 20px
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

/* Glitch effect for titles - more extreme */
@keyframes punkGlitch {
  0% {
    transform: translate(0) skew(0deg);
    color: inherit;
  }
  10% {
    transform: translate(-5px, 2px) skew(2deg);
    color: #05d9e8;
  }
  20% {
    transform: translate(-10px, -5px) skew(-3deg);
    color: #ff2a6d;
  }
  30% {
    transform: translate(5px, -2px) skew(0deg);
    color: inherit;
  }
  40% {
    transform: translate(2px, 5px) skew(1deg);
    color: #d1ff4f;
  }
  50% {
    transform: translate(-3px, 2px) skew(-1deg);
    color: inherit;
  }
  60% {
    transform: translate(8px, -3px) skew(-2deg);
    color: #05d9e8;
  }
  70% {
    transform: translate(-4px, -2px) skew(3deg);
    color: #ff2a6d;
  }
  80% {
    transform: translate(2px, 5px) skew(0deg);
    color: inherit;
  }
  90% {
    transform: translate(-3px, -5px) skew(-3deg);
    color: #d1ff4f;
  }
  100% {
    transform: translate(0) skew(0deg);
    color: inherit;
  }
}

.card-title:hover {
  /* animation: punkGlitch 0.5s cubic-bezier(.25, .46, .45, .94) both; */
  /* transform-origin: center; */
}

/* Spray paint animation for buttons */
@keyframes sprayPaint {
  0% {
    background-size: 100% 100%;
    background-position: 50% 50%;
  }
  50% {
    background-size: 150% 150%;
    background-position: 30% 50%;
  }
  100% {
    background-size: 100% 100%;
    background-position: 50% 50%;
  }
}

.filter-button:hover,
.submit-button:hover,
.card-link:hover {
  background-image: radial-gradient(circle at center, currentColor, transparent 75%);
  animation: sprayPaint 0.5s ease-out;
}

/* Focus animations for form inputs - punk style */
.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus {
  transition: all 0.3s ease;
  border-style: dashed;
  transform: rotate(-0.3deg);
}

/* Photocopied/xerox animation when searching */
@keyframes xeroxSearch {
  0% {
    filter: none;
  }
  50% {
    filter: grayscale(100%) contrast(1.5) brightness(1.2);
  }
  100% {
    filter: none;
  }
}

.cards-grid.searching .card {
  animation: xeroxSearch 0.5s forwards;
}

/* Punk tape effect */
.card-category::after {
  content: "";
  position: absolute;
  width: 140%;
  height: 10px;
  background-color: rgba(209, 255, 79, 0.3);
  top: -5px;
  left: -20%;
  transform: rotate(-5deg);
  z-index: -1;
}

/* VHS tracking lines animation */
@keyframes trackingLines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

.tracking-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 95%,
    rgba(255, 255, 255, 0.1) 95.5%,
    transparent 96%
  );
  background-size: 100% 100px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  animation: trackingLines 10s linear infinite;
}

/* VHS tracking lines animation */
@keyframes trackingLines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

.tracking-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 95%,
    rgba(255, 255, 255, 0.1) 95.5%,
    transparent 96%
  );
  background-size: 100% 100px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  animation: trackingLines 10s linear infinite;
}

/* Responsive animations */
@media (max-width: 768px) {
  .header-underline.animate {
    width: 90%;
  }
  
  .toast {
    width: 90%;
    max-width: 500px;
    text-align: center;
  }
  
  /* More dramatic animations on mobile */
  .card.visible {
    --random-rotate: calc(var(--random-rotate) * 1.5);
  }
}