/*
 * Polish layer for index.html and credits.html.
 * Loaded after main.css so the Webflow export stays untouched.
 * Palette: #020202 ink, #fff paper, #50eb97 green (main.css tokens).
 */

/* ---------- Browser surfaces ---------- */

::-moz-selection {
    background-color: #50eb97;
    color: #020202;
}
::selection {
    background-color: #50eb97;
    color: #020202;
}

html {
    caret-color: #50eb97;
    scrollbar-color: #50eb97 #020202;
    scrollbar-width: thin;
}

html :focus-visible {
    outline: 2px solid #50eb97;
    outline-offset: 3px;
}
.c-promo_section.-red :focus-visible,
.c-nav :focus-visible {
    outline-color: #020202;
}

/* ---------- Footer legal links (were inline styles) ---------- */

.c-footer_item.-right {
    text-align: right;
}
.c-footer_legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4em 1.6em;
    font-size: .7857142857rem;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}
.c-footer_legal a {
    color: inherit;
    text-decoration: none;
    opacity: .7;
    transition: opacity .2s cubic-bezier(.4, 0, 0, 1), color .2s cubic-bezier(.4, 0, 0, 1);
}
.c-footer_legal a:hover,
.c-footer_legal a:focus-visible {
    color: #50eb97;
    opacity: 1;
}
.c-footer_copy {
    margin: .7em 0 0;
    font-size: .7142857143rem;
    letter-spacing: .04em;
    opacity: .5;
    white-space: nowrap;
}
@media (max-width: 999px) {
    .c-footer_item.-left {
        width: 40%;
    }
    .c-footer_item.-right {
        width: 60%;
    }
}

/* ---------- Stat lists: hanging bullets, calmer wrap ---------- */

.c-credits.-big .c-credits_list_item {
    padding-left: 1.35em;
    text-indent: -1.35em;
    line-height: 1.08;
}
.c-credits.-big .c-credits_list_item + .c-credits_list_item {
    margin-top: .3em;
}

/* Gray items had opacity .4 before their reveal, so they slid in already visible. */
.c-credits_list_item.-gray:not(.is-show) {
    opacity: 0;
}

/* ---------- Phone width ---------- */

@media (max-width: 699px) {
    /* The blank + "Bike" line ran past the viewport on longer brand names. */
    .c-logos-slider_info_title {
        font-size: min(4.2857142857rem, 9vw);
    }
    .c-credits.-big .c-credits_list_item {
        font-size: 1.5714285714rem;
    }
    .c-press-clipping_author .o-layout_item:first-child {
        width: 100%;
    }
    /* Side-by-side halves were too narrow; socials and legal wrapped mid-row. */
    .c-footer_item.-left,
    .c-footer_item.-right {
        width: 100%;
    }
    .c-footer_item.-right {
        margin-top: .5rem;
        padding-left: 8.3333333333vw;
        text-align: left;
    }
    .c-footer_legal {
        justify-content: flex-start;
    }
}

/* ---------- Authored moment: the blank gets signed ----------
 * "Your" is written onto its underline like a name on a signature line:
 * the line draws in green, the word follows the pen, the ink settles to white.
 * Hooked to the site's own js-animate reveal (adds .is-show in view).
 */

.c-blank-line {
    position: relative;
    display: inline-block;
}
.c-blank-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .02em;
    height: max(2px, .055em);
    background-color: currentColor;
    transform-origin: 0 50%;
    transition:
        transform .9s cubic-bezier(.65, 0, .35, 1) .2s,
        background-color .7s cubic-bezier(.4, 0, 0, 1) 1.3s;
}
.c-blank-line_word {
    display: inline-block;
    clip-path: inset(-15% 0 -15% 0);
    transition: clip-path .9s cubic-bezier(.65, 0, .35, 1) .38s;
}
.has-js .c-blank-line:not(.is-show)::after {
    background-color: #50eb97;
    transform: scaleX(0);
    transition: none;
}
.has-js .c-blank-line:not(.is-show) .c-blank-line_word {
    clip-path: inset(-15% 100% -15% 0);
    transition: none;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    /* No scroll-linked parallax; elements sit at rest. */
    [data-speed] {
        transform: none !important;
    }

    /* Reveals keep their fade but lose the slide. */
    .c-credits_list_item,
    .u-anim-fade-scroll,
    .u-anim-fade-scroll-parent,
    .c-press-clipping_author_name {
        transform: none !important;
    }

    /* The signature moment becomes a quiet fade. */
    .c-blank-line::after,
    .c-blank-line_word {
        clip-path: none;
        transform: none;
        transition: opacity .4s ease;
    }
    .has-js .c-blank-line:not(.is-show)::after,
    .has-js .c-blank-line:not(.is-show) .c-blank-line_word {
        clip-path: none;
        transform: none;
        background-color: currentColor;
        opacity: 0;
    }
}