/* Logo overlay styles */
#imgdiv {
    position: fixed;
    padding-top:10%;
    padding-right:1%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease-out;
    background: transparent;
    mix-blend-mode: screen;
}

/* Mobile-first: Logo takes most of the screen */
#imgdiv {
    top: 0;
    bottom: 200px;
}

#imgdiv img {
    opacity: 0.3;
    max-width: 95vw;
    max-height: calc(100vh - 250px);
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 1s ease-out;
}

/* Wider screens: Logo sits below panel and above duration */
@media (min-width: 768px) {
    #imgdiv {
        top: 110px; /* Matches panel height when expanded */
        bottom: 200px;
    }

    #imgdiv img {
        max-height: calc(100vh - 350px); /* Account for panel and duration display */
    }
}

#imgdiv.tm-fade {
    opacity: 0;
    pointer-events: none;
}

#imgdiv.tm-fade img {
    opacity: 0;
}