/* ─────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────── */
.reveal {
  transition:
    opacity 550ms var(--ease-out),
    transform 550ms var(--ease-out);
}

/* Only hide elements when JS has initialized the observer */
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
}

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

.reveal--delay-1 { transition-delay: 60ms; }
.reveal--delay-2 { transition-delay: 120ms; }
.reveal--delay-3 { transition-delay: 180ms; }
.reveal--delay-4 { transition-delay: 240ms; }

/* Hero elements are revealed immediately since they're above the fold */
.hero .reveal {
  transition-duration: 700ms;
}


/* ─────────────────────────────────────────────
   FORM SUCCESS TOAST ENTRY
───────────────────────────────────────────── */
.form-success:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Fallback for browsers without @starting-style */
.form-success.is-entering {
  animation: toast-in 400ms var(--ease-out) forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ─────────────────────────────────────────────
   HERO STAGGERED REVEAL (no JS needed)
───────────────────────────────────────────── */
.hero .reveal--delay-1 { transition-delay: 100ms; }
.hero .reveal--delay-2 { transition-delay: 200ms; }
.hero .reveal--delay-3 { transition-delay: 300ms; }
.hero .reveal--delay-4 { transition-delay: 420ms; }


/* Pricing popular card gradient border is handled in components.css */


/* ─────────────────────────────────────────────
   NAV LINK ACTIVE STATE
───────────────────────────────────────────── */
.nav__link.is-active {
  color: var(--color-text-light);
}

.nav__link.is-active::after {
  width: 100%;
}