/* The Build Useful website: for now, only the name.
   Classes use the site- prefix. */

/* The page is always dark, whatever the system theme. */
:root {
    color-scheme: dark;
    --site-background: #181818;
    --site-first-from: #dcdcdc;
    --site-first-to: #d0d0d0;
    --site-second-from: #bcbcbc;
    --site-second-to: #a4a4a4;
    --site-stop: #777777;
}

body {
    background: var(--site-background);
}

/* The name is centred on the page as a block; its lines stay left-aligned. */
.site-main {
    display: grid;
    grid-template-rows: 1fr;
    place-items: center;
    min-block-size: 100dvh;
    padding: var(--space-8);
    background: var(--site-background);
}

.site-name {
    margin: 0;
    /* Impact is asked for by name: a system font, no webfont. Set through the
       system's own font token so it stays the one font on the page. */
    --font-family-sans: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-family: var(--font-family-sans);
    font-size: min(9vw, 16dvh);
    font-weight: 400;
    line-height: 1.02;
    text-align: start;
    transition: opacity 700ms var(--ease-settle), translate 700ms var(--ease-settle);

    @starting-style {
        opacity: 0;
        translate: 0 0.4rem;
    }
}

/* Each line is shaded from light to a little darker; the second is dimmer. */
.site-name > span {
    display: block;
    width: fit-content;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.site-name > span {
    background-image: var(--site-fill);
}

.site-name > span:first-child {
    --site-fill: linear-gradient(to bottom, var(--site-first-from), var(--site-first-to));
}

.site-name > span:last-child {
    --site-fill: linear-gradient(to bottom, var(--site-second-from), var(--site-second-to));
}

/* With a mouse, site.js lays a canvas of water over the whole page and draws
   the name under it. The heading's own text stays in place, transparent, so
   it is still read and selected. The canvas fades in as the heading does. */
.site-water {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    transition: opacity 700ms var(--ease-settle);

    @starting-style {
        opacity: 0;
    }
}

.site-name.is-water > span {
    opacity: 0;
}

/* A finger dragged across the page stirs the water rather than scrolling
   the page or pulling it to refresh; pinch zoom still works. Dragging or a
   long press stirs the water rather than selecting the (invisible) heading. */
html:has(.site-water) {
    overscroll-behavior: none;
    touch-action: pinch-zoom;
}

.site-name.is-water {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* The full stop is the only accent: a flat mid grey circle, drawn rather than
   typed so it is round on every device. */
.site-stop {
    display: inline-block;
    inline-size: 0.2em;
    block-size: 0.2em;
    margin-inline-start: 0.04em;
    border-radius: 50%;
    background: var(--site-stop);
}

@media (prefers-reduced-motion: reduce) {
    .site-name {
        transition: none;
    }
}

/* Pull the second line up under the first. Done with a margin rather than a
   smaller line height so the shaded text is never clipped by its own box. */
.site-name > span:last-child {
    margin-block-start: -0.14em;
}