/* LEAP 2026 home-page popup.
   Loaded only by the home page (pushed from the leap-popup partial), so the
   dark palette below is scoped to .leap-popup and never leaks into the rest of
   the site, which is a light theme. */

/* Shared by the card and the side tab, so the tab inherits the same dark
   palette rather than restating it. Still scoped to these two selectors - the
   rest of the site is a light theme and must not pick these up. */
.leap-popup,
.leap-tab {
    /* Card palette. The brand red is reused for the booth number and the right
       end of the submit gradient so the popup still reads as MyTM. */
    --leap-ink: #04050e;
    --leap-line: rgba(255, 255, 255, 0.12);
    --leap-panel: rgba(255, 255, 255, 0.045);
    --leap-muted: #b6bacb;
    --leap-purple: #a06cff;
    --leap-blue: #4d94ff;
    --leap-red: #ec1b21;

    /* Lilac for the outline icons beside the event details. */
    --leap-icon: #a78bfa;

    /* The two accent phrases are gradients in the design, not flat colour -
       indigo through violet into magenta. The headline runs the full sweep; the
       event name starts bluer because it opens on "LEAP". */
    --leap-grad-accent: linear-gradient(90deg, #4b3fd6 0%, #8b43cf 48%, #de4599 100%);
    --leap-grad-name: linear-gradient(90deg, #4287f5 0%, #7b5be8 55%, #c94fa5 100%);
}

.leap-popup {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background-color: var(--leap-ink);
    color: #fff;
    font-family: "Albert Sans", sans-serif;
    /* Cool halo bleeding off the card, over the usual drop shadow - this is what
       lifts the popup off the dimmed page rather than letting it sit flat. */
    box-shadow:
        0 0 40px rgba(96, 124, 255, 0.28),
        0 0 130px rgba(96, 124, 255, 0.16),
        0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Lit rim. A gradient can't be painted into `border`, so the ring is a
   pseudo-element filled with the gradient and masked down to its own 1px
   padding box, leaving only the outline. Brightest at the top-left corner and
   picking up the accent purple at the bottom-right, as in the design. */
.leap-popup::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.26) 22%,
            rgba(255, 255, 255, 0.13) 50%,
            rgba(160, 108, 255, 0.36) 78%,
            rgba(160, 108, 255, 0.6) 100%);
    pointer-events: none;
    opacity: 0;
}

/* Without mask compositing the pseudo-element would cover the whole card, so
   the ring only turns on where the cut-out is actually supported. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .leap-popup::after {
        opacity: 1;
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
}

/* The photo and its scrim live on one layer so the whole thing can be graded
   together.

   The scrim is purely horizontal: heavy under the headline on the left, then
   lifting almost completely across the middle where the tower and the light
   trails are, then closing to solid ink before the form panel. There is
   deliberately no vertical pass - one used to run across the top and bottom and
   it flattened the neon into a grey haze, which is exactly the dulling that
   made the image read as shadowed rather than lit.

   The photo's own left third is dark city, so the headline still has something
   dark to sit on even where the scrim has thinned out. */
.leap-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(90deg,
            rgba(4, 5, 14, 0.94) 0%,
            rgba(4, 5, 14, 0.68) 14%,
            rgba(4, 5, 14, 0.34) 28%,
            rgba(4, 5, 14, 0.1) 42%,
            rgba(4, 5, 14, 0.05) 51%,
            rgba(4, 5, 14, 0.55) 57%,
            rgba(4, 5, 14, 0.95) 62%,
            var(--leap-ink) 67%),
        url("../images/popup-bg.jpg");
    background-size: auto, cover;
    background-position: center, center;
    /* Even a light scrim desaturates neon. Grading the layer back up is what
       makes the trails and the tower actually glow instead of sitting flat. */
    filter: saturate(1.4) brightness(1.1) contrast(1.06);
    pointer-events: none;
}

.leap-popup > * {
    position: relative;
    z-index: 1;
}

.leap-modal-dialog {
    max-width: min(1080px, calc(100vw - 2 * var(--page-gutter)));
}

/* Bootstrap appends the backdrop to <body>, so it can't be reached from the
   modal with a combinator. This file is only loaded on the home page, which has
   no other modal, so the plain class is safe here. */
.modal-backdrop {
    --bs-backdrop-bg: #04050e;
    --bs-backdrop-opacity: 0.72;
}

/* Side tab ---------------------------------------------------------------- */

/* The way back into the popup once it has been dismissed. Sits on every page,
   pinned to the right edge, below Bootstrap's modal layer (1050/1055) but above
   the fixed header (1000). */
.leap-tab {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1030;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 20px 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: rgba(4, 5, 14, 0.92);
    color: #fff;
    font-family: "Albert Sans", sans-serif;
    cursor: pointer;
    /* Backdrop blur so it settles onto whatever section it happens to overlap
       as the page scrolls, rather than fighting it. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: -6px 0 26px rgba(96, 124, 255, 0.3);
    transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}

/* Accent strip down the leading edge, carrying the same gradient as the
   headline so the tab reads as part of the popup. */
.leap-tab::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -1px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4287f5 0%, #7b5be8 55%, #c94fa5 100%);
}

.leap-tab__label {
    /* Reads top to bottom down the tab. */
    writing-mode: vertical-rl;
    font-size: var(--fs-14);
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    color: #d8dae6;
}

.leap-tab__label strong {
    font-weight: 700;
    color: #fff;
}

.leap-tab__glyph svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--leap-icon);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.leap-tab:hover,
.leap-tab:focus-visible {
    transform: translate(-4px, -50%);
    box-shadow: -10px 0 34px rgba(96, 124, 255, 0.48);
}

/* While the popup is open the tab would just sit behind the backdrop, so it
   slides out of the way and comes back when the modal closes. */
body.modal-open .leap-tab {
    opacity: 0;
    transform: translate(100%, -50%);
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .leap-tab {
        padding: 14px 7px 16px;
        gap: 8px;
    }

    .leap-tab__glyph svg {
        width: 15px;
        height: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leap-tab {
        transition: opacity 0.28s ease;
    }

    .leap-tab:hover,
    .leap-tab:focus-visible {
        transform: translateY(-50%);
    }
}

/* Close button ------------------------------------------------------------ */

.leap-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.leap-close:hover,
.leap-close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(90deg);
}

/* Two-column shell -------------------------------------------------------- */

/* The design leaves a wider gutter on the right than on the other three sides -
   that empty strip is where the close button sits, clear of the form panel. */
.leap-popup__body {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2.34375vw, 30px);
    padding: clamp(18px, 1.5625vw, 20px);
    padding-right: clamp(18px, 4.0625vw, 52px);
}

.leap-event {
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(8px, 0.9375vw, 12px) clamp(6px, 0.78125vw, 10px);
}

/* Side by side the panel is stretched to the event column's height. The form
   and its reassurance line are pushed to the bottom (see .leap-form) so the
   leftover height lands under the heading, as it does in the design, rather
   than as a hole beneath the last element. */
.leap-form-panel {
    flex: 0 0 clamp(280px, 33vw, 360px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: var(--leap-panel);
    /* Thin lit edge along the top, so the panel reads as glass catching the
       same light as the card rim. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    padding: clamp(18px, 1.71875vw, 22px);
    /* Blur only bites where the photo still shows through at narrow widths. */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Event panel ------------------------------------------------------------- */

.leap-event__lockup {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.9375vw, 12px);
    margin-bottom: clamp(16px, 1.875vw, 24px);
}

/* Both logos ship at 1x, so they are capped at their natural height and never
   scaled up past it. */
.leap-event__logo-mytm {
    height: clamp(30px, 3.125vw, 40px);
    width: auto;
}

.leap-event__logo-leap {
    height: clamp(15px, 1.5625vw, 20px);
    width: auto;
}

.leap-event__x {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--fs-14);
}

.leap-event__title {
    margin: 0 0 clamp(10px, 1.171875vw, 15px);
    font-size: var(--fs-40);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

/* Gradient text. The flat colour is the fallback; it is only swapped for a
   clipped gradient where the browser can actually paint one, otherwise the
   transparent fill would leave the phrase invisible. */
.leap-accent {
    color: var(--leap-purple);
}

.leap-form-panel__title .leap-event-name {
    color: var(--leap-blue);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .leap-accent,
    .leap-form-panel__title .leap-event-name {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* Safari needs the fill zeroed too, not just the colour. */
        -webkit-text-fill-color: transparent;
    }

    .leap-accent {
        background-image: var(--leap-grad-accent);
    }

    .leap-form-panel__title .leap-event-name {
        background-image: var(--leap-grad-name);
    }
}

/* An h2 in the markup so the copy carries weight for search, but it reads as
   supporting text - so the browser bold and heading margins are reset. */
.leap-event__lead {
    margin: 0 0 clamp(14px, 1.5625vw, 20px);
    max-width: 34ch;
    color: var(--leap-muted);
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.5;
}

.leap-facts {
    list-style: none;
    margin: 0 0 clamp(16px, 1.875vw, 24px);
    padding: 0;
    display: grid;
    gap: clamp(8px, 0.9375vw, 12px);
}

.leap-facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #e7e9f2;
    font-size: var(--fs-14);
    line-height: 1.45;
}

/* One shared base for every inline icon - stroke-drawn, sized off the text it
   sits beside, and coloured through `color` so each context can retint it. */
.leap-icon {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.leap-facts .leap-icon {
    margin-top: 0.12em;
    width: 1.25em;
    height: 1.25em;
    color: var(--leap-icon);
}

.leap-facts address {
    margin: 0;
    font-style: normal;
}

.leap-booth {
    color: var(--leap-red);
    font-weight: 700;
}

/* Form panel -------------------------------------------------------------- */

.leap-form-panel__title {
    margin: 0 0 6px;
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 1.25;
}

/* Same as .leap-event__lead - an h3 that must not look like one. */
.leap-form-panel__lead {
    margin: 0 0 clamp(12px, 1.25vw, 16px);
    color: var(--leap-muted);
    font-size: var(--fs-14);
    font-weight: 400;
    line-height: 1.45;
}

.leap-form {
    margin-top: auto;
}

.leap-row {
    margin-bottom: 10px;
}

.leap-field {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--leap-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-14);
    line-height: 1.4;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.leap-field::placeholder {
    color: #8a8fa4;
}

.leap-field:focus {
    outline: none;
    border-color: rgba(160, 108, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

/* The interest field carries its label inside the box, as in the design, so the
   wrapper draws the border and the textarea itself stays bare. */
.leap-field--boxed label {
    display: block;
    margin-bottom: 4px;
    color: #8a8fa4;
    font-size: var(--fs-14);
    line-height: 1.4;
}

.leap-field--boxed textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-14);
    line-height: 1.4;
    resize: vertical;
}

.leap-field--boxed textarea:focus {
    outline: none;
}

.leap-field--boxed:focus-within {
    border-color: rgba(160, 108, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

.leap-error {
    display: block;
    margin-top: 4px;
    color: #ff7b7f;
    font-size: var(--fs-12);
}

/* Form-level failures sit above the button, boxed so they don't read as a
   caption on the field above them. Collapsed entirely while empty. */
.leap-error--form {
    margin: 2px 0 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 123, 127, 0.35);
    border-radius: 8px;
    background: rgba(255, 123, 127, 0.08);
    font-size: var(--fs-13);
    line-height: 1.4;
}

.leap-error--form:empty {
    display: none;
}

.leap-field.is-invalid {
    border-color: #ff7b7f;
}

.leap-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    /* Blue holds through the first half and only turns over to brand red near
       the arrow, as in the design - an even blend reads magenta in the middle. */
    background: linear-gradient(90deg, #2b6cff 0%, #3f56e6 50%, #8f37a6 76%, var(--leap-red) 100%);
    box-shadow: 0 8px 26px rgba(74, 76, 230, 0.38);
    color: #fff;
    font-size: var(--fs-16);
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.leap-submit:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 10px 32px rgba(74, 76, 230, 0.52);
}

.leap-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.leap-submit .leap-icon {
    width: 1.05em;
    height: 1.05em;
    stroke-width: 2;
}

.leap-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
    color: var(--leap-muted);
    font-size: var(--fs-13);
}

.leap-note .leap-icon {
    color: var(--leap-icon);
}

/* Shown in place of the form once the request goes through. */
.leap-success {
    display: none;
    /* Centres itself in the height the hidden form leaves behind. */
    margin: auto 0;
    text-align: center;
    padding: clamp(20px, 2.34375vw, 30px) 0;
}

.leap-success i {
    color: #3ddc97;
    font-size: var(--fs-32);
}

.leap-success h4 {
    margin: 12px 0 6px;
    font-size: var(--fs-20);
    font-weight: 700;
}

.leap-success p {
    margin: 0;
    color: var(--leap-muted);
    font-size: var(--fs-14);
}

.leap-form-panel.is-sent .leap-form,
.leap-form-panel.is-sent .leap-form-panel__lead,
.leap-form-panel.is-sent .leap-note {
    display: none;
}

.leap-form-panel.is-sent .leap-success {
    display: block;
}

/* Stacked layout ---------------------------------------------------------- */

/* Below the lg breakpoint the two panels stack, so the horizontal fade would
   wipe out the skyline entirely - swap it for a vertical one. Stacked, the
   heading and the fact list sit straight over the brightest part of the photo,
   so the scrim stays heavy the whole way down and the skyline reads as texture
   rather than as an image the text has to compete with. */
@media (max-width: 991.98px) {
    /* Stacked, every line of text lands on the middle of the photo instead of
       beside it, so the fade turns vertical: lit behind the lockup, closing
       down before the copy starts.

       `cover` is wrong here: on a card this tall and narrow it crops to a thin
       vertical slice, and whichever slice you pick is mostly dark city. Sizing
       by width instead keeps the composition intact and lets the crop be aimed,
       so the tower's lit crown lands in the one band with no text over it -
       behind the lockup. The stops are in px because that band is a fixed
       height, not a fraction of a card whose height depends on its content. */
    .leap-popup::before {
        background-image:
            linear-gradient(180deg,
                rgba(4, 5, 14, 0.28) 0px,
                rgba(4, 5, 14, 0.34) 62px,
                rgba(4, 5, 14, 0.88) 105px,
                rgba(4, 5, 14, 0.96) 170px,
                var(--leap-ink) 240px),
            url("../images/popup-bg.jpg");
        background-size: auto, 175% auto;
        background-position: center, 58% -60px;
        background-repeat: no-repeat, no-repeat;
    }

    .leap-popup__body {
        flex-direction: column;
    }

    .leap-form-panel {
        flex: 1 1 auto;
    }

    .leap-modal-dialog {
        max-width: min(560px, calc(100vw - 2 * var(--page-gutter)));
    }
}

/* The design's hard line breaks only make sense at full width. */
@media (max-width: 575.98px) {
    .leap-break {
        display: none;
    }

    .leap-event__lead {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leap-close,
    .leap-submit {
        transition: none;
    }

    .leap-close:hover,
    .leap-close:focus-visible {
        transform: none;
    }
}