/* 
   Golden Rules - Animated CTA Button Effect
   Inspired by the premium "card-border-glow" but applied with rotating conic gradients.
*/

@property --btn-border-angle-1 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@property --btn-border-angle-2 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 120deg;
}

@property --btn-border-angle-3 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 240deg;
}

@keyframes rotateBtnBackground1 {
    to {
        --btn-border-angle-1: 360deg;
    }
}

@keyframes rotateBtnBackground2 {
    to {
        --btn-border-angle-2: -240deg;
    }
}

@keyframes rotateBtnBackground3 {
    to {
        --btn-border-angle-3: 600deg;
    }
}

.btn-cta-animated {
    --border-size: 2px;
    --border-radius: 99px;
    /* Rounded pill for premium look */
    --btn-bg: #000000;

    /* Golden Rules Palette */
    --c-gold: #be9d30;
    --c-orange: #ff7c30;
    --c-green: #30ff91;
    --c-white: #ffffff;
    --c-purple: #9d30ff;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--border-size);
    border: none;
    background-color: transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;

    /* Conic Gradients for the border */
    background-image:
        conic-gradient(from var(--btn-border-angle-1) at 50% 50%,
            transparent,
            var(--c-gold) 10%,
            var(--c-orange) 20%,
            transparent 40%),
        conic-gradient(from var(--btn-border-angle-2) at 50% 50%,
            transparent,
            var(--c-green) 15%,
            var(--c-white) 25%,
            transparent 45%),
        conic-gradient(from var(--btn-border-angle-3) at 50% 50%,
            transparent,
            var(--c-purple) 10%,
            var(--c-gold) 30%,
            transparent 50%);

    animation:
        rotateBtnBackground1 4s linear infinite,
        rotateBtnBackground2 6s linear infinite,
        rotateBtnBackground3 8s linear infinite;

    /* Fixed premium size */
    min-width: 260px;
    /* Stronger presence */
    height: 60px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.btn-cta-animated .btn-content {
    background: var(--btn-bg);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    border-radius: calc(var(--border-radius) - var(--border-size));
    color: #fff;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.btn-cta-animated:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(190, 157, 48, 0.3);
}

.btn-cta-animated:hover .btn-content {
    background: #0a0a0a;
    /* Slightly lighter on hover */
}

.btn-cta-animated:active {
    transform: scale(0.98);
}

/* Responsive Overrides */
.btn-final-cta {
    min-width: unset;
    width: 100%;
    max-width: 450px;
    height: 72px;
}

@media (max-width: 768px) {
    .btn-cta-animated {
        min-width: unset;
        width: 100%;
        max-width: 320px;
        height: 56px;
    }

    .btn-cta-animated .btn-content {
        font-size: 0.95rem !important;
        padding: 0 1.15rem;
    }

    .btn-final-cta {
        height: 64px;
        max-width: 100%;
    }

    .btn-final-cta .btn-content {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .btn-cta-animated {
        max-width: 280px;
    }

    .btn-final-cta {
        max-width: 100%;
    }
}