/* ==========================================================================
   Kapsons Furnitures - Animations
   Keyframes, scroll-reveal helpers and decorative motion.
   ========================================================================== */

/* --- Keyframes ----------------------------------------------------------- */

/* Entrance for the active hero slide */
@keyframes heroReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Preloader bar slide */
@keyframes preloaderSlide {
  0%   { transform: translateX(-120%); }
  50%  { transform: translateX(120%); }
  100% { transform: translateX(-120%); }
}

/* Floating pulse for the whatsapp button */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Gentle float for decorative shapes */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* --- Scroll reveal ----------------------------------------------------------
   Elements with .reveal start hidden and animate in when the IntersectionObserver
   (main.js) adds the .is-visible class. Direction is set with a variant class.
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal-up    { transform: translateY(32px); }
.reveal-down  { transform: translateY(-24px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-zoom  { transform: scale(0.94); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children (set --d per child for delay) */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--d, 0s);
}

.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Utility animation classes */
.anim-float {
  animation: floatY 5s ease-in-out infinite;
}

.anim-pulse {
  animation: pulse 2.2s ease-out infinite;
}

/* --- Animation delays (utility) ------------------------------------------- */
.d-1 { transition-delay: 0.1s; }
.d-2 { transition-delay: 0.2s; }
.d-3 { transition-delay: 0.3s; }
.d-4 { transition-delay: 0.4s; }
.d-5 { transition-delay: 0.5s; }