/* Main page styles: logo scroll animation + basic layout */

html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

:root {
    /* Mobile scroll range (as requested): 0..500vh */
    --scroll-range-vh: 140;

    /*
     * Logo width animation (mobile only).
     * Start is intentionally huge so only the first symbol is visible (header clips overflow).
     * End should fit into the mobile viewport.
     */
    --logo-width-start: 625%;
    --logo-width-end: 117%;

    /* Gap between "symbols" (paths) in the SVG: 5% -> 0% */
    --logo-gap-start: 5%;
    --logo-gap-end: 0%;

    /* Vertical padding (fixed; no scroll-driven shift) */

    /* Horizontal padding */
    --logo-pad-x: 2em;

    /* Driven by JS (0..1) */
    --logo-progress: 0;
}

p {
    font-family: "Inter Tight";
}

body {
    /* ensures there is scroll; requested "max scroll = 500vh" */
    min-height: calc(var(--scroll-range-vh) * 1vh);
}

header {
    /* Padding is fixed; logo should not shift down while scrolling */
    padding-left: var(--logo-pad-x);
    padding-right: var(--logo-pad-x);
    padding-top: 0;
    padding-bottom: 0;

    /* keep it stable while you scroll */
    position: sticky;
    top: 0;

    /* prevent huge logo from adding horizontal scroll + crop so only first symbol is visible at start */
    overflow: hidden;

    /* helps keep sticky header from collapsing */
    min-height: 1px;

    background: white;
}

/* Default (desktop/tablet): show final state immediately */
.logo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 3em;
}

.header__caption {
    margin-top: 1em;
    text-align: center;
    font-size: 140%;
}

/* Only mobile animation */
@media (max-width: 767px) {
    .logo {
        width: calc(
            var(--logo-width-start) +
                (var(--logo-width-end) - var(--logo-width-start)) *
                var(--logo-progress)
        );

        /* avoid any UA default constraints */
        max-width: none;

        /* keep it aligned in a predictable way while it shrinks */
        transform-origin: left top;
        will-change: width;
    }
}

/* On tablet/desktop: disable sticky behavior + show final padding */
@media (min-width: 768px) {
    body {
        min-height: auto;
    }

    header {
        position: static;
        padding-top: 0;
        padding-left: 2em;
        padding-right: 2em;
    }
}