/* ============================================================
   Site-wide animation system
   All motion values reference tokens from theme.json:
   --wp--custom--motion--duration-fast    (150ms)
   --wp--custom--motion--duration-medium  (200ms)
   --wp--custom--motion--duration-slow    (300ms)
   --wp--custom--motion--easing-default   (cubic-bezier(0.2, 0, 0.2, 1))
   --wp--custom--motion--easing-enter     (cubic-bezier(0.0, 0, 0.2, 1))
   --wp--custom--motion--easing-exit      (cubic-bezier(0.2, 0, 1.0, 1))
   --wp--custom--motion--entrance-y       (12px)
   --wp--custom--motion--stagger-delay    (50ms)
   ============================================================ */

/* ============================================================
   Interaction feedback — buttons
   ============================================================ */

.wp-element-button,
.wp-block-button__link,
button:not(.smay-hero-media__expand-btn):not(.smay-lightbox__close-btn) {
    transition:
        transform var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-default),
        background var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing-default),
        border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing-default),
        box-shadow var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-default);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
button:not(.smay-hero-media__expand-btn):not(.smay-lightbox__close-btn):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 118, 32, 0.25);
}

/* ============================================================
   Interaction feedback — links
   ============================================================ */

.entry-content a:not(.wp-element-button):not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    position: relative;
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link)::after,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link)::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--wp--preset--color--accent);
    transition: width var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing-default);
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover::after,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link):hover::after {
    width: 100%;
}

/* ============================================================
   Interaction feedback — project cards (portfolio archive)
   ============================================================ */

.wp-block-post-template .wp-block-post {
    border: 2px solid transparent;
    transition:
        transform var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-default),
        border-color var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-default),
        box-shadow var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-default);
}

.wp-block-post-template .wp-block-post:hover {
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Interaction feedback — nav items
   ============================================================ */

.wp-block-navigation-item a {
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing-default);
}

.wp-block-navigation-item a:hover {
    color: var(--wp--preset--color--text-primary);
}

/* ============================================================
   Entrance animations — scroll reveal
   ============================================================ */

.smay-entrance {
    opacity: 0;
    transform: translateY(var(--wp--custom--motion--entrance-y));
    transition:
        opacity var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing-enter),
        transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing-enter);
}

.smay-entrance.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children use medium duration */
.smay-stagger > .smay-entrance {
    transition-duration: var(--wp--custom--motion--duration-medium);
}

.smay-stagger > .smay-entrance:nth-child(1) { transition-delay: calc(var(--wp--custom--motion--stagger-delay) * 0); }
.smay-stagger > .smay-entrance:nth-child(2) { transition-delay: calc(var(--wp--custom--motion--stagger-delay) * 1); }
.smay-stagger > .smay-entrance:nth-child(3) { transition-delay: calc(var(--wp--custom--motion--stagger-delay) * 2); }
.smay-stagger > .smay-entrance:nth-child(4) { transition-delay: calc(var(--wp--custom--motion--stagger-delay) * 3); }
.smay-stagger > .smay-entrance:nth-child(5) { transition-delay: calc(var(--wp--custom--motion--stagger-delay) * 4); }
.smay-stagger > .smay-entrance:nth-child(6) { transition-delay: calc(var(--wp--custom--motion--stagger-delay) * 5); }

/* ============================================================
   Page transitions — CSS View Transitions API
   ============================================================ */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: smay-fade-out var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing-exit);
}

::view-transition-new(root) {
    animation: smay-fade-in var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--easing-enter);
}

@keyframes smay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

/* ============================================================
   Header/footer — keep entrance-classed elements visible
   ============================================================ */

.wp-block-template-part .smay-entrance {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ============================================================
   Accessibility — respect reduced motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}