/* ============================================
   SATTVA — Animations
   Subtle, intentional motion only.
   ============================================ */

/* --- Hero background slow reveal --- */
.hero__bg-img {
  opacity: 0;
  animation: heroBgReveal 2.5s ease 0.2s forwards;
}

@keyframes heroBgReveal {
  0% { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0.4; transform: scale(1); }
}

/* --- Hero content fade-in (3s) --- */
.hero__content {
  opacity: 0;
  animation: heroFadeIn 3s ease forwards;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger children */
.hero__title {
  opacity: 0;
  animation: fadeUp 1.6s ease 0.3s forwards;
}

.hero__subtitle {
  opacity: 0;
  animation: fadeUp 1.4s ease 0.8s forwards;
}

.hero__origin {
  opacity: 0;
  animation: fadeUp 1.4s ease 1.0s forwards;
}

.hero__launch {
  opacity: 0;
  animation: fadeUp 1.4s ease 1.3s forwards;
}

.hero__cta {
  opacity: 0;
  animation: fadeUp 1.4s ease 1.7s forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Scroll line pulse --- */
.hero__scroll-line {
  animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.15;
    height: 48px;
  }
  50% {
    opacity: 0.35;
    height: 56px;
  }
}

/* --- Scroll reveal (applied via JS) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Staggered reveals for ingredient items */
.ingredients__item.reveal:nth-child(1) { transition-delay: 0s; }
.ingredients__item.reveal:nth-child(2) { transition-delay: 0.15s; }
.ingredients__item.reveal:nth-child(3) { transition-delay: 0.3s; }

/* --- Form focus animation --- */
.waitlist__input {
  background-image: linear-gradient(var(--color-gold), var(--color-gold));
  background-size: 0% 1px;
  background-position: center bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease;
}

.waitlist__input:focus {
  background-size: 100% 1px;
}

/* --- Watermark slow drift --- */
.hero__watermark {
  animation: watermarkDrift 30s ease-in-out infinite;
}

@keyframes watermarkDrift {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
  }
}