/*
 * Motion — CSS-only enter/fade (GSAP handles scroll/reveal).
 * Author: C Studio
 * Version: 1.0.0
 *
 * Tokens: token.css (--motion-page-in, --motion-fade-in, durations, easings)
 *
 * Usage:
 *   <main data-page-enter>…</main>
 *   <div class="u-motion-fade-in">…</div>
 */

@keyframes page-in {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[data-page-enter],
.is-page-enter {
    animation: var(--motion-page-in);
}

.u-motion-fade-in {
    animation: var(--motion-fade-in);
}

@media (prefers-reduced-motion: reduce) {
    [data-page-enter],
    .is-page-enter,
    .u-motion-fade-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}