/* ============================================================
   9. Final CTA — magnetic-reveal headline + magnetic button
   ============================================================ */

.cta {
    padding-top: clamp(5rem, 10vw, 8rem);
    padding-bottom: clamp(5rem, 10vw, 8rem);
}
.cta__inner {
    text-align: center;
}

.cta__headline-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 1.2rem;
    border-radius: var(--r-panel);
}

.cta__headline {
    position: relative;
    margin: 0;
    display: block;
    font-size: clamp(2.1rem, 5.6vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
.cta__line {
    display: block;
    white-space: nowrap;
}
.cta__line--accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* dark circular window that follows the cursor */
.cta__reveal {
    position: absolute;
    top: 0;
    left: 0;                            /* physical — JS translate math must not flip with dir */
    width: var(--reveal-d, 300px);
    height: var(--reveal-d, 300px);
    border-radius: 50%;
    background: var(--ink);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.cta__headline-wrap.is-live .cta__reveal { opacity: 1; }

.cta__inner-copy {
    position: absolute;
    top: 0;
    left: 0;                            /* physical for the same reason */
    display: block;
    width: var(--inner-w, 100%);
    height: var(--inner-h, 100%);
    font-size: clamp(2.1rem, 5.6vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
}

.cta__actions {
    margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
    display: flex;
    justify-content: center;
}

/* magnetic + color-spread button */
.btn--magnetic {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-size: 1.1rem;
    padding: 1.15rem 2.9rem;
    will-change: transform;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease-spring);
}
.btn__fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    clip-path: circle(0% at var(--fx, 50%) var(--fy, 50%));
    transition: clip-path 0.55s var(--ease-smooth);
}
.btn--magnetic.is-near .btn__fill {
    clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%));
}
.btn--magnetic.is-near {
    color: #ffffff;
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .cta__reveal { display: none; }
    .btn--magnetic { transform: none !important; }
    .btn__fill { transition: none; }
}