@font-face {
    font-family: "HussarBold";
    src: url("./fonts/HussarBold.otf") format("opentype");
}

#expanding-frame {
    transform-origin: center top;
    will-change: transform, opacity;
}

@font-face {
    font-family: "HussarBold";
    src: url("./fonts/HussarBold.otf") format("opentype");
}

/* Style optionnel pour un effet de flou lors du scroll */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
}

#carousel-item {
    transition: transform 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out;
    transform-origin: center bottom;
}

#carousel-item.active {
    z-index: 10;
    background-color: rgba(36, 39, 44, 0.8);
    opacity: 100%;
}

@media screen and (max-width: 80rem ){
    #carousel-item.inactive {
        display: none;
    }
    #carousel-item.active {
        width: 80% !important;
    }
}

@media screen and (min-width: 80rem ){
    #carousel-item.active {
        transform: scale(1.3);
        transform-origin: center bottom;
        width: 40% !important;
    } 
}

#carousel-button {
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
}

.reflect {
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
}

.square {
    animation: wave-squares 2s infinite ease-out;
}

.line {
    animation: wave-lines 2s infinite ease-out;
}

@keyframes wave-lines {
   0% {
       background-position: -468px 0;
   }
    100% {
       background-position: 468px 0;
   }
}
@keyframes wave-squares {
   0% {
       background-position: -468px 0;
   }
    100% {
       background-position: 468px 0;
   }
}