/* Animations Stylesheet - Halki */

/* 1. Keyframe Definitions */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

/* 2. Typewriter Effect (using simple CSS steps & clipping/borders) */
.typewriter {
  overflow: hidden;
  border-right: .15em solid var(--accent-color);
  white-space: nowrap;
  letter-spacing: .05em;
  width: 0;
  animation: 
    typing 2.5s steps(30, end) forwards,
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--accent-color); }
}

/* 3. Utility Classes for Animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  animation: fadeIn 1s ease forwards;
}

.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.bounce-loop {
  animation: bounce 2s infinite;
}

/* 4. Grid Filter Animations */
.products-grid.filtering {
  opacity: 0;
  transform: scale(0.98);
}

/* 5. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .typewriter {
    width: auto !important;
    border-right: none !important;
    white-space: normal !important;
    overflow: visible !important;
    animation: none !important;
  }
  
  .product-card:hover {
    transform: none !important;
  }
  
  .product-image-wrapper img {
    transition: none !important;
  }
  
  .product-card:hover .product-image-wrapper img {
    transform: none !important;
  }
}