@font-face {
    font-family: "Montserrat";
    src:
        url("/fonts/Montserrat-Bold.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;

    --background: #050505;

    --gold: #d4af6a;
    --gold-bright: #e4c27c;
    --gold-muted: #8f7646;

    --title: #e7d7b5;
    --navigation: #bfaf96;
    --footer: #756d63;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

html {
    background: var(--background);
}

body {
    min-width: 320px;

    background:
        radial-gradient(
            circle at 50% 35%,
            #111 0,
            #080808 28%,
            var(--background) 62%
        );

    color: var(--gold);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible {
    outline: 1px solid var(--gold-bright);
    outline-offset: 8px;
}

.landing {
    display: grid;
    grid-template-rows: 1fr auto;

    min-height: 100vh;
    min-height: 100svh;

    padding:
        clamp(2rem, 5vw, 4rem)
        clamp(1.25rem, 5vw, 4rem)
        1.4rem;
}

.landing__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1200px;

    margin-inline: auto;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.landing__icon {
    width: clamp(92px, 10vw, 145px);

    aspect-ratio: 1 / 1;

    background: var(--gold);

    -webkit-mask:
        url("/images/logo-icon.svg")
        center / contain
        no-repeat;

    mask:
        url("/images/logo-icon.svg")
        center / contain
        no-repeat;

    opacity: 0;

    filter:
        drop-shadow(
            0 0 18px
            rgb(212 175 106 / 12%)
        );

    animation:
        icon-arrive
        1.25s
        cubic-bezier(.16, .84, .32, 1)
        .15s
        forwards;
}

@keyframes icon-arrive {
    0% {
        opacity: 0;
        transform:
            translateY(-95px)
            scale(.96);
    }

    65% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Name
|--------------------------------------------------------------------------
*/

.landing__name {
    min-height: 1.3em;

    margin:
        clamp(1.6rem, 3.5vh, 2.8rem)
        0
        0;

    color: var(--title);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(1.9rem, 4.2vw, 4rem);

    font-weight: 700;
    line-height: 1.08;

    letter-spacing:
        clamp(.015em, .3vw, .065em);
}

.landing__typed {
    white-space: nowrap;
}

.landing__typed.is-typing::after {
    display: inline-block;

    margin-left: .08em;

    color: var(--gold-bright);

    content: "|";

    font-family:
        "Montserrat",
        sans-serif;

    animation:
        cursor-blink
        .72s
        steps(1)
        infinite;
}

.landing__typed.is-complete::after {
    display: inline-block;

    margin-left: .08em;

    color: var(--gold-bright);

    content: "|";

    animation:
        cursor-finish
        1.4s
        steps(1)
        forwards;
}

@keyframes cursor-blink {
    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

@keyframes cursor-finish {
    0%,
    30%,
    60% {
        opacity: 1;
    }

    15%,
    45%,
    75%,
    100% {
        opacity: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Literaturbereiche
|--------------------------------------------------------------------------
*/

.landing__navigation {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: min(100%, 980px);

    margin-top:
        clamp(2.7rem, 5.8vh, 4.8rem);

    opacity: 0;

    animation:
        content-reveal
        .9s
        ease
        1.35s
        forwards;
}

.landing__link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 5rem;

    padding:
        1.1rem
        clamp(1rem, 2.5vw, 2.4rem);

    color: var(--navigation);

    font-size:
        clamp(1rem, 1.55vw, 1.32rem);

    font-weight: 400;
    line-height: 1.35;

    letter-spacing: .055em;

    transition:
        color .25s ease,
        transform .25s ease;
}

.landing__link + .landing__link::before {
    position: absolute;

    top: 22%;
    bottom: 22%;
    left: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgb(212 175 106 / 20%),
            transparent
        );

    content: "";
}

.landing__link::after {
    position: absolute;

    right: 28%;
    bottom: .7rem;
    left: 28%;

    height: 1px;

    background: var(--gold-bright);

    content: "";

    opacity: .85;

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform .3s ease;
}

.landing__link:hover {
    color: var(--gold-bright);

    transform:
        translateY(-2px);
}

.landing__link:hover::after,
.landing__link:focus-visible::after {
    transform: scaleX(1);
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.landing__footer {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: .75rem;

    padding-top: 2rem;

    color: var(--footer);

    font-size: .74rem;
    line-height: 1.5;

    letter-spacing: .09em;

    opacity: 0;

    animation:
        content-reveal
        .9s
        ease
        1.55s
        forwards;
}

.landing__footer a {
    transition:
        color .2s ease;
}

.landing__footer a:hover {
    color: var(--gold-bright);
}

@keyframes content-reveal {
    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {
    .landing {
        padding:
            2rem
            1.25rem
            1.25rem;
    }

    .landing__icon {
        width:
            clamp(88px, 28vw, 120px);
    }

    .landing__name {
        width: 100%;
        max-width: calc(100vw - 3rem);

        margin-inline: auto;

        font-size:
            clamp(1.65rem, 7.8vw, 2.8rem);

        letter-spacing: .018em;
    }

    .landing__typed {
        display: inline-block;
        max-width: 100%;
    }

    .landing__navigation {
        grid-template-columns: 1fr;

        width: min(100%, 360px);

        margin-top: 3rem;
    }

    .landing__link {
        min-height: auto;

        padding:
            1.05rem
            .5rem;
    }

    .landing__link + .landing__link::before {
        top: 0;
        right: 30%;
        bottom: auto;
        left: 30%;

        width: auto;
        height: 1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgb(212 175 106 / 42%),
                transparent
            );
    }

    .landing__link::after {
        right: 35%;
        left: 35%;
        bottom: .45rem;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .landing__icon,
    .landing__navigation,
    .landing__footer {
        opacity: 1;

        animation: none;

        transform: none;
    }

    .landing__link {
        transition: none;
    }

    .landing__link::after {
        transition: none;
    }

    .landing__typed::after {
        display: none !important;
        animation: none !important;
    }
}