/* -------------------------------------------
cta-badges.css
Circular "seal/sticker" badges - replaces the pill-button
look entirely. Curved text spins slowly around the rim,
the center icon has its own independent wobble/nod
(from cta-icons.css), and the whole badge floats + tilts
like a sticker stuck on at an angle.

Pair with the <a class="mil-cta-badge ..."><svg>...</svg></a>
markup provided alongside this file, wrapped in:
<div class="mil-badge-stack"> ... both badges ... </div>
------------------------------------------- */

.mil-badge-stack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.mil-cta-badge {
    position: relative;
    display: inline-block;
    width: 128px;
    height: 128px;
    cursor: pointer;
    -webkit-filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.38));
            filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.38));
    -webkit-animation: mil-badge-float 3.6s ease-in-out infinite;
            animation: mil-badge-float 3.6s ease-in-out infinite;
}

/* float + idle tilt lives on the <a>, hover-scale lives on the <svg>
   inside it so the two transforms don't fight each other */
@-webkit-keyframes mil-badge-float {
    0%, 100% { -webkit-transform: rotate(-8deg) translateY(0); transform: rotate(-8deg) translateY(0); }
    50%      { -webkit-transform: rotate(-8deg) translateY(-9px); transform: rotate(-8deg) translateY(-9px); }
}
@keyframes mil-badge-float {
    0%, 100% { -webkit-transform: rotate(-8deg) translateY(0); transform: rotate(-8deg) translateY(0); }
    50%      { -webkit-transform: rotate(-8deg) translateY(-9px); transform: rotate(-8deg) translateY(-9px); }
}

.mil-cta-badge svg {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-cta-badge:hover svg {
    -webkit-transform: scale(1.08) rotate(8deg);
            transform: scale(1.08) rotate(8deg);
}

/* the dashed ring + curved text spins slowly and continuously */
.mil-badge-ring {
    -webkit-transform-origin: 100px 100px;
        -ms-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    -webkit-animation: mil-badge-spin 16s linear infinite;
            animation: mil-badge-spin 16s linear infinite;
}
@-webkit-keyframes mil-badge-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes mil-badge-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* let the center-icon transforms (wobble/nod, from cta-icons.css)
   rotate around their own visual center inside the SVG */
.mil-cta-badge .mil-gift-icon,
.mil-cta-badge .mil-contact-icon {
    -webkit-transform-box: fill-box;
            transform-box: fill-box;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
}

@media screen and (max-width: 768px) {
    .mil-cta-badge {
        width: 96px;
        height: 96px;
    }
    .mil-badge-stack {
        gap: 16px;
    }
}

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