/* -------------------------------------------
cta-attract.css
Drop-in attention animation for CTA buttons/badges
(e.g. the "Get Domain & Hosting Free" and
"Start Your Project" hero buttons).

USAGE:
  Just add class="mil-cta-attract" to any existing
  button/link - no markup changes needed.

  Optional: override the glow colour per-button with
  an inline style, e.g. for the gold button:
  style="--mil-cta-glow: 255, 199, 0;"
  (defaults to the orange accent, 255, 152, 0)

  Optional: stagger two buttons so they don't pulse
  in perfect sync:
  style="animation-delay: .6s;"
------------------------------------------- */

.mil-cta-attract {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-animation: mil-cta-float 3s ease-in-out infinite;
            animation: mil-cta-float 3s ease-in-out infinite;
}

/* gentle float - up and down, never stops, never distracts */
@-webkit-keyframes mil-cta-float {
    0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
}
@keyframes mil-cta-float {
    0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
}

/* soft glow ring pulsing outward */
.mil-cta-attract::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(var(--mil-cta-glow, 255, 152, 0), 0.5);
    -webkit-animation: mil-cta-glow 2.4s ease-out infinite;
            animation: mil-cta-glow 2.4s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
@-webkit-keyframes mil-cta-glow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--mil-cta-glow, 255, 152, 0), 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(var(--mil-cta-glow, 255, 152, 0), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--mil-cta-glow, 255, 152, 0), 0); }
}
@keyframes mil-cta-glow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--mil-cta-glow, 255, 152, 0), 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(var(--mil-cta-glow, 255, 152, 0), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--mil-cta-glow, 255, 152, 0), 0); }
}

/* light sweep moving across the button, like a shine passing over glass */
.mil-cta-attract::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 55%;
    height: 100%;
    background: -webkit-linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
    -webkit-animation: mil-cta-shine 3.4s ease-in-out infinite;
            animation: mil-cta-shine 3.4s ease-in-out infinite;
    animation-delay: 1s;
    pointer-events: none;
    z-index: 1;
}
@-webkit-keyframes mil-cta-shine {
    0%   { left: -150%; }
    35%  { left: 150%; }
    100% { left: 150%; }
}
@keyframes mil-cta-shine {
    0%   { left: -150%; }
    35%  { left: 150%; }
    100% { left: 150%; }
}

/* keep hover feeling responsive on top of the idle animation */
.mil-cta-attract:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
    -webkit-transform: translateY(-4px) scale(1.03);
            transform: translateY(-4px) scale(1.03);
}

@media screen and (prefers-reduced-motion: reduce) {
    .mil-cta-attract,
    .mil-cta-attract::after,
    .mil-cta-attract::before {
        -webkit-animation: none;
                animation: none;
    }
}