.email-copy-impact {
    --copy-x: 50vw;
    --copy-y: 50vh;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.email-copy-impact__wash {
    position: absolute;
    inset: 0;
    background: #79ee9d;
    opacity: 0;
    animation: email-copy-wash 820ms cubic-bezier(.16, 1, .3, 1) both;
}

.email-copy-impact__ring {
    position: absolute;
    left: var(--copy-x);
    top: var(--copy-y);
    width: 52px;
    height: 52px;
    border: 3px solid #0a0a0a;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #79ee9d, 0 0 0 10px #0a0a0a;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1);
    animation: email-copy-ring 900ms cubic-bezier(.16, 1, .3, 1) both;
}

.email-copy-impact__rays {
    position: absolute;
    left: var(--copy-x);
    top: var(--copy-y);
    width: 0;
    height: 0;
}

.email-copy-impact__rays i {
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 4px;
    height: min(20vw, 190px);
    background: #0a0a0a;
    transform: rotate(var(--ray-angle)) translateY(-42px) scaleY(0);
    transform-origin: 50% 100%;
    animation: email-copy-ray 720ms cubic-bezier(.16, 1, .3, 1) var(--ray-delay) both;
}

.email-copy-impact__ticker {
    position: absolute;
    left: -4vw;
    width: 108vw;
    min-width: max-content;
    padding: 8px 0 7px;
    overflow: hidden;
    background: #0a0a0a;
    color: #79ee9d;
    font-size: clamp(10px, 1.1vw, 14px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    white-space: nowrap;
    opacity: 0;
}

.email-copy-impact__ticker span {
    display: block;
    width: max-content;
}

.email-copy-impact__ticker--top {
    top: 9vh;
    transform: translateX(-110%) rotate(-1.3deg);
    animation: email-copy-ticker-top 920ms cubic-bezier(.16, 1, .3, 1) 35ms both;
}

.email-copy-impact__ticker--top span {
    animation: email-copy-ticker-text 1150ms linear both;
}

.email-copy-impact__ticker--bottom {
    bottom: 8vh;
    transform: translateX(110%) rotate(1.1deg);
    animation: email-copy-ticker-bottom 920ms cubic-bezier(.16, 1, .3, 1) 55ms both;
}

.email-copy-impact__ticker--bottom span {
    animation: email-copy-ticker-text-reverse 1150ms linear both;
}

.email-copy-impact__word-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.email-copy-impact__word {
    position: relative;
    display: inline-block;
    color: #0a0a0a;
    font-family: "Syncopate", "Inter", sans-serif;
    font-size: clamp(58px, 14vw, 210px);
    font-weight: 700;
    line-height: .78;
    letter-spacing: -.09em;
    text-shadow: 8px 8px 0 rgba(255, 255, 255, .96);
    opacity: 0;
    transform: skewX(-7deg) scale(.55) rotate(-2deg);
    animation: email-copy-word 960ms cubic-bezier(.16, 1, .3, 1) 40ms both;
}

.email-copy-impact__word::before,
.email-copy-impact__word::after {
    content: attr(data-word);
    position: absolute;
    inset: 0;
    opacity: 0;
}

.email-copy-impact__word::before {
    color: #fff;
    clip-path: inset(13% 0 58% 0);
    animation: email-copy-glitch-a 700ms steps(2, end) 105ms both;
}

.email-copy-impact__word::after {
    color: #79ee9d;
    clip-path: inset(61% 0 8% 0);
    animation: email-copy-glitch-b 760ms steps(2, end) 85ms both;
}

.email-copy-impact__sub {
    display: table;
    margin: clamp(22px, 4vw, 44px) auto 0;
    padding: 10px 16px;
    border: 2px solid #0a0a0a;
    background: #79ee9d;
    color: #0a0a0a;
    font-size: clamp(9px, 1.1vw, 13px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .2em;
    opacity: 0;
    transform: translateY(24px) rotate(1.5deg);
    animation: email-copy-sub 780ms cubic-bezier(.16, 1, .3, 1) 120ms both;
}

@keyframes email-copy-wash {
    0% { opacity: 0; }
    10% { opacity: .94; }
    54% { opacity: .26; }
    100% { opacity: 0; }
}

@keyframes email-copy-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
    12% { opacity: 1; }
    70% { opacity: .72; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(19); }
}

@keyframes email-copy-ray {
    0% { opacity: 0; transform: rotate(var(--ray-angle)) translateY(-42px) scaleY(0); }
    15% { opacity: 1; }
    58% { opacity: .9; transform: rotate(var(--ray-angle)) translateY(-42px) scaleY(1); }
    100% { opacity: 0; transform: rotate(var(--ray-angle)) translateY(-150px) scaleY(.22); }
}

@keyframes email-copy-ticker-top {
    0% { opacity: 0; transform: translateX(-110%) rotate(-1.3deg); }
    18%, 70% { opacity: 1; transform: translateX(0) rotate(-1.3deg); }
    100% { opacity: 0; transform: translateX(110%) rotate(-1.3deg); }
}

@keyframes email-copy-ticker-bottom {
    0% { opacity: 0; transform: translateX(110%) rotate(1.1deg); }
    18%, 70% { opacity: 1; transform: translateX(0) rotate(1.1deg); }
    100% { opacity: 0; transform: translateX(-110%) rotate(1.1deg); }
}

@keyframes email-copy-ticker-text {
    from { transform: translateX(0); }
    to { transform: translateX(-13%); }
}

@keyframes email-copy-ticker-text-reverse {
    from { transform: translateX(-13%); }
    to { transform: translateX(0); }
}

@keyframes email-copy-word {
    0% { opacity: 0; transform: skewX(-7deg) scale(.55) rotate(-2deg); filter: blur(8px); }
    17% { opacity: 1; transform: skewX(-7deg) scale(1.08) rotate(-2deg); filter: blur(0); }
    28%, 66% { opacity: 1; transform: skewX(-7deg) scale(1) rotate(-2deg); filter: blur(0); }
    100% { opacity: 0; transform: skewX(-7deg) scale(1.16) rotate(-2deg); filter: blur(2px); }
}

@keyframes email-copy-glitch-a {
    0%, 18%, 35%, 54%, 100% { opacity: 0; transform: translate(0); }
    20%, 33% { opacity: .95; transform: translate(-13px, -3px); }
    56%, 70% { opacity: .85; transform: translate(10px, 2px); }
}

@keyframes email-copy-glitch-b {
    0%, 12%, 43%, 70%, 100% { opacity: 0; transform: translate(0); }
    14%, 41% { opacity: 1; transform: translate(14px, 4px); }
    72%, 82% { opacity: .9; transform: translate(-9px, -2px); }
}

@keyframes email-copy-sub {
    0% { opacity: 0; transform: translateY(24px) rotate(1.5deg); }
    22%, 68% { opacity: 1; transform: translateY(0) rotate(1.5deg); }
    100% { opacity: 0; transform: translateY(-10px) rotate(1.5deg); }
}

@media (max-width: 640px) {
    .email-copy-impact__word {
        font-size: clamp(48px, 16vw, 92px);
        text-shadow: 5px 5px 0 rgba(255, 255, 255, .96);
    }

    .email-copy-impact__ticker {
        padding: 7px 0 6px;
        letter-spacing: .18em;
    }

    .email-copy-impact__rays i {
        height: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .email-copy-impact__wash,
    .email-copy-impact__ring,
    .email-copy-impact__rays,
    .email-copy-impact__ticker,
    .email-copy-impact__word-wrap {
        display: none;
    }
}
