/* ========================================
   KOLHU WALE — Animations
   ======================================== */

/* Page loader */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader img {
  width: 96px;
  height: 96px;
  animation: pulse-soft 1.4s var(--ease-soft) infinite;
}

.loader-bar {
  width: 120px;
  height: 2px;
  background: var(--color-beige);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--color-gold);
  animation: loader-slide 1s var(--ease-soft) infinite;
}

@keyframes loader-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.85; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Hero entrance */
.hero-animate .hero__eyebrow {
  animation: fade-up 0.8s var(--ease-out) both;
}

.hero-animate .hero__title {
  animation: fade-up 0.8s var(--ease-out) 0.12s both;
}

.hero-animate .hero__title-ur {
  animation: fade-up 0.8s var(--ease-out) 0.22s both;
}

.hero-animate .hero__lead {
  animation: fade-up 0.8s var(--ease-out) 0.32s both;
}

.hero-animate .hero__actions {
  animation: fade-up 0.8s var(--ease-out) 0.42s both;
}

.hero-animate .hero__stage {
  animation: fade-scale 1s var(--ease-out) 0.2s both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-scale {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Floating product */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-gentle {
  animation: float-gentle 5s ease-in-out infinite;
}

.float-gentle-delay {
  animation: float-gentle 5.5s ease-in-out 0.8s infinite;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-forest);
  color: var(--color-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base), visibility var(--dur-base),
    transform var(--dur-base) var(--ease-out),
    background var(--dur-fast);
  z-index: 900;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-forest-soft);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* WhatsApp float */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  z-index: 900;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .back-to-top {
    bottom: calc(1.5rem + 64px);
    right: 1rem;
  }
  .whatsapp-float {
    right: 1rem;
    bottom: 1.25rem;
    left: auto;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
  }
}