body.introplaying { 
    overflow: hidden; 
}

#intro-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  backdrop-filter: blur(8px);
  background: var(--bg) center/cover no-repeat;
  display: flex; justify-content: center; align-items: center;
  z-index: 999999;
  opacity: 1;
  transition: opacity 0.4s ease, filter 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

#intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
    filter: blur(10px);
    transform: scale(1.5);
}

#intro-overlay img {
    border-radius: 12px;
    width: 50vw;
    max-width: 150px;
}

#intro-overlay l-zoomies {
    width: 50vw;
    max-width: 150px;
}

.background {
    animation: background-anim 1s ease-in-out 0.75s;
}

main, footer, nav, header {
    animation: mainfadein 2.25s ease-in-out;
}

@keyframes mainfadein {
    0%, 75% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes titlefadein {
    0% {
        color: var(--txt);
    }
    100% {
        color: var(--accent);
    }
}

@keyframes background-anim {
    0% {
        filter: blur(100px);
    }
    100% {
        filter: blur(0px);
    }
}

.header-title-h1 {
    animation: titlefadein 0.1s ease forwards;
}

.header-title-h1:nth-child(1) { animation-delay: 4s; }
.header-title-h1:nth-child(2) { animation-delay: 4.2s; }
.header-title-h1:nth-child(3) { animation-delay: 4.4s; }
.header-title-h1:nth-child(4) { animation-delay: 4.6s; }
.header-title-h1:nth-child(5) { animation-delay: 4.8s; }