/* ==========================================================================
   Basuto UX — Hover Interactions
   Button lift, card elevation, link underline animation, focus states.
   All CSS, zero JS. Loaded when "Hover Interactions" is enabled.
   ========================================================================== */

/* ── Button Hover Lift ── */
.wp-block-button__link {
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

@media (hover: hover) {
    .wp-block-button__link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(74, 94, 82, 0.1);
    }
}

/* ── Card Hover Elevation ── */
.basuto-card {
    transition: transform 300ms ease, box-shadow 300ms ease;
}

@media (hover: hover) {
    .basuto-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(74, 94, 82, 0.08);
    }
}

/* ── Link Underline Animation ──
   Uses opacity on a pseudo-element instead of border-bottom-color transition.
   border-bottom-color is not GPU-composited and triggers non-composited
   animation warnings in Lighthouse. opacity + transform are composited. */
.entry-content a:not(.wp-block-button__link) {
    text-decoration: none;
    position: relative;
}

.entry-content a:not(.wp-block-button__link)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--wp--preset--color--forest, #4A5E52);
    opacity: 0.3;
    transition: opacity 300ms ease;
}

@media (hover: hover) {
    .entry-content a:not(.wp-block-button__link):hover::after {
        opacity: 1;
    }
}

/* ── Focus States ── */
*:focus-visible {
    outline: 2px solid var(--wp--preset--color--forest, #4A5E52);
    outline-offset: 2px;
}

/* ── Scroll Reveals ── */
.basuto-ux-js .basuto-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.basuto-ux-js .basuto-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.basuto-ux-js .basuto-reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.basuto-ux-js .basuto-reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.basuto-ux-js .basuto-reveal-stagger > *:nth-child(3) { transition-delay: 0.15s; }
.basuto-ux-js .basuto-reveal-stagger > *:nth-child(4) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    .basuto-ux-js .basuto-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}