* {
    box-sizing: border-box;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #000;
}

.hero {
    position: relative;

    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;

    overflow: hidden;

    background-color: #000;
}

.hero-scene {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(100vw, 75vh);
    width: min(100vw, 75dvh);

    aspect-ratio: 3 / 4;

    background-image: url("../assets/images/spam.jpg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    transform: translate(-50%, -50%);
}

/* Navigation */

.menu {
    position: absolute;
    z-index: 2;

    top: clamp(0.8rem, 3vw, 2rem);
    right: clamp(0.8rem, 3vw, 2rem);

    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

.menu-button {
    display: block;

    min-width: 12rem;
    padding: 0.9rem 1.2rem;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.4rem;

    color: #fff;
    background: rgba(0, 0, 0, 0.58);

    text-decoration: none;
    text-align: center;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition:
        transform 120ms ease,
        background 120ms ease;
}

.menu-button:hover {
    transform: translateX(-0.35rem);
    background: rgba(0, 0, 0, 0.78);
}


/* Spinne */

.spider {
    position: absolute;
    z-index: 1;

    top: 17.2%;
    bottom: 0;
    left: 86.6%;

    width: 0;

    color: rgba(0, 0, 0, 0.88);
}

.spider-thread {
    position: absolute;

    top: 0;
    left: 0;

    width: 0.5px;
    height: 0;

    background: rgba(112, 112, 112, 0.9);

    transform-origin: top;

    animation: spider-thread-length 26s ease-in-out 5s infinite backwards;
}

.spider-link {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: clamp(2rem, 5vmin, 3.25rem);
    aspect-ratio: 1;

    transform: translate(calc(-50% + 0.3px), -4.9px);

    color: inherit;

    cursor: pointer;

    animation: spider-descent 26s ease-in-out 5s infinite backwards;
}

.spider-body {
    display: block;

    width: 100%;
    height: 100%;

    transform: rotate(180deg);
}

.spider-shape {
    filter: none;

    animation: spider-shadow 26s step-end 5s infinite backwards;
}

.spider-link:focus-visible {
    border-radius: 50%;
    outline: 2px solid #fff;
    outline-offset: 0.2rem;
}

.spider.has-started .spider-thread,
.spider.has-started .spider-link,
.spider.has-started .spider-shape {
    animation-delay: -2s;
}

.spider.is-returning .spider-thread,
.spider.is-returning .spider-link,
.spider.is-resting .spider-thread,
.spider.is-resting .spider-link {
    animation: none;
}

.spider.is-returning .spider-thread {
    height: var(--spider-return-start);

    animation: spider-thread-return var(--spider-return-duration) ease-in forwards;
}

.spider.is-returning .spider-link {
    top: var(--spider-return-start);

    animation: spider-link-return var(--spider-return-duration) ease-in forwards;
}

.spider.is-returning .spider-shape,
.spider.is-resting .spider-shape {
    animation: none;
}

.spider.is-returning .spider-shape {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
}

.spider.is-resting .spider-thread {
    height: 0;
}

.spider.is-resting .spider-link {
    top: 0;
}

.spider.is-resting .spider-shape {
    filter: none;
}

@keyframes spider-thread-length {
    0%,
    7.692% {
        height: 0;
    }

    50%,
    57.692% {
        height: 49%;
    }

    100% {
        height: 0;
    }
}

@keyframes spider-descent {
    0%,
    7.692% {
        top: 0;
    }

    50%,
    57.692% {
        top: 49%;
    }

    100% {
        top: 0;
    }
}

@keyframes spider-thread-return {
    from {
        height: var(--spider-return-start);
    }

    to {
        height: 0;
    }
}

@keyframes spider-link-return {
    from {
        top: var(--spider-return-start);
    }

    to {
        top: 0;
    }
}

@keyframes spider-shadow {
    0%,
    7.691% {
        filter: none;
    }

    7.692%,
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
    }
}

/* Bildquelle */

.image-credit {
    position: absolute;

    left: 0.6rem;
    bottom: 0.5rem;

    padding: 0.25rem 0.4rem;

    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.48);

    font-size: 0.65rem;
}

.image-credit a {
    color: inherit;
}


/* Kleine Displays */

@media (max-width: 600px) {

    .menu {
        left: 0.7rem;
        top: 0.7rem;
        right: 0.7rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-button {
        min-width: 0;
        padding: 0.75rem 0.55rem;

        font-size: 0.84rem;
    }

    .image-credit {
        max-width: calc(100% - 1.2rem);

        font-size: 0.58rem;
    }
}


/* Nutzer möchte keine Animation */

@media (prefers-reduced-motion: reduce) {

    .spider-thread,
    .spider-link,
    .spider-shape {
        animation: none;
    }

    .spider-thread {
        height: 0;
    }

    .spider-link {
        top: 0;
    }

    .spider-shape {
        filter: none;
    }

    .menu-button {
        transition: none;
    }
}