/**
 * WWPosts Design System — Phase 0 motion budget
 * =============================================
 * Exactly three signature motions for the reskin:
 *   1. Nav / sheet open   → .cp-motion-nav
 *   2. Card hover lift    → .cp-motion-lift
 *   3. Feed item reveal   → .cp-motion-reveal
 *
 * Prefer these over ad-hoc transitions. Always respect reduced motion.
 */

@media (prefers-reduced-motion: reduce) {
    .cp-motion-nav,
    .cp-motion-lift,
    .cp-motion-reveal,
    .cp-motion-reveal.is-in,
    .cp-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 1) Nav / sheet open                                                         */
/* -------------------------------------------------------------------------- */
@keyframes cpNavSheetIn {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.98);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes cpNavSheetInUp {
    from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cp-motion-nav {
    transform-origin: top center;
    animation: cpNavSheetIn var(--cp-duration-med) var(--cp-ease-out) both;
}

.cp-motion-nav--up {
    transform-origin: bottom center;
    animation-name: cpNavSheetInUp;
}

.cp-motion-nav--slow {
    animation-duration: var(--cp-duration-slow);
}

/* -------------------------------------------------------------------------- */
/* 2) Card hover lift                                                          */
/* -------------------------------------------------------------------------- */
.cp-motion-lift {
    transition:
        transform var(--cp-duration-med) var(--cp-ease-out),
        box-shadow var(--cp-duration-med) var(--cp-ease-out),
        border-color var(--cp-duration-fast) ease;
    will-change: transform;
}

.cp-motion-lift:hover,
.cp-motion-lift:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--cp-shadow-lg), var(--cp-shadow-glow);
    border-color: var(--cp-border-strong);
}

.cp-motion-lift:active {
    transform: translateY(-1px);
    transition-duration: var(--cp-duration-fast);
}

/* -------------------------------------------------------------------------- */
/* 3) Feed / list reveal                                                       */
/* -------------------------------------------------------------------------- */
@keyframes cpFeedReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cp-motion-reveal {
    opacity: 0;
    transform: translateY(12px);
}

.cp-motion-reveal.is-in,
.cp-motion-reveal[data-cp-revealed="true"] {
    animation: cpFeedReveal var(--cp-duration-slow) var(--cp-ease-out) both;
}

/* Stagger helpers for grids (apply delay via inline style or nth-child) */
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(1) { animation-delay: 0ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(2) { animation-delay: 40ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(3) { animation-delay: 80ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(4) { animation-delay: 120ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(5) { animation-delay: 160ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(6) { animation-delay: 200ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(7) { animation-delay: 240ms; }
.cp-motion-reveal-stagger > .cp-motion-reveal:nth-child(8) { animation-delay: 280ms; }

.cp-motion-reveal-stagger > .cp-motion-reveal.is-in,
.cp-motion-reveal-stagger > .cp-motion-reveal[data-cp-revealed="true"] {
    animation-name: cpFeedReveal;
    animation-duration: var(--cp-duration-slow);
    animation-fill-mode: both;
    animation-timing-function: var(--cp-ease-out);
}