.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: baseline;
    padding-top: 80px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(1.8); filter: blur(30px);
    animation: hero-scaledown 2s 0.5s ease forwards;
}

@keyframes hero-scaledown {
    from {transform: scale(1.8); filter: blur(30px);}
    to {transform: scale(1); filter: blur(0);}
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    z-index: 1;
    display: flex;
}

.hero-background.firstplan{
    z-index: 1980;
}


.hero-background img {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: 110% 110%;
    object-position: top;
}

.hero-background video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-align: center;
    transform: translateY(200%);
    transform-origin: top;
    animation: hero-content-ani 1.6s 2.2s cubic-bezier(0.18, 0.5, 0.28, 0.99) forwards;
}

@keyframes hero-content-ani{
    0% {transform: translateY(200%) scaleY(2); opacity: 0.6;}
    100% {transform: translateY(0) scaleY(1); opacity: 1;}
}

.hero-title {
    font-size: clamp(60px, 24vmin, 300px);
    font-weight: 900;
    letter-spacing: -6%;
    color: #fffb;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    text-rendering: optimizeLegibility;
    mask-image: linear-gradient(to bottom, white, #fff1);
}

.hero-subtitle {
    font-size: clamp(10px, 3vmin, 120px);
    font-weight: 500;
    color: #fff5;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}