/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

#home .content {
    display: grid;
}

/**
 * Details
 *
 * The ratio between title font size and available width is 0.365.
 * E. g. 100vw => 36.5rem, 31rem => 11.315 rem.
 */

/**
 * Header
 */

.opening {
    position: absolute;
    top: 5.4rem;
    overflow: hidden;
    min-width: 31rem;
    height: 25rem;
    pointer-events: none;
    transition: opacity 0.25s ease-in;
    animation-name: introduce;
    animation-duration: 0.25s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    z-index: 10000;
}

@media (min-width: 320px) {
    .opening {
        height: 80vw;
    }
}

.is-sliding .opening h1,
.is-sliding .opening a {
    will-change: transform;
    animation-name: bounce;
    animation-duration: 1.4s;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.is-sliding .opening a:nth-child(1) {
    animation-name: bounce1;
}

.is-sliding .opening a:nth-child(2) {
    animation-name: bounce2;
}

.is-sliding .opening a:nth-child(3) {
    animation-name: bounce3;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    12% {
        transform: translateY(5rem);
    }
}

@keyframes bounce1 {
    0%,
    100% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(6rem);
    }
}

@keyframes bounce2 {
    0%,
    100% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(7rem);
    }
}

@keyframes bounce3 {
    0%,
    100% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(8rem);
    }
}

@media (min-width: 500px) and (min-height: 500px) {
    .opening {
        top: 0;
        max-width: calc(100vw - 5.4rem);
    }
}

@supports (position: sticky) {
    .opening {
        position: sticky;
    }
}

@supports (position: -webkit-sticky) {
    .opening {
        position: -webkit-sticky;
    }
}

/* Title */

.opening h1 {
    color: #fff;
    font-size: 11.68rem;
    font-weight: var(--text-weight-extrablack);
    line-height: 1;
    text-indent: -1.28rem;
    text-shadow: 0 0 3rem rgba(0, 0, 0, 0.3), 0 0 0.1rem rgba(0, 0, 0, 0.5);
}

@media (min-width: 320px) {
    .opening h1 {
        font-size: 36.5vw;
        text-indent: -4vw;
    }
}

@supports (display: grid) {
    @media (min-width: 500px) and (min-height: 500px) {
        .opening h1 {
            margin-top: -5vw;
            font-size: calc((100vw - 5.4rem) * 0.365);
            text-indent: -3vw;
        }
    }
}

/**
 * Target Safari to fix zooming issues.
 */
@supports (zoom: reset) {
    .opening h1 {
        zoom: reset;
    }
}

/* Navigation */

.opening nav {
    display: flex;
    flex-direction: column;
    margin: -0.9rem 0 0.9rem;
    padding: 0 3.8rem 13rem 3.8rem /* 13rem = animation reach + figcaption */;
    font-weight: var(--text-weight-extrablack);
}

.opening a {
    display: inline-block;
    height: 3.8rem;
    color: rgba(255, 255, 255, 1);
    font-size: var(--text-size-4);
    line-height: 1;
    text-decoration: none;
    pointer-events: auto;
    text-shadow: 0 0 3rem rgba(0, 0, 0, 0.3), 0 0 0.1rem rgba(0, 0, 0, 0.5);
    transition: color 0.15s ease-in;
    zoom: reset;
}

@media (min-width: 320px) {
    .opening nav {
        margin: -2.8125vw 0 2.8125vw;
        padding: 0 3.8rem 13rem 11.875vw;
    }

    .opening a {
        height: 11.875vw;
        font-size: 9.68vw;
    }
}

/* @media (min-width: 800px) and (min-height: 500px) {
    .opening a {
        height: 11.083vw;
    }
} */

/* @media (min-width: 1100px) and (min-height: 500px) {
    .opening a {
        height: 10.291vw;
    }
}

@media (min-width: 1400px) and (min-height: 500px) {
    .opening a {
        height: 9.5vw;
    }
} */

.opening a:hover {
    color: var(--color-jeweled-peach);
}