/*
 * CTA headline: full sentence on one line, with a dash between "that"
 * and "Thrives." that grows on scroll-into-view. Simultaneously,
 * "Thrives." slides off the right edge of the viewport (transform,
 * not layout) while a duplicate "Thrives." slides in from the left
 * edge of a second line — an Asteroids-style wraparound. Both driven
 * by the same one-shot .is-revealed toggle (see dash-reveal-once.js).
 *
 * Both dashes and both words now animate exclusively via `transform`
 * (scaleX for the dashes, translateX for the words) rather than
 * layout-affecting properties like `width`. This matters: `transform`
 * runs on the compositor thread, independent of the main thread,
 * while properties like `width` require a full layout recalculation
 * on the main thread every frame. Mixing the two caused the dashes to
 * visibly lag behind the words even when their distances and
 * durations were mathematically identical — putting everything on
 * the same rendering pathway removes that discrepancy at the root
 * rather than working around it.
 *
 * IMPORTANT: this relies on scaleX/translateX moving elements well
 * outside their normal box (deliberately, for the primary pair — see
 * below). Without overflow-x: hidden somewhere upstream, this would
 * grow the page's scrollable width during the animation — handled
 * below on #conway-text.
 */

:root {
    --cta-rule-height: 6px;
    --cta-rule-color: #000000; /* #a37864 brand "Gold" — matches the GoL cell color in conway-updated.js */
    --cta-row-gap: 15px;            /* space between the lead text and "Thrives." on the top row */
    --cta-wrap-duration: 5s;
    /* Custom curve: mild ease at the start (flat-ish initial tangent
       via the first pair), then a long, pronounced deceleration into
       the finish (the second pair front-loads most of the motion
       early, creating that "glides to a stop" tail) — standard
       ease-in-out is closer to symmetric and doesn't get this
       lopsided a feel. */
    --cta-wrap-easing: cubic-bezier(0.614, 0, 0, 1.024);
}

@media (min-width: 768px) {

    .conway-sect {
        /* backdrop-filter: blur(16px); */
        transition: backdrop-filter 0.8s ease-in-out;
    }

    /* .cta-headline {
        filter: blur(0);
        transition: filter 0.8s ease-in-out;
    } */

    .conway-sect:has(.cta-email-link:hover) {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: backdrop-filter 0.8s ease-in-out;
    }

    /* .conway-sect:has(.cta-email-link:hover) .cta-headline {
        filter: blur(8px);
        transition: filter 0.3s ease-in-out;
    } */

}

.cta-email-link:hover {
    opacity: 1;
}

/* .conway-sect {
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.5s;
}

.conway-sect:hover {
    backdrop-filter: blur(20px);
} */

#conway-text {
    overflow-x: hidden; /* required — see note above */
}

.cta-headline {
    font-size: 80px;
    letter-spacing: -0.08rem;
    line-height: 1.05;
    margin-bottom: 0.5em;
}

.cta-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--cta-row-gap);
    width: 100%;
}

.cta-row--bottom {
    position: relative; /* containing block for the absolutely-positioned secondary dash below */
    justify-content: flex-end; /* only ever governs "Thrives." — the dash is out of this flow entirely */
}

.cta-row-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cta-rule {
    height: var(--cta-rule-height);
    background-color: var(--cta-rule-color);
}

@media (max-width: 767px) {
    /* .cta-rule {
        height: var(--cta-rule-height);
        background-color: var(--cta-rule-color);
    } */
}

/* --- Primary dash: absolutely positioned inside the lead text --- */

.cta-lead-text {
    /* position:relative anchor for the dash below. inline-block so it
       shrink-wraps to exactly the text's own width — this is what
       lets left:100% on the dash place it flush after the text
       without any JS measurement. */
    display: inline-block;
    position: relative;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cta-dash {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 0.15em; /* small resting gap before the dash's small resting width */
    /* Small, font-relative base width — NOT viewport-relative. This
       is the actual bug fix: the previous version used width:100vw
       with a tiny scaleX for the resting state, but 0.02 * 100vw
       scales with screen width, not with the gap (which scales with
       font size) — on a wide monitor that resting sliver was bigger
       than the 32px gap it needed to fit inside, spilling into
       "Thrives." the whole time. A small em-based base width stays
       proportional to the text regardless of screen width. */
    width: 0.2em;
    transform-origin: left center;
    transform: translateY(-50%) scaleX(0); /* zero width at rest */
    transition: transform var(--cta-wrap-duration) var(--cta-wrap-easing);
}

.cta-headline.is-revealed .cta-dash {
    /* Precise multiplier (JS-computed to match the word's exact
       100vw distance) rather than an arbitrary "safely large" static
       value — an approximate constant was the actual bug: on a wide
       screen, an oversized guess made the dash travel further than
       the word in the same time, which is why it started looking
       faster instead of slower. See dash-reveal-once.js. */
    transform: translateY(-50%) scaleX(var(--dash-primary-scale, 200));
}

/* --- Secondary dash: absolutely positioned within row 2 --- */

.cta-dash-secondary {
    position: absolute;
    top: 50%;
    left: var(--dash-secondary-left, 0px); /* JS-measured: true viewport left edge, in this row's coordinate space */
    /* EXPERIMENT: full final size, static, not grown — instead
       positioned fully off-screen at rest and slid into place, same
       motion type as the word (both rigid shapes translating) rather
       than one thing growing and one thing sliding. The leading-edge
       math is provably identical either way (verified: the gap
       between dash-tip and word-edge is constant throughout in both
       versions) — this is testing whether the *type* of motion, not
       the distance, is what read as "head start." */
    width: var(--dash-secondary-target, 3em);
    transform: translateY(-50%) translateX(calc(-1 * var(--dash-secondary-target, 100vw)));
    transition: transform var(--cta-wrap-duration) var(--cta-wrap-easing);
}

.cta-headline.is-revealed .cta-dash-secondary {
    transform: translateY(-50%) translateX(0);
}

/* --- The wraparound word pair --- */

.cta-word-primary {
    display: inline-block; /* required for transform to behave predictably on an inline element */
    transform: translateX(0);
    transition: transform var(--cta-wrap-duration) var(--cta-wrap-easing);
}

.cta-word-secondary {
    display: inline-block;
    /* Starts exactly as far left as the paired dash needs to grow
       right (same variable, negated) — guarantees identical travel
       distance, not just a similar one. */
    transform: translateX(calc(-1 * var(--dash-secondary-target, 100vw)));
    transition: transform var(--cta-wrap-duration) var(--cta-wrap-easing);
}

.cta-headline.is-revealed .cta-word-primary {
    /* Comparable viewport-scale distance to the primary dash's own
       scaleX growth (both effectively ~100vw), without needing JS
       measurement for either — the primary pair doesn't need to land
       at an exact spot, just exit convincingly. */
    transform: translateX(100vw);
}

.cta-headline.is-revealed .cta-word-secondary {
    transform: translateX(0);
}

/* --- Responsive --- */
/* Starting point only — tune to your actual scale. Font-size/position
   are read live by conway-updated.js, so no JS changes needed here. */
@media (max-width: 1399px) {
    .cta-headline {
        font-size: 64px;
    }
}

@media (max-width: 991px) {
    .cta-headline {
        font-size: 44px;
    }
    :root {
        --cta-rule-height: 4px;
        --cta-row-gap: 6px;
    }
}

@media (max-width: 767px) {
    :root {
        --cta-rule-height: 2px;
        --cta-row-gap: 5px;
    }
    /* conway-updated.js already bails out below 768, and this is a
       lot of simultaneous motion for a small screen regardless —
       simplest safe fallback is to just skip the wraparound/dash
       animation and render everything statically in place. */
    .cta-headline {
        font-size: 6vw;
    }
    /* .cta-dash {
        position: static;
        width: 24px;
        transform: none;
        margin-left: 0;
    }
    .cta-dash-secondary {
        position: static;
        width: 24px;
        transform: none;
    } */
    /* .cta-word-primary,
    .cta-word-secondary {
        transform: none !important;
        transition: none;
    } */
    /* .cta-row--bottom {
        display: none;
    } */
}