/**
 * Interactive Utility Classes
 * 
 * Modern hover and active states for enhanced user engagement.
 */

/* -------------------------------------------------------------------------- */
/* Hover Effects
/* -------------------------------------------------------------------------- */

.hover-brighten {
    transition: filter 0.3s ease;

    &:hover {
        filter: var(--filter-brightness-bright, brightness(1.15));
    }
}

.hover-dim {
    transition: filter 0.3s ease;

    &:hover {
        filter: var(--filter-brightness-dim, brightness(0.85));
    }
}

.hover-blur {
    transition: filter 0.3s ease;

    &:hover {
        filter: var(--filter-blur-soft, blur(4px));
    }
}

.hover-grayscale {
    transition: filter 0.3s ease;

    &:hover {
        filter: var(--filter-grayscale-full, grayscale(100%));
    }
}

.hover-saturate {
    transition: filter 0.3s ease;

    &:hover {
        filter: var(--filter-saturate-vibrant, saturate(1.5));
    }
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    &:hover {
        transform: scale(1.05);
    }
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        box-shadow: var(--wp--preset--shadow--1, 0px 10px 20px rgba(0, 0, 0, 0.1));
    }
}

.hover-glow {
    transition: box-shadow 0.3s ease;

    &:hover {
        box-shadow: 0 0 15px rgba(0, 166, 244, 0.4);
        /* Uses primary color feel */
    }
}

.hover-underline {
    position: relative;
    text-decoration: none;

    &::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        background-color: currentColor;
        transition: width 0.3s ease, left 0.3s ease, transform 0.3s ease;
    }

    /* Directional modifiers */
    &.center::after {
        left: 50%;
        transform: translateX(-50%);
    }

    &.right::after {
        left: auto;
        right: 0;
    }

    &:hover::after {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------- */
/* Active / Press States
/* -------------------------------------------------------------------------- */

.active-shrink {
    transition: transform 0.1s ease;

    &:active {
        transform: scale(0.95);
    }
}

.active-darken {
    transition: filter 0.1s ease;

    &:active {
        filter: brightness(0.8);
    }
}

.active-unlift {
    transition: transform 0.1s ease;

    &:active {
        transform: translateY(0);
    }
}