/* Full-page overlay that fades in and then disappears */
.screen {
    position: fixed;
    inset: 0;
    background: url("images/background.jpg") center / cover no-repeat; /* your background */
    z-index: 1; /* behind GIF & content */
}

/* Overlay div for light purple fade-in */
.screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(200,180,255,0.5); /* light purple overlay */
    opacity: 1;
    animation: overlayFade 0.8s ease-out forwards;
}

/* GIF fade-in */
.header-gif {
    width: 500px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    opacity: 0;
    position: relative;
    z-index: 2; /* above overlay */
    animation: gifFade 1s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes overlayFade {
    from { opacity: 1; }
    to { opacity: 0; } /* overlay disappears leaving the background visible */
}

@keyframes gifFade {
    from { opacity: 0; }
    to { opacity: 1; }
}