/* ==========================================================================
   KF EXPORT — ANIMATIONS
   Keyframes + scroll-reveal utility classes (driven by main.js IntersectionObserver)
   ========================================================================== */

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

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

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Scroll reveal (JS adds .in-view when element enters viewport) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(.25,.8,.25,1), transform 0.8s cubic-bezier(.25,.8,.25,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-46px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.25,.8,.25,1); }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(46px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.25,.8,.25,1); }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

.reveal-zoom { opacity: 0; transform: scale(0.88); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.25,.8,.25,1); }
.reveal-zoom.in-view { opacity: 1; transform: scale(1); }

/* Stagger children — JS assigns --d index via inline custom property, or nth-child fallback */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.25,.8,.25,1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.54s; }

/* Typing effect cursor (used on hero, via main.js) */
.typing-cursor { display: inline-block; width: 3px; background: var(--c-accent); margin-left: 2px; animation: blink 0.9s step-end infinite; }

/* Floating decorative elements */
.float-anim { animation: floatY 4.5s ease-in-out infinite; }

/* Image / block reveal wipe (used for about media, product thumbs on load) */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--c-accent);
  transform-origin: left;
  animation: revealWipe 1.1s cubic-bezier(.77,0,.18,1) forwards;
  z-index: 3;
}
@keyframes revealWipe {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0); }
  50.001% { transform: scaleX(0); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}