/* VARIABLES */
:root {

    /* SPEED */
    --speed: 0.5s;

    /* SLIDE DISTANCE */
    --distance-left: -6rem;
    --distance-right: 6rem;

}

/* SMOKE */
.animate-smoke > div,
.animate-smoke::before,
.animate-smoke::after {
    transform-origin: bottom;
    transform: scale(0.25);
    opacity: 0;
}
.animate-smoke > div:nth-child(1) {
    animation: smoke-rise 30s linear infinite;
}
.animate-smoke>div:nth-child(2) {
    animation: smoke-rise 30s linear 15s infinite;
}
.animate-smoke::before {
    animation: smoke-rise-invert 55s linear 20s infinite;
}
.animate-smoke::after {
    animation: smoke-rise-invert 45s linear 15s infinite;
}

/* MODAL */
.animate-modal {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.5);
}
.animate-modal::backdrop {
    opacity: 0;
}
.animate-modal[open] {
    animation: slide-bottom-up var(--speed) forwards;
}
.animate-modal[closing] {
    display: block;
    inset: 0;
    pointer-events: none;
    animation: fade-out var(--speed) forwards;
}

/* HEADER */
.animate-header .content > nav li {
    transform: translateY(var(--distance-left));
    opacity: 0;
}
.animate-header .content > nav:first-child ul li:nth-child(1) {
    animation: slide-top-down var(--speed) ease-in-out 0.2s forwards;
}
.animate-header .content > nav:first-child ul li:nth-child(2) {
    animation: slide-top-down var(--speed) ease-in-out 0.1s forwards;
}
.animate-header .content > nav:last-child ul li:nth-child(1) {
    animation: slide-top-down var(--speed) ease-in-out 0.2s forwards;
}
.animate-header .content > nav:last-child ul li:nth-child(2) {
    animation: slide-top-down var(--speed) ease-in-out 0.1s forwards;
}

/* PAGE - HOME */
.animate-home .logo-line {
    clip-path: inset(0 200% 0 -100%);
    animation: logo-clip-path var(--speed) ease-in-out forwards;
}
.animate-home nav ul li {
    opacity: 0;
    transform: translateX(var(--distance-left));
}
.animate-home nav ul li:nth-child(1) {
    animation: slide-left-to-right var(--speed) ease-in-out 0.2s forwards;
}
.animate-home nav ul li:nth-child(2) {
    animation: slide-left-to-right var(--speed) ease-in-out 0.3s forwards;
}
.animate-home nav ul li:nth-child(3) {
    animation: slide-left-to-right var(--speed) ease-in-out 0.4s forwards;
}
.animate-home nav ul li:nth-child(4) {
    animation: slide-left-to-right var(--speed) ease-in-out 0.5s forwards;
}

/* PAGE - HOME - NEWS */
.animate-news {
    opacity: 0;
    animation: fade-in var(--speed) ease-in-out 1.5s forwards;
}

/* ANIMATION FUNCTIONS */
@keyframes smoke-rise {

    0% {
        opacity: 0;
        transform: scale(0.25);
    }

    75% {
        opacity: 0.5;
        transform: scale(0.75);
    }

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

}
@keyframes smoke-rise-invert {

    0% {
        opacity: 0;
        transform: scaleX(-1) scale(0.25);
    }

    75% {
        opacity: 0.5;
        transform: scaleX(-1) scale(0.75);
    }

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

}
@keyframes logo-clip-path {

    0% {
        clip-path: inset(0 200% 0 -100%);
    }

    100% {
        clip-path: inset(0 0 0 -100%);
    }

}
@keyframes slide-left-to-right {

    0% {
        opacity: 0;
        transform: translateX(var(--distance-left));
    }

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

}
@keyframes slide-right-to-left {

    0% {
        opacity: 0;
        transform: translateX(var(--distance-right));
    }

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

}
@keyframes slide-top-down {

    0% {
        opacity: 0;
        transform: translateY(var(--distance-left));
    }

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

}
@keyframes slide-bottom-up {

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

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

}
@keyframes fade-in {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}
@keyframes fade-out {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}