/* n-scroll.css */
:root {
    /* The "Nintendo" Bounce Curve */
    --n-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Standard smooth curve for non-bouncy items */
    --n-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Default Duration */
    --n-duration: 0.8s;
}

/* Base State (Hidden) */
[data-n-anim] {
    opacity: 0;
    will-change: transform, opacity;
    /* Default to 0ms delay if not specified */
    transition:
        opacity var(--n-duration) ease-out var(--n-delay, 0ms),
        transform var(--n-duration) var(--n-ease-elastic) var(--n-delay, 0ms);
}

/* ----------------------------------------------------
   Animation Types
   ---------------------------------------------------- */

/* POP: Scales up from 80% */
[data-n-anim="pop"] {
    transform: scale(0.8);
}

/* UP: Slides up 60px */
[data-n-anim="up"] {
    transform: translateY(60px);
}

/* RIGHT: Slides in from right */
[data-n-anim="right"] {
    transform: translateX(60px);
}

/* LEFT: Slides in from left */
[data-n-anim="left"] {
    transform: translateX(-60px);
}

/* ----------------------------------------------------
   Active State (Triggered by JS)
   ---------------------------------------------------- */
[data-n-anim].n-active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ----------------------------------------------------
   Optional: Turn off bounce for specific items
   Add data-n-ease="smooth" to the HTML element
   ---------------------------------------------------- */
[data-n-anim][data-n-ease="smooth"] {
    transition-timing-function: ease-out, var(--n-ease-smooth);
}

/* Accessibility: Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-n-anim] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}