#home {
    overflow: hidden;
}

.fill > h1 {
    position: absolute;
    bottom: 0%;
    right: 100%;
    transform: translate(110%, 0%);
    width: max-content;
    white-space: nowrap;
    padding: 28px;

    color: var(--secondary);
    z-index: 2;
}

menu > img,
html.menu-open menu > img {
    filter: invert(1);
}

main {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    z-index: -3;
    filter: blur(0px) brightness(100%);
    transition: filter 0.3s ease;
}

gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(circle at 70% 40%,
        rgb(from var(--background) r g b / 0) 40%,
        var(--background) 70%);
}

gradient.corner {
    inset: auto;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    background-image: radial-gradient(circle at 100% 0%,
        var(--background) 0%,
        rgb(from var(--background) r g b / 0) 70%);
}

main.blurred {
    filter: blur(5px) brightness(65%);
}

.fill {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: width 0.4s, height 0.4s;
}

#hero-image {
    transition: opacity 0.5s ease;
}

#hero-image.fading {
    opacity: 0;
}

blurb > p {
    font-size: clamp(1rem, 2dvw, 1.5rem);
    color: var(--background);
}

spacer {
    display: block;
    height: var(--vh, 100dvh);
    width: 100%;
}

@media screen and (max-width: 600px) {
    .fill > h1 {
        transform: translate(100%, 0%);
    }

    /* Cream reads heavier than black did, so pull the fade further out and
       hold the clear centre wider - otherwise the photo feels boxed in. */
    gradient {
        background-image: radial-gradient(circle at 70% 40%,
            rgb(from var(--background) r g b / 0) 55%,
            var(--background) 90%);
    }
}