.landing-product-pitch {
    --landing-product-pitch-muted: 0.16;
    --landing-product-pitch-visual-nudge: 2px;
    --landing-product-pitch-original-screens: 2.5;
    --landing-product-pitch-illustration-opacity: 0.7;
    --landing-product-pitch-illustration-filter: grayscale(1) saturate(0) brightness(0.78) contrast(0.88);
    position: relative;
    min-height: 500svh;
    color: var(--landing-text, #eeeeee);
    background:
        radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--landing-text, #eeeeee) 3%, transparent), transparent 34%),
        var(--landing-canvas, #020203);
    border-block: 1px solid color-mix(in srgb, var(--landing-text, #eeeeee) 5%, transparent);
    view-timeline: --landing-product-pitch block;
}

.landing-product-pitch__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(6rem, 11vw, 10rem) clamp(1.25rem, 5vw, 4rem);
    overflow: hidden;
}

.landing-product-pitch__copy {
    width: min(100%, 66rem);
    display: grid;
    justify-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.landing-product-pitch__star-flight {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: block;
    width: min(calc(59.616vmin - 129.6px), 39.852rem);
    aspect-ratio: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(
            calc(-50% + var(--pitch-star-origin-x, 0px)),
            calc(-50% + var(--pitch-star-origin-y, 0px))
        )
        scale(var(--pitch-star-origin-scale, 0.04));
    transform-origin: center;
}

.landing-product-pitch__star-flight img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--landing-product-pitch-illustration-filter);
}

.landing-product-pitch__line {
    margin: 0;
    max-width: 24ch;
    /* Previous pitch typeface: var(--font-primary, Inter, ui-sans-serif, system-ui, sans-serif); */
    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
    font-size: clamp(2rem, 4.15vw, 4.25rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.12;
    letter-spacing: -0.045em;
    text-align: center;
    text-wrap: balance;
}

.landing-product-pitch__line--solution {
    max-width: 25ch;
}

.landing-product-pitch__unit {
    display: inline-block;
}

.landing-product-pitch__word {
    display: inline-block;
    white-space: nowrap;
}

.landing-product-pitch.is-ready .landing-product-pitch__unit {
    opacity: var(--landing-product-pitch-muted);
    filter: blur(12px);
    transform: translateY(0.14em);
    will-change: opacity, filter, transform;
}

.landing-product-pitch__visual {
    display: inline-grid;
    place-items: center;
    translate: 0 var(--landing-product-pitch-visual-nudge);
    min-width: 1.18em;
    height: 1.18em;
    margin-inline: 0.04em;
    vertical-align: -0.12em;
    font-size: 0.72em;
    letter-spacing: 0;
    border: 1px solid color-mix(in srgb, var(--landing-text, #eeeeee) 10%, transparent);
    border-radius: 0.34em;
    background: color-mix(in srgb, var(--landing-text, #eeeeee) 4%, var(--landing-canvas, #020203));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--landing-text, #eeeeee) 6%, transparent);
}

.landing-product-pitch__illustration {
    width: 1.28em;
    min-width: 1.28em;
    height: 1.28em;
    margin-inline: 0.01em;
    border: 1px solid color-mix(in srgb, var(--landing-text, #eeeeee) 7%, transparent);
    border-radius: 0.28em;
    background: color-mix(in srgb, var(--landing-text, #eeeeee) 3%, var(--landing-canvas, #020203));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--landing-text, #eeeeee) 4%, transparent);
    overflow: hidden;
}

.landing-product-pitch__illustration img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: var(--landing-product-pitch-illustration-opacity);
    filter: var(--landing-product-pitch-illustration-filter);
}

@keyframes landing-product-pitch-character {
    from {
        opacity: var(--landing-product-pitch-muted);
        filter: blur(12px);
        transform: translateY(0.14em);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes landing-product-pitch-visual {
    from {
        opacity: var(--landing-product-pitch-muted);
        filter: blur(12px);
        transform: translateY(0.14em) scale(0.82) rotate(-7deg);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes landing-product-pitch-copy-exit {
    from {
        opacity: 1;
        filter: brightness(1);
    }
    to {
        opacity: 0;
        filter: brightness(0.2);
    }
}

@keyframes landing-product-pitch-star-flight {
    0% {
        opacity: 0;
        filter: brightness(0.78) blur(0);
        transform: translate(
                calc(-50% + var(--pitch-star-origin-x, 0px)),
                calc(-50% + var(--pitch-star-origin-y, 0px))
            )
            scale(var(--pitch-star-origin-scale, 0.04));
    }
    8% {
        opacity: 1;
        filter: brightness(0.78) blur(0);
        transform: translate(
                calc(-50% + var(--pitch-star-origin-x, 0px)),
                calc(-50% + var(--pitch-star-origin-y, 0px))
            )
            scale(var(--pitch-star-origin-scale, 0.04));
    }
    68% {
        opacity: 1;
        filter: brightness(0.72) blur(0);
        transform: translate(-50%, -50%) scale(1);
    }
    82% {
        opacity: 1;
        filter: brightness(0.46) blur(0);
        transform: translate(-50%, -50%) scale(1.04);
    }
    100% {
        opacity: 0;
        filter: brightness(0.04) blur(8px);
        transform: translate(-50%, -50%) scale(1.12);
    }
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {
        .landing-product-pitch.is-ready .landing-product-pitch__unit {
            animation: landing-product-pitch-character 1s linear both;
            animation-timeline: --landing-product-pitch;
            animation-range: cover var(--pitch-start) cover var(--pitch-end);
        }

        .landing-product-pitch.is-ready .landing-product-pitch__visual {
            animation-name: landing-product-pitch-visual;
        }

        .landing-product-pitch.is-ready .landing-product-pitch__copy {
            animation: landing-product-pitch-copy-exit 1s linear both;
            animation-timeline: --landing-product-pitch;
            animation-range: cover var(--pitch-flight-start, 39%) cover var(--pitch-copy-exit-end, 48%);
        }

        .landing-product-pitch.is-ready .landing-product-pitch__star-flight {
            animation: landing-product-pitch-star-flight 1s linear both;
            animation-timeline: --landing-product-pitch;
            animation-range: cover var(--pitch-flight-start, 39%) cover var(--pitch-flight-end, 81%);
        }
    }
}

@media (max-width: 767px) {
    .landing-product-pitch {
        --landing-product-pitch-original-screens: 2.2;
        min-height: 440svh;
    }

    .landing-product-pitch__sticky {
        align-items: center;
        padding-inline: 1.25rem;
    }

    .landing-product-pitch__copy {
        gap: 1.75rem;
    }

    .landing-product-pitch__line {
        max-width: 18ch;
        font-size: clamp(2rem, 9.2vw, 3rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
    }

    .landing-product-pitch__star-flight {
        width: min(88vmin, 40rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-product-pitch {
        min-height: auto;
    }

    .landing-product-pitch__sticky {
        position: relative;
        min-height: auto;
        padding-block: clamp(7rem, 18vw, 12rem);
    }

    .landing-product-pitch.is-ready .landing-product-pitch__unit {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
        will-change: auto;
    }

    .landing-product-pitch__star-flight {
        display: none;
    }
}