/* A Preloader réteg (teljes képernyős takaró) */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; 
    z-index: 9999; /* Magas érték */
    /* EZ A KÉT SOR FONTOS A JS-HEZ: */
    transition: opacity 0.1s ease-out; 
    display: flex; /* Vagy block, ha nem akarsz centrálni */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* A csík és a szöveg egymás alatt lesz */
}

#preloader::after {
    content: "The Story"; /* Írd be ide a kívánt szöveget! */
    color: #fff; /* Világos szín a sötét háttérhez */
    font-family: myFont;
    font-size: 110px;
    letter-spacing: 1px;
    font-weight: 700;
    animation: breathe 2s ease-in-out infinite;
    /* Fontos, hogy a méretezés sima legyen */
    display: block;
    text-align: center;
}

#content {
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

/* 1. Definiáljuk az animációt */
@keyframes breathe {
    0% {
        opacity: 0.3;
        transform: scale(0.9);
        filter: blur(2px); /* Egy pici elmosódás még elegánsabbá teszi */
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}