/* css/fx.css — motion / micro-interaction layer.

   REWRITTEN for the frontend redesign.
   Previously this file re-declared the entire colour theme (pink/magenta
   accents, gold "money" numbers, animated aurora blobs, gradient-clipped
   headings, shimmering brand mark) and, because it loaded LAST, it silently
   won over every other stylesheet on every page.

   All colour decisions now live in css/design-system.css (loaded last).
   This file keeps ONLY genuine motion behaviour:
     - scroll-reveal for landing sections (.fx-reveal / .fx-in)
     - entrance stagger for grids
     - the email-verification banner
   Nothing here sets a colour token, a background, a border colour or a
   heading colour. */

/* --------------------------------------------------------------------------
   Entrance stagger for card grids
   -------------------------------------------------------------------------- */
.grid > *:nth-child(2),
.campaigns-grid > *:nth-child(2) { animation-delay: .06s; }
.grid > *:nth-child(3),
.campaigns-grid > *:nth-child(3) { animation-delay: .12s; }
.grid > *:nth-child(4),
.campaigns-grid > *:nth-child(4) { animation-delay: .18s; }
.grid > *:nth-child(n+5),
.campaigns-grid > *:nth-child(n+5) { animation-delay: .22s; }

/* --------------------------------------------------------------------------
   Scroll reveal (driven by js/fx.js)
   -------------------------------------------------------------------------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease, ease), transform .6s var(--ease, ease);
}
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Landing micro-interactions
   -------------------------------------------------------------------------- */
.lp-steps li,
.lp-benefits > * { transition: transform .22s var(--ease, ease); }
.lp-steps li:hover,
.lp-benefits > *:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   Email-verification banner (uses design-system tokens)
   -------------------------------------------------------------------------- */
.verify-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  font-size: var(--fs-1, 13px);
  background: var(--warning-soft, rgba(245, 195, 107, .13));
  border-bottom: 1px solid rgba(245, 195, 107, .38);
  color: var(--text, #EEF2FF);
  animation: fx-slide .4s var(--ease, ease) both;
}
.verify-banner .btn { padding: 6px 12px; min-height: 34px; font-size: var(--fs-1, 13px); }

@keyframes fx-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-steps li:hover, .lp-benefits > *:hover { transform: none; }
  .verify-banner { animation: none; }
}