/* ==========================================================================
   Liquid CTA buttons — the header/footer liquid effect, in a more vibrant tone.
   Applies to page CTAs only; the locked global header/footer are excluded
   (see CHROME-LOCK.md).
   ========================================================================== */
:root {
    --sb-cta-a: #c2412f;
    /* vivid Cinder */
    --sb-cta-b: #e0663a;
    /* saffron flame */
    --sb-cta-c: #9b4a3a;
    /* rich Clay */
    --sb-cta-d: #f2b25c;
    /* gold glint */
    --sb-cta-ink: #fffaf0;
}

:where(main, .site-content, #content) :is(.sb-btn-primary, .sb-btn-gold, .sb-donate-btn, .sb-portal-cta, .sb-ph__cta, .sb-hp-cta):not(.sb-global-header *):not(.sb-global-footer *) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--sb-cta-ink) !important;
    border: 1px solid rgba(255, 220, 170, .45) !important;
    background:
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 46%, rgba(255, 255, 255, .08) 54%, transparent 68%),
        radial-gradient(70% 160% at 12% 50%, rgba(242, 178, 92, .55), transparent 60%),
        radial-gradient(60% 180% at 88% 40%, rgba(155, 74, 58, .75), transparent 62%),
        linear-gradient(100deg, var(--sb-cta-a) 0%, var(--sb-cta-b) 30%, var(--sb-cta-c) 55%, var(--sb-cta-b) 78%, var(--sb-cta-a) 100%) !important;
    background-size: 240% 100%, 180% 180%, 180% 180%, 300% 100% !important;
    box-shadow: 0 8px 22px -10px rgba(194, 65, 47, .75), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
    text-shadow: 0 1px 1px rgba(60, 20, 10, .35);
    animation: sbCtaFlow 9s ease-in-out infinite alternate;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

:where(main, .site-content, #content) :is(.sb-btn-primary, .sb-btn-gold, .sb-donate-btn, .sb-portal-cta, .sb-ph__cta, .sb-hp-cta):not(.sb-global-header *):not(.sb-global-footer *):hover,
:where(main, .site-content, #content) :is(.sb-btn-primary, .sb-btn-gold, .sb-donate-btn, .sb-portal-cta, .sb-ph__cta, .sb-hp-cta):not(.sb-global-header *):not(.sb-global-footer *):focus-visible {
    transform: translateY(-2px);
    filter: saturate(1.15) brightness(1.05);
    box-shadow: 0 14px 30px -12px rgba(224, 102, 58, .9), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

@keyframes sbCtaFlow {
    0% {
        background-position: 120% 0, 0% 50%, 100% 50%, 0% 50%;
    }

    100% {
        background-position: -40% 0, 100% 50%, 0% 50%, 100% 50%;
    }
}

/* Secondary/outline CTAs get a liquid border instead of a fill */
:where(main, .site-content, #content) :is(.sb-btn-secondary, .sb-btn-outline):not(.sb-global-header *):not(.sb-global-footer *) {
    border: 2px solid transparent !important;
    background:
        linear-gradient(var(--sb-cta-surface, #fffaf0), var(--sb-cta-surface, #fffaf0)) padding-box,
        linear-gradient(100deg, var(--sb-cta-a), var(--sb-cta-d), var(--sb-cta-c), var(--sb-cta-b)) border-box !important;
    background-size: 100% 100%, 300% 100% !important;
    color: #7a2a1f !important;
    animation: sbCtaBorder 8s linear infinite alternate;
}

@keyframes sbCtaBorder {
    to {
        background-position: 0 0, 100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(main, .site-content, #content) :is(.sb-btn-primary, .sb-btn-gold, .sb-donate-btn, .sb-portal-cta, .sb-ph__cta, .sb-hp-cta, .sb-btn-secondary, .sb-btn-outline) {
        animation: none !important;
    }
}