/* ============================================================
   Good Nutrition Only — Scroll Reveal Animations
   All elements start hidden. JS adds .is-visible when they
   enter the viewport, triggering the keyframe.
   ============================================================ */

/* --- Keyframes --- */

@keyframes gno-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gno-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gno-slide-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gno-slide-left {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gno-slide-right {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gno-scale-up {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Base reveal state (hidden until in view) --- */

.gno-reveal,
.gno-reveal--up,
.gno-reveal--down,
.gno-reveal--left,
.gno-reveal--right,
.gno-reveal--scale,
.gno-reveal--fade {
  opacity: 0;
  /* Prevent layout shift while hidden */
  will-change: opacity, transform;
}

/* --- Triggered state --- */

.gno-reveal.is-visible,
.gno-reveal--fade.is-visible {
  animation: gno-fade-in 0.65s var(--gno-ease) both;
}

.gno-reveal--up.is-visible {
  animation: gno-slide-up 0.65s var(--gno-ease) both;
}

.gno-reveal--down.is-visible {
  animation: gno-slide-down 0.55s var(--gno-ease) both;
}

.gno-reveal--left.is-visible {
  animation: gno-slide-left 0.65s var(--gno-ease) both;
}

.gno-reveal--right.is-visible {
  animation: gno-slide-right 0.65s var(--gno-ease) both;
}

.gno-reveal--scale.is-visible {
  animation: gno-scale-up 0.65s var(--gno-ease) both;
}

/* --- Staggered children (add to parent) --- */
/* Each direct child gets a slightly longer delay */

.gno-stagger > *      { opacity: 0; will-change: opacity, transform; }
.gno-stagger.is-visible > * { animation: gno-slide-up 0.6s var(--gno-ease) both; }

.gno-stagger.is-visible > *:nth-child(1) { animation-delay: 0.00s; }
.gno-stagger.is-visible > *:nth-child(2) { animation-delay: 0.08s; }
.gno-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.gno-stagger.is-visible > *:nth-child(4) { animation-delay: 0.24s; }
.gno-stagger.is-visible > *:nth-child(5) { animation-delay: 0.32s; }
.gno-stagger.is-visible > *:nth-child(6) { animation-delay: 0.40s; }

/* --- Delay helpers (add alongside reveal class) --- */

.gno-delay-1 { animation-delay: 0.10s !important; }
.gno-delay-2 { animation-delay: 0.20s !important; }
.gno-delay-3 { animation-delay: 0.30s !important; }
.gno-delay-4 { animation-delay: 0.45s !important; }
.gno-delay-5 { animation-delay: 0.60s !important; }

/* --- Respect reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .gno-reveal,
  .gno-reveal--up,
  .gno-reveal--down,
  .gno-reveal--left,
  .gno-reveal--right,
  .gno-reveal--scale,
  .gno-reveal--fade,
  .gno-stagger > * {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}