/* ─────────────────────────────────────────────────────────────
   eBASIS — ANIMATIONS
   Scroll reveals, hover lifts. All driven by JS adding .visible.
   prefers-reduced-motion disables everything (handled in
   variables.css via the universal override).
   ───────────────────────────────────────────────────────────── */

/* Scroll reveal — elements start invisible + translated down */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
    will-change: opacity, transform;
}

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

/* Staggered children — up to 8 siblings */
.reveal-stagger > .reveal:nth-child(1)  { transition-delay:   0ms; }
.reveal-stagger > .reveal:nth-child(2)  { transition-delay:  80ms; }
.reveal-stagger > .reveal:nth-child(3)  { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4)  { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5)  { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6)  { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7)  { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8)  { transition-delay: 560ms; }

/* When JS is not available, show everything */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

/* Focus-visible polish */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}