/* =========================================================
   ANIMATIONS
   Keyframes + scroll-reveal classes. JS toggles .is-visible
   on `.reveal` elements when they enter the viewport.
   ========================================================= */

/* ---------- Scroll Reveal ----------
   Default state: invisible + slightly translated down.
   When .is-visible is added by main.js, fade up smoothly. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* When multiple reveal items are siblings in a grid, stagger
   their reveal so they cascade nicely. The delays are applied
   purely in CSS to avoid extra JS coordination work. */
.problems__grid .reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
.problems__grid .reveal:nth-child(2).is-visible { transition-delay: 0.15s; }
.problems__grid .reveal:nth-child(3).is-visible { transition-delay: 0.25s; }
.problems__grid .reveal:nth-child(4).is-visible { transition-delay: 0.35s; }
.problems__grid .reveal:nth-child(5).is-visible { transition-delay: 0.45s; }

.process__grid .reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
.process__grid .reveal:nth-child(2).is-visible { transition-delay: 0.2s; }
.process__grid .reveal:nth-child(3).is-visible { transition-delay: 0.35s; }

.services__grid .reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
.services__grid .reveal:nth-child(2).is-visible { transition-delay: 0.15s; }
.services__grid .reveal:nth-child(3).is-visible { transition-delay: 0.25s; }
.services__grid .reveal:nth-child(4).is-visible { transition-delay: 0.35s; }

.stats .reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
.stats .reveal:nth-child(2).is-visible { transition-delay: 0.2s; }
.stats .reveal:nth-child(3).is-visible { transition-delay: 0.35s; }


/* ---------- Hero Background Blobs ----------
   Soft colored blobs that drift slowly behind the hero copy.
   Pure CSS — no JS. Combined with blur for a frosted feel. */
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  will-change: transform;
}
.blob--1 {
  width: 460px; height: 460px;
  background: var(--sage);
  top: -100px; left: -100px;
  animation: drift 22s ease-in-out infinite;
}
.blob--2 {
  width: 360px; height: 360px;
  background: var(--gold);
  top: 30%; right: -80px;
  opacity: 0.18;
  animation: drift 28s ease-in-out infinite reverse;
}
.blob--3 {
  width: 320px; height: 320px;
  background: var(--sage-soft);
  bottom: -60px; left: 30%;
  animation: drift 26s ease-in-out infinite;
  animation-delay: -8s;
}


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

/* Subtle pulse used by the eyebrow dot */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* Gentle vertical float for the hero floating cards */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1deg); }
}

/* Slow rotation + bob for the decorative fern */
@keyframes floatRotate {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50% { transform: translate(-50%, -52%) rotate(4deg); }
}

/* Wide drifting motion for the background blobs */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}