/* ── Button Hover Effects — Oechsli Framework ─────────────────────────────── */
/*
 * CSS-only hover animations for core/button.
 * Activated by oi-btn-effect + oi-btn-effect--{slug} on the wrapper div.
 * All effects are purely additive — they complement theme.json color transitions.
 *
 * Button effects: lift, scale, press, fill, float, pulse, border-glow, text-roll
 * Icon effects:   spin, loop, slide, pulse, wiggle, flip
 */

/* ── Base color transition (all buttons) ─────────────────────────────────── */

.wp-block-button__link {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── 1. Lift ─────────────────────────────────────────────────────────────── */

.oi-btn-effect--lift .wp-block-button__link {
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.oi-btn-effect--lift .wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ── 2. Scale ────────────────────────────────────────────────────────────── */

.oi-btn-effect--scale .wp-block-button__link {
    transition: transform 0.2s ease,
                background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.oi-btn-effect--scale .wp-block-button__link:hover {
    transform: scale(1.06);
}

/* ── 3. Press (tactile scale-down) ──────────────────────────────────────── */

.oi-btn-effect--press .wp-block-button__link {
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.oi-btn-effect--press .wp-block-button__link:hover {
    transform:  scale(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ── 4. Fill (background wipes in from left — accounts for border) ─────── */

.oi-btn-effect--fill .wp-block-button__link {
    position: relative;
    overflow: hidden;
    z-index:  0;
}
.oi-btn-effect--fill .wp-block-button__link::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--oi-hover-bg, var(--wp--preset--color--palette-2));
    transform:  scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:   -1;
    pointer-events: none;
}
.oi-btn-effect--fill .wp-block-button__link:hover::before {
    transform: scaleX(1);
}
.oi-btn-effect--fill .wp-block-button__link:hover {
    color: var(--oi-hover-text, var(--wp--preset--color--palette-9)) !important;
}

/* ── 5. Float (continuous hover loop) ─────────────────────────────────── */

@keyframes oi-btn-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.oi-btn-effect--float .wp-block-button__link:hover {
    animation: oi-btn-float 0.8s ease-in-out infinite;
}

/* ── 6. Pulse (one-shot bounce) ──────────────────────────────────────── */

@keyframes oi-btn-pulse {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.08); }
    80%  { transform: scale(0.97); }
    100% { transform: scale(1);    }
}

.oi-btn-effect--pulse .wp-block-button__link:hover {
    animation: oi-btn-pulse 0.45s ease;
}

/* ── 7. Border Glow (outline expands outward + inner glow) ───────────── */

.oi-btn-effect--border-glow .wp-block-button__link {
    outline: 1px solid;
    outline-color: color-mix(in srgb, var(--wp--preset--color--palette-1) 40%, transparent);
    outline-offset: 0px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.oi-btn-effect--border-glow .wp-block-button__link:hover {
    outline-color: transparent;
    outline-offset: 12px;
    box-shadow: inset 0 0 20px color-mix(in srgb, var(--wp--preset--color--palette-9) 30%, transparent),
                0 0 20px color-mix(in srgb, var(--wp--preset--color--palette-1) 15%, transparent);
}


/* ── 8. Text Scroll (text scrolls up, duplicate scrolls in from below) ──── */
/*
 * Requires data-label + .oi-btn-label span injected by the PHP render filter.
 * Only the plain-text duplicate (::after) scrolls in — icons scroll away
 * with the original content for a clean transition.
 */

.oi-btn-effect--text-scroll .wp-block-button__link {
    overflow: hidden;
    position: relative;
}

.oi-btn-effect--text-scroll .wp-block-button__link .oi-btn-label {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    transition: transform 0.3s ease;
}

.oi-btn-effect--text-scroll .wp-block-button__link::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 0.3s ease;
}

.oi-btn-effect--text-scroll .wp-block-button__link:hover .oi-btn-label,
.oi-btn-effect--text-scroll .wp-block-button__link:hover::after {
    transform: translateY(-100%);
}


/* ══ Icon hover effects ════════════════════════════════════════════════════ */
/*
 * Activated by oi-btn-icon--{slug} on the wrapper div.
 * Targets both FA <i> icons (injected directly) and legacy .wp-block-button__link-icon.
 */

/* Base — ensure transforms work on inline icon elements */
[class*="oi-btn-icon--"] .wp-block-button__link i[class*="fa-"],
[class*="oi-btn-icon--"] .wp-block-button__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Icon Spin (360° on hover) ──────────────────────────────────────────── */

@keyframes oi-icon-spin {
    to { transform: rotate(360deg); }
}
.oi-btn-icon--spin .wp-block-button__link:hover i[class*="fa-"],
.oi-btn-icon--spin .wp-block-button__link:hover .wp-block-button__link-icon {
    animation: oi-icon-spin 0.5s ease;
}

/* ── Icon Loop (slides right out, loops back in from left) ──────────────── */

@keyframes oi-icon-loop {
    0%   { transform: translateX(0);    opacity: 1; }
    40%  { transform: translateX(12px); opacity: 0; }
    41%  { transform: translateX(-12px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}

.oi-btn-icon--loop .wp-block-button__link:hover i[class*="fa-"],
.oi-btn-icon--loop .wp-block-button__link:hover .wp-block-button__link-icon {
    animation: oi-icon-loop 0.7s ease;
}

/* ── Icon Slide (glides right, snaps back) ───────────────────────────────── */

.oi-btn-icon--slide .wp-block-button__link i[class*="fa-"],
.oi-btn-icon--slide .wp-block-button__link .wp-block-button__link-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.oi-btn-icon--slide .wp-block-button__link:hover i[class*="fa-"],
.oi-btn-icon--slide .wp-block-button__link:hover .wp-block-button__link-icon {
    transform: translateX(4px);
}

/* ── Icon Pulse ──────────────────────────────────────────────────────────── */

.oi-btn-icon--pulse .wp-block-button__link i[class*="fa-"],
.oi-btn-icon--pulse .wp-block-button__link .wp-block-button__link-icon {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.oi-btn-icon--pulse .wp-block-button__link:hover i[class*="fa-"],
.oi-btn-icon--pulse .wp-block-button__link:hover .wp-block-button__link-icon {
    transform: scale(1.3);
}

/* ── Icon Wiggle ─────────────────────────────────────────────────────────── */

@keyframes oi-icon-wiggle {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-14deg); }
    50%      { transform: rotate(12deg); }
    80%      { transform: rotate(-6deg); }
}
.oi-btn-icon--wiggle .wp-block-button__link:hover i[class*="fa-"],
.oi-btn-icon--wiggle .wp-block-button__link:hover .wp-block-button__link-icon {
    animation: oi-icon-wiggle 0.45s ease;
}

/* ── Icon Flip ───────────────────────────────────────────────────────────── */

.oi-btn-icon--flip .wp-block-button__link i[class*="fa-"],
.oi-btn-icon--flip .wp-block-button__link .wp-block-button__link-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.oi-btn-icon--flip .wp-block-button__link:hover i[class*="fa-"],
.oi-btn-icon--flip .wp-block-button__link:hover .wp-block-button__link-icon {
    transform: scaleX(-1);
}

/* ── Hover color override ────────────────────────────────────────────────── */
/*
 * Applied when hoverBgColor or hoverTextColor is set on the block.
 * CSS vars --oi-hover-bg / --oi-hover-text are output inline by the render filter.
 */

.has-oi-hover-color .wp-block-button__link:hover {
    background-color: var(--oi-hover-bg)   !important;
    border-color:     var(--oi-hover-bg)   !important;
    color:            var(--oi-hover-text) !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link,
    .wp-block-button__link::before,
    .wp-block-button__link::after,
    [class*="oi-btn-icon--"] .wp-block-button__link i[class*="fa-"],
    [class*="oi-btn-icon--"] .wp-block-button__link-icon {
        animation: none !important;
        transition: none !important;
    }
}