/* ============================================================
   SWAPP — interactions, states & animations
   ------------------------------------------------------------
   Drop this into your global stylesheet. The selectors are
   deliberately broad so they "just work" with the layout markup
   without needing per-component overrides.

   Hover/active transforms use `filter` + `transform` only, so
   they layer on top of any inline `background` / `color` and
   won't fight the design tokens.
   ============================================================ */

/* In-page anchor scrolling */
html { scroll-behavior: smooth; }

/* Keyboard focus ring (mouse focus stays clean) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #22ee5e;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Interactive baseline — every button and link gets a soft transition */
button, a {
  transition:
    transform   200ms ease,
    filter      200ms ease,
    box-shadow  200ms ease,
    color       200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    opacity     200ms ease;
}

/* Buttons — subtle lift on hover, press on active */
button:not(:disabled) { cursor: pointer; }
button:not(:disabled):hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
}
button:not(:disabled):active {
  filter: brightness(0.96);
  transform: translateY(0);
}

/* Links — slight brightness pop */
a:hover { filter: brightness(1.12); }

/* Card hover — opt-in via [data-hover-card] on the wrapper */
[data-hover-card] {
  transition:
    transform   260ms ease,
    box-shadow  260ms ease,
    border-color 260ms ease;
  will-change: transform;
}
[data-hover-card]:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 50px -12px rgba(0,0,0,0.55),
    0 0 0 1px rgba(34,238,94,0.30);
}

/* ─── Scroll-reveal (sections fade up as you scroll) ───────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Stagger for grouped children (cards inside a section) */
[data-reveal-stagger] > * { transition-delay: 0ms; }
.reveal.in[data-reveal-stagger] > *:nth-child(2) { transition-delay: 80ms; }
.reveal.in[data-reveal-stagger] > *:nth-child(3) { transition-delay: 160ms; }
.reveal.in[data-reveal-stagger] > *:nth-child(4) { transition-delay: 240ms; }

/* Respect users' reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration:   0.001ms !important;
  }
}