.d-hide {
    visibility: hidden;
}

.anim-floating {
    animation: floatComponent 4s ease-in-out infinite;
}

.reveal-child:nth-child(1) { --n: 1; }
.reveal-child:nth-child(2) { --n: 2; }
.reveal-child:nth-child(3) { --n: 3; }
.reveal-child:nth-child(4) { --n: 4; }
.reveal-child:nth-child(5) { --n: 5; }
.reveal-child:nth-child(6) { --n: 6; }
.reveal-child:nth-child(7) { --n: 7; }
.reveal-child:nth-child(8) { --n: 8; }
.reveal-child:nth-child(9) { --n: 9; }
.reveal-child:nth-child(10) { --n: 10; }

.reveal-right.reveal-active:not(:has(>.reveal-child)) {
    opacity: 0;
    animation: slideRight 1s ease forwards;
}

.reveal-right.reveal-active > .reveal-child {
    /* display: inline-flex; */
    opacity: 0;
    animation: slideRight .5s ease forwards;
    animation-delay: calc(.2s * var(--n));
}

.reveal-left.reveal-active:not(:has(>.reveal-child)) {
    opacity: 0;
    animation: slideLeft 1s ease forwards;
}

.reveal-left.reveal-active > .reveal-child {
    /* display: inline-flex; */
    opacity: 0;
    animation: slideLeft .5s ease forwards;
    animation-delay: calc(.2s * var(--n));
}

.reveal-top.reveal-active:not(:has(>.reveal-child)) {
    opacity: 0;
    animation: slideTop 1s ease forwards;
}

.reveal-top.reveal-active > .reveal-child {
    /* display: inline-flex; */
    opacity: 0;
    animation: slideTop .5s ease forwards;
    animation-delay: calc(.2s * var(--n));
}

.reveal-bottom.reveal-active:not(:has(>.reveal-child)) {
    opacity: 0;
    animation: slideBottom 1s ease forwards;
}

.reveal-bottom.reveal-active > .reveal-child {
    /* display: inline-flex; */
    counter-increment: child-number;
    opacity: 0;
    animation: slideBottom .5s ease forwards;
    animation-delay: calc(.2s * var(--n));
}

@keyframes floatComponent {
    0% {
        transform: translateY(5);
    }
    50% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(5);
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideTop {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideBottom {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}