.raven-eclipse-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-raven-red);
    font-family: var(--font-body);
    /*
     * Single typography scale for every Eclipse CTA.
     * Each clamp anchor is exactly 12% larger than the previous shared scale.
     * !important prevents legacy section/mobile rules from changing the size.
     */
    font-size: clamp(0.84rem, 1.008vw, 0.98rem) !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    transition: box-shadow 700ms cubic-bezier(.22, 1, .36, 1);
    margin-bottom:5px;
}

.raven-eclipse-cta::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -18%;
    width: 138%;
    aspect-ratio: 2.8;
    border-radius: 50%;
    background: var(--color-black);
    transform: translate3d(-91%, -50%, 0) rotate(-6deg) scaleY(0.42);
    transform-origin: right center;
    will-change: transform;
    transition: transform 900ms cubic-bezier(.22, 1, .36, 1);
}

.raven-eclipse-cta::after {
    content: attr(data-label);
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: max-content;
    color: var(--color-white);
    transform: translate3d(-50%, 105%, 0) rotate(1deg);
    opacity: 0;
    filter: blur(2px);
    will-change: transform, opacity, filter;
    transition:
        transform 760ms cubic-bezier(.22, 1, .36, 1),
        opacity 520ms ease,
        filter 620ms ease;
}

.raven-eclipse-cta__label {
    position: relative;
    z-index: 1;
    display: block;
    will-change: transform, opacity, filter;
    transition:
        transform 720ms cubic-bezier(.22, 1, .36, 1),
        opacity 460ms ease,
        filter 560ms ease;
}

.raven-eclipse-cta:hover {
    background: var(--color-raven-red);
    box-shadow:
        0 0 0 1px rgb(245 25 25 / 0.7),
        0 0.75rem 2rem rgb(245 25 25 / 0.16);
}

.raven-eclipse-cta:hover::before {
    transform: translate3d(0, -50%, 0) rotate(-1deg) scaleY(1.12);
}

.raven-eclipse-cta:hover::after {
    transform: translate3d(-50%, -50%, 0) rotate(0);
    opacity: 1;
    filter: blur(0);
}

.raven-eclipse-cta:hover .raven-eclipse-cta__label {
    transform: translate3d(0, -115%, 0) rotate(-1deg);
    opacity: 0;
    filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
    .raven-eclipse-cta,
    .raven-eclipse-cta::before,
    .raven-eclipse-cta::after,
    .raven-eclipse-cta__label {
        transition: none;
    }
}

@media (hover: none) {
    .raven-eclipse-cta::before,
    .raven-eclipse-cta::after {
        display: none;
    }
}

a.raven-header__email.raven-eclipse-cta {
    margin-bottom:0px!important;
}