/* =============================================================================
   HP Call Button Animation Plugin — animations.css v1.0.0
   ============================================================================= */

/* ── Speed variables (set on wrapper div, inherited by link + ::after) ──────── */
.hp-cba-btn.hp-speed-very-slow { --hp-cba-dur: 4s;    }
.hp-cba-btn.hp-speed-slow      { --hp-cba-dur: 2.5s;  }
.hp-cba-btn.hp-speed-normal    { --hp-cba-dur: 1.6s;  }
.hp-cba-btn.hp-speed-fast      { --hp-cba-dur: 0.9s;  }
.hp-cba-btn.hp-speed-very-fast { --hp-cba-dur: 0.45s; }

/* ── Base button styles ─────────────────────────────────────────────────────── */
.hp-cba-btn .wp-block-button__link {
    background: linear-gradient(
        90deg,
        #d2691e  0%,
        #d2691e 40%,
        #123974 60%,
        #123974 100%
    ) !important;
    background-size: 200% 100% !important;
    color: #fff !important;
    text-decoration: none;
    border-radius: 999px !important;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* ── Shared keyframe: gradient background wave ──────────────────────────────── */
@keyframes hp-cba-bar-wave {
    from { background-position: 100% 0%; }
    to   { background-position: 0%   0%; }
}

/* ── Per-animation keyframes ────────────────────────────────────────────────── */

/* pulse */
@keyframes hp-cba-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0  0 rgba(210,105,30,.55); }
    50%      { transform: scale(1.07); box-shadow: 0 0 0 12px rgba(210,105,30,0); }
}

/* heartbeat */
@keyframes hp-cba-heartbeat {
    0%, 60%, 100% { transform: scale(1); }
    14%           { transform: scale(1.12); }
    28%           { transform: scale(1.02); }
    42%           { transform: scale(1.14); }
}

/* bounce */
@keyframes hp-cba-bounce {
    0%, 100% { transform: translateY(0);    animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    40%      { transform: translateY(-18px); animation-timing-function: cubic-bezier(.755,.05,.855,.06); }
    60%      { transform: translateY(-9px); }
}

/* bob */
@keyframes hp-cba-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* wiggle */
@keyframes hp-cba-wiggle {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-7deg); }
    40%      { transform: rotate(7deg); }
    60%      { transform: rotate(-4deg); }
    80%      { transform: rotate(4deg); }
}

/* shake */
@keyframes hp-cba-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-7px); }
    30%      { transform: translateX(7px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(2px); }
}

/* tada */
@keyframes hp-cba-tada {
    0%                 { transform: scale(1)    rotate(0deg); }
    10%, 20%           { transform: scale(.9)   rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1)  rotate(3deg); }
    40%, 60%, 80%      { transform: scale(1.1)  rotate(-3deg); }
    100%               { transform: scale(1)    rotate(0deg); }
}

/* swing */
@keyframes hp-cba-swing {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(12deg); }
    40%      { transform: rotate(-8deg); }
    60%      { transform: rotate(5deg); }
    80%      { transform: rotate(-3deg); }
}

/* jello */
@keyframes hp-cba-jello {
    0%, 11%, 100% { transform: skewX(0)         skewY(0); }
    22%           { transform: skewX(-12.5deg)   skewY(-12.5deg); }
    33%           { transform: skewX(6.25deg)    skewY(6.25deg); }
    44%           { transform: skewX(-3.125deg)  skewY(-3.125deg); }
    55%           { transform: skewX(1.5625deg)  skewY(1.5625deg); }
    66%           { transform: skewX(-.78125deg) skewY(-.78125deg); }
    77%           { transform: skewX(.390625deg) skewY(.390625deg); }
    88%           { transform: skewX(-.195313deg) skewY(-.195313deg); }
}

/* rubber_band */
@keyframes hp-cba-rubber-band {
    0%   { transform: scaleX(1); }
    30%  { transform: scaleX(1.25) scaleY(.75); }
    40%  { transform: scaleX(.75)  scaleY(1.25); }
    50%  { transform: scaleX(1.15) scaleY(.85); }
    65%  { transform: scaleX(.95)  scaleY(1.05); }
    75%  { transform: scaleX(1.05) scaleY(.95); }
    100% { transform: scaleX(1); }
}

/* glow */
@keyframes hp-cba-glow {
    0%, 100% { box-shadow: 0 0  4px 0 rgba(210,105,30,.4); }
    50%      { box-shadow: 0 0 22px 8px rgba(210,105,30,.85); }
}

/* breathe */
@keyframes hp-cba-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* pop */
@keyframes hp-cba-pop {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.22); }
    30%  { transform: scale(.93); }
    50%  { transform: scale(1.06); }
    65%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

/* float */
@keyframes hp-cba-float {
    0%, 100% { transform: translateY(0);    box-shadow: 0 5px 15px rgba(0,0,0,.2); }
    50%      { transform: translateY(-9px); box-shadow: 0 15px 25px rgba(0,0,0,.1); }
}

/* rotate */
@keyframes hp-cba-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* tilt */
@keyframes hp-cba-tilt {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-5deg); }
    75%      { transform: rotate(5deg); }
}

/* flash */
@keyframes hp-cba-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: .3; }
}

/* shimmer — light sweep via ::after */
@keyframes hp-cba-shimmer {
    from { transform: translateX(-130%) skewX(-18deg); }
    to   { transform: translateX(230%)  skewX(-18deg); }
}

/* orbit */
@keyframes hp-cba-orbit {
    0%   { transform: translate(0,    0); }
    25%  { transform: translate(5px, -4px); }
    50%  { transform: translate(0,   -7px); }
    75%  { transform: translate(-5px,-4px); }
    100% { transform: translate(0,    0); }
}

/* ping */
@keyframes hp-cba-ping {
    0%   { box-shadow: 0 0 0  0 rgba(210,105,30,.65); }
    70%  { box-shadow: 0 0 0 18px rgba(210,105,30,0); }
    100% { box-shadow: 0 0 0  0 rgba(210,105,30,0); }
}

/* wave — per-letter spans set by JS */
@keyframes hp-cba-wave-letter {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-8px); }
}

/* ── Animation rules ────────────────────────────────────────────────────────── */

.hp-cba-btn.hp-anim-pulse .wp-block-button__link {
    animation:
        hp-cba-pulse    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-heartbeat .wp-block-button__link {
    animation:
        hp-cba-heartbeat var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave  calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-bounce .wp-block-button__link {
    animation:
        hp-cba-bounce   var(--hp-cba-dur, 1.6s) ease infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-bob .wp-block-button__link {
    animation:
        hp-cba-bob      var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-wiggle .wp-block-button__link {
    animation:
        hp-cba-wiggle   var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-shake .wp-block-button__link {
    animation:
        hp-cba-shake    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-tada .wp-block-button__link {
    animation:
        hp-cba-tada     var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-swing .wp-block-button__link {
    transform-origin: top center;
    animation:
        hp-cba-swing    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-jello .wp-block-button__link {
    animation:
        hp-cba-jello    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-rubber-band .wp-block-button__link {
    animation:
        hp-cba-rubber-band var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave    calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-glow .wp-block-button__link {
    animation:
        hp-cba-glow     var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-breathe .wp-block-button__link {
    animation:
        hp-cba-breathe  var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-pop .wp-block-button__link {
    animation:
        hp-cba-pop      var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-float .wp-block-button__link {
    animation:
        hp-cba-float    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-rotate .wp-block-button__link {
    animation:
        hp-cba-rotate var(--hp-cba-dur, 1.6s) linear infinite !important;
}

.hp-cba-btn.hp-anim-tilt .wp-block-button__link {
    animation:
        hp-cba-tilt     var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-flash .wp-block-button__link {
    animation:
        hp-cba-flash    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

/* shimmer: animated light strip on ::after */
.hp-cba-btn.hp-anim-shimmer .wp-block-button__link {
    animation:
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}
.hp-cba-btn.hp-anim-shimmer .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: hp-cba-shimmer var(--hp-cba-dur, 1.6s) ease-in-out infinite !important;
    pointer-events: none;
}

.hp-cba-btn.hp-anim-orbit .wp-block-button__link {
    animation:
        hp-cba-orbit    var(--hp-cba-dur, 1.6s) ease-in-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

.hp-cba-btn.hp-anim-ping .wp-block-button__link {
    animation:
        hp-cba-ping     var(--hp-cba-dur, 1.6s) ease-out infinite,
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}

/* wave: gradient bg only; per-letter bounce handled by JS + .hp-cba-letter */
.hp-cba-btn.hp-anim-wave .wp-block-button__link {
    animation:
        hp-cba-bar-wave calc(var(--hp-cba-dur, 1.6s) * 2.5) ease-in-out infinite alternate !important;
}
.hp-cba-btn.hp-anim-wave .hp-cba-letter {
    display: inline-block;
    animation: hp-cba-wave-letter var(--hp-cba-dur, 1.6s) ease-in-out infinite;
}

/* none: static, gradient fixed at midpoint */
.hp-cba-btn.hp-anim-none .wp-block-button__link {
    animation: none !important;
    background-position: 25% 0% !important;
}
