/* Cohorts.team — minimal custom CSS to complement Tailwind (Play CDN).
   Everything else on the page is Tailwind utility classes in index.html.
   These rules exist only because they depend on a class toggled by JS
   (scroll-triggered reveal, per-word stagger, toast visibility) — the
   kind of cross-cutting state Tailwind utilities alone can't express
   without repeating a long arbitrary-variant string on every element. */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

.letter-word {
  display: inline-block;
  opacity: 0.1;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i, 0) * 12ms);
}
.letter-body.in-view .letter-word,
.promise-text.in-view .letter-word {
  opacity: 1;
  transform: translateY(0);
}

.toast {
  background: #17140f;
  color: #f4f0e6;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.toast-error { background: #7a1f1f; }
.toast.toast-success { background: #1c391f; }