/* hero */

.hero {
    height: 100vh;
    height: 100dvh;
    color: #fff;
    position: relative;
    background: radial-gradient(circle at 0% 100%, #0464A2, #001423);
    display: flex;
    border-radius: 0px;
    overflow: hidden;
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero--afterscroll {
    transform: scale(.98);
    will-change: transform;
    border-radius: var(--radius);
}

.hero::after {
    content: "";
    display: block;
    height: 0; /* Will be set dynamically */
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    align-self: center;
    margin-top: -7dvh;
}

h1.hero-content-tagline {
    font-family: 'Scope';
    font-size: clamp(40px, 5.5vw, 85px);
    line-height: 1;
    font-variation-settings: "wght" 60, "wdth" 500;
    letter-spacing: .007em;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0,62,106,1);
}

h2.hero-content-text {
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: center;
    max-width: 65ch;
    margin: auto;
    margin-top: 2rem;
    font-variation-settings: "wght" 300, "slnt" 10;
    color: var(--lightblue);
    text-shadow: 0px 1px 4px rgba(0,62,106,1);
}

.hero-content-button {
}

.hero-content-button a {
    color: #fff;
    border: solid 1px #fff;
    font-size: 1.2em;
}

.hero-content-button a:hover {
    background: #fff;
    color: #003E6A;
}

.hero-visual {
    position: absolute;
    z-index: 0;
    top: 0;
    pointer-events: none;
    filter: blur(.3px);
}

.hero-gradient {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
    background: rgba(0,43,74,.8);
    backdrop-filter: blur(40px);
    z-index: 5;
    width: 100%;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

.hero .container {
    max-width: 1280px;
}



/* custom */

.section:last-of-type {
    min-height: 70vh;
    min-height: 70dvh;
    align-items: center;
}

.section:last-of-type .container {
    margin-top: -5vh;
    margin-top: -5dvh;
}



/* fade in animation */

@keyframes fadein {
    from {
        opacity: 0;
        pointer-events: none;
    }

    to {
        opacity: 1;
        pointer-events: auto;
    }
}

.hero-content-tagline {
    opacity: 0;
    animation: fadein .8s .2s forwards cubic-bezier(0.33, 1, 0.68, 1);
}

.hero-content-text {
    opacity: 0;
    animation: fadein .8s 1.4s forwards cubic-bezier(0.33, 1, 0.68, 1);
}

.hero-content-button {
    pointer-events: none;
    opacity: 0;
    animation: fadein .8s 2s forwards cubic-bezier(0.33, 1, 0.68, 1);
}

.header-logo {
    opacity: 0;
    animation: fadein .8s 2.2s forwards cubic-bezier(0.33, 1, 0.68, 1);
}

.header-menu-pages, .header-menu-languages {
    opacity: 0;
    animation: fadein .8s 2.4s forwards cubic-bezier(0.33, 1, 0.68, 1);
}