/* =============================================================================
   CTA Block — Frontend Stylesheet
   ============================================================================= */

/* Section — py-24 md:py-40 bg-[#FF4E00] text-black overflow-hidden relative */
.cta-block {
    position: relative;
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #FF4E00;
    color: #000000;
    overflow: hidden;
    box-sizing: border-box;
}

/* Grain overlay — absolute inset-0 bg-grain opacity-10 mix-blend-overlay */
.cta-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.10;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Container — max-w-7xl mx-auto px-6 flex flex-col items-center justify-center text-center relative z-10 */
.cta-container {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Heading — font-display text-5xl sm:text-6xl md:text-8xl lg:text-9xl
   font-black uppercase tracking-tighter mb-10 md:mb-12 leading-none */
.cta-heading {
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2rem, 6vw, 6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 1.5;
    margin: 0 0 2.5rem 0;
    color: #000000;
}

/* Button wrapper — used by JS to set perspective for 3D translate */
.cta-btn-wrap {
    display: inline-block;
}

/* Magnetic button — relative w-40 h-40 md:w-48 md:h-48 rounded-full bg-black text-white */
.cta-btn {
    position: relative;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    background: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    overflow: hidden;
    will-change: transform;
    transition: transform 0.1s ease;
    /* spring handled by JS */
}

/* White hover fill — absolute inset-0 rounded-full scale-0 → scale-100 */
.cta-btn__fill {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 9999px;
    transform: scale(0);
    transition: transform 0.3s ease-out;
    pointer-events: none;
}

.cta-btn:hover .cta-btn__fill {
    transform: scale(1);
}

/* Label — relative z-10 font-bold text-lg tracking-wide uppercase */
.cta-btn__label {
    position: relative;
    z-index: 10;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    transition: color 0.3s ease;
}

.cta-btn:hover .cta-btn__label {
    color: #000000;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (min-width: 48rem) {
    .cta-block {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }

    .cta-heading {
        margin-bottom: 3rem;
        line-height: 1;
    }

    .cta-btn {
        width: 12rem;
        height: 12rem;
    }
}