/**
 * Hover Effects
 *
 * replaces Hover.css; presets are the option list of card_hover_effect
 *
 * @package Plexa_AI_Theme
 * Schema: card_hover_effect
 *
 * Markup keeps the `hvr-` prefix (e.g. class="hvr-grow"); every rule
 * below is scoped under that prefix so it drops in without markup
 * changes. Transforms/keyframes only — no layout-affecting properties
 * are touched on hover, so effects never reflow surrounding content.
 */

/* ==========================================================================
   Shared base — smooth transform transitions, isolate 3D context
   ========================================================================== */

[class*="hvr-"] {
    transform: translateZ(0);
    transition-duration: 0.3s;
    transition-property: transform, box-shadow, background, color;
    transition-timing-function: ease-out;
}

/* ==========================================================================
   Grow / shrink
   ========================================================================== */

.hvr-grow {
    will-change: transform;
}
.hvr-grow:hover,
.hvr-grow:focus {
    transform: scale(1.06);
}

.hvr-shrink {
    will-change: transform;
}
.hvr-shrink:hover,
.hvr-shrink:focus {
    transform: scale(0.94);
}

/* ==========================================================================
   Pulse / pulse-grow
   ========================================================================== */

.hvr-pulse:hover,
.hvr-pulse:focus {
    animation: plexa-hvr-pulse 0.4s ease-in-out;
    will-change: transform;
}

@keyframes plexa-hvr-pulse {
    50% {
        transform: scale(1.08);
    }
}

.hvr-pulse-grow:hover,
.hvr-pulse-grow:focus {
    animation: plexa-hvr-pulse-grow 0.7s ease-in-out infinite;
    will-change: transform;
}

@keyframes plexa-hvr-pulse-grow {
    to {
        transform: scale(1.06);
    }
}

/* ==========================================================================
   Bob / float / sink
   ========================================================================== */

.hvr-bob:hover,
.hvr-bob:focus {
    animation: plexa-hvr-bob 0.6s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes plexa-hvr-bob {
    to {
        transform: translateY(-6px);
    }
}

.hvr-float:hover,
.hvr-float:focus {
    transform: translateY(-6px);
}

.hvr-sink:hover,
.hvr-sink:focus {
    transform: translateY(4px);
}

/* ==========================================================================
   Buzz / wobble
   ========================================================================== */

.hvr-buzz:hover,
.hvr-buzz:focus {
    animation: plexa-hvr-buzz 0.15s linear infinite;
    will-change: transform;
}

@keyframes plexa-hvr-buzz {
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(2px) rotate(1deg);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(-2px) rotate(-1deg);
    }
    100% {
        transform: translateX(0) rotate(0);
    }
}

.hvr-wobble-horizontal:hover,
.hvr-wobble-horizontal:focus {
    animation: plexa-hvr-wobble-horizontal 0.8s ease-in-out;
    will-change: transform;
}

@keyframes plexa-hvr-wobble-horizontal {
    16.65% { transform: translateX(6px); }
    33.3%  { transform: translateX(-5px); }
    49.95% { transform: translateX(4px); }
    66.6%  { transform: translateX(-3px); }
    83.25% { transform: translateX(2px); }
    100%   { transform: translateX(0); }
}

.hvr-wobble-vertical:hover,
.hvr-wobble-vertical:focus {
    animation: plexa-hvr-wobble-vertical 0.8s ease-in-out;
    will-change: transform;
}

@keyframes plexa-hvr-wobble-vertical {
    16.65% { transform: translateY(6px); }
    33.3%  { transform: translateY(-5px); }
    49.95% { transform: translateY(4px); }
    66.6%  { transform: translateY(-3px); }
    83.25% { transform: translateY(2px); }
    100%   { transform: translateY(0); }
}

/* ==========================================================================
   Bounce in
   ========================================================================== */

.hvr-bounce-in:hover,
.hvr-bounce-in:focus {
    animation: plexa-hvr-bounce-in 0.6s cubic-bezier(.28, .84, .42, 1);
    will-change: transform;
}

@keyframes plexa-hvr-bounce-in {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    60%  { transform: scale(0.96); }
    100% { transform: scale(1.04); }
}

/* ==========================================================================
   Forward / backward
   ========================================================================== */

.hvr-forward:hover,
.hvr-forward:focus {
    transform: translateX(6px);
}

.hvr-backward:hover,
.hvr-backward:focus {
    transform: translateX(-6px);
}

/* ==========================================================================
   Lift (shadow-led)
   ========================================================================== */

.hvr-lift {
    transition-property: transform, box-shadow;
}
.hvr-lift:hover,
.hvr-lift:focus {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px color-mix(in oklch, var(--color-neutral) 25%, transparent);
}

/* ==========================================================================
   Glow (uses theme primary token)
   ========================================================================== */

.hvr-glow {
    transition-property: box-shadow;
}
.hvr-glow:hover,
.hvr-glow:focus {
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 60%, transparent),
        0 0 24px color-mix(in oklch, var(--color-primary) 45%, transparent);
}

/* ==========================================================================
   Underline (text-decoration-free, ::after driven)
   ========================================================================== */

.hvr-underline-from-left,
.hvr-underline-from-center,
.hvr-underline-from-right {
    position: relative;
    display: inline-block;
    transition-property: color;
}

.hvr-underline-from-left::after,
.hvr-underline-from-center::after,
.hvr-underline-from-right::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.hvr-underline-from-left::after {
    transform-origin: left;
}
.hvr-underline-from-center::after {
    transform-origin: center;
}
.hvr-underline-from-right::after {
    transform-origin: right;
}

.hvr-underline-from-left:hover::after,
.hvr-underline-from-left:focus::after,
.hvr-underline-from-center:hover::after,
.hvr-underline-from-center:focus::after,
.hvr-underline-from-right:hover::after,
.hvr-underline-from-right:focus::after {
    transform: scaleX(1);
}

/* ==========================================================================
   Reduced motion — disable the motion presets, keep static/color ones
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hvr-grow,
    .hvr-shrink,
    .hvr-pulse,
    .hvr-pulse-grow,
    .hvr-bob,
    .hvr-float,
    .hvr-sink,
    .hvr-buzz,
    .hvr-bounce-in,
    .hvr-forward,
    .hvr-backward,
    .hvr-lift,
    .hvr-wobble-horizontal,
    .hvr-wobble-vertical {
        animation: none !important;
        transition: none !important;
    }
    .hvr-grow:hover,
    .hvr-grow:focus,
    .hvr-shrink:hover,
    .hvr-shrink:focus,
    .hvr-pulse:hover,
    .hvr-pulse:focus,
    .hvr-pulse-grow:hover,
    .hvr-pulse-grow:focus,
    .hvr-bob:hover,
    .hvr-bob:focus,
    .hvr-float:hover,
    .hvr-float:focus,
    .hvr-sink:hover,
    .hvr-sink:focus,
    .hvr-buzz:hover,
    .hvr-buzz:focus,
    .hvr-bounce-in:hover,
    .hvr-bounce-in:focus,
    .hvr-forward:hover,
    .hvr-forward:focus,
    .hvr-backward:hover,
    .hvr-backward:focus,
    .hvr-lift:hover,
    .hvr-lift:focus,
    .hvr-wobble-horizontal:hover,
    .hvr-wobble-horizontal:focus,
    .hvr-wobble-vertical:hover,
    .hvr-wobble-vertical:focus {
        transform: none !important;
        box-shadow: none !important;
    }
}