@layer components {

    /* ── Fade-in entrance ───────────────────────────────────────────
     Apply .c-fade to an element, optionally with a delay modifier
     (.c-fade--d1..d4). Respects prefers-reduced-motion. */
    .c-fade {
        opacity: 0;
        transform: translateY(16px);
        animation: c-fade-in var(--dur-slow, 0.9s) var(--ease) forwards;
    }

    .c-fade--d1 { animation-delay: 0.05s; }
    .c-fade--d2 { animation-delay: 0.15s; }
    .c-fade--d3 { animation-delay: 0.25s; }
    .c-fade--d4 { animation-delay: 0.35s; }

    @keyframes c-fade-in {
        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .c-fade {
            opacity: 1;
            transform: none;
            animation: none;
        }
    }
}