/* Ensure the overlay is positioned correctly */
.videoholder_screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide any overflow */
    background: rgba(0, 0, 0, 0); /* Fully transparent background initially */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease; /* Smooth transition for visibility */
}

/* Show the overlay only after click */
.videoholder_screen.show-icon {
    opacity: 1; /* Ensure full visibility when the icon is shown */
}

/* Make sure the icon doesn't disappear if flagged to stay */
.videoholder_screen.keep-icon::before {
    opacity: 0.6; /* Make sure the next icon stays visible */
    transform: scale(1); /* Keep the icon at normal size */
    transition: none; /* Disable transition to prevent fading */
}

/* When an icon is removed, apply the scaling and fade-out effect */
.videoholder_screen.removed-icon::before {
    animation: scale-fade 0.75s ease-out forwards;
}

/* Style for the icon container */
.videoholder_screen::before {
    content: '';
    width: 80px; /* Size of the circular icon container */
    height: 80px;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background for the icon */
    border-radius: 50%; /* Makes it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 60%; /* Size of the icon inside the circle */
    background-repeat: no-repeat; /* Do not repeat the icon */
    background-position: center; /* Center the icon */
    opacity: 0.6; /* 60% opacity for the icon */
    position: absolute; /* Ensure it's positioned correctly */
    transition: transform 0.75s ease-out, opacity 0.75s ease-out; /* Smooth transition for the icon */
}

/* Play icon */
.videoholder_screen.play::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 9-14 9V3z"/></svg>');
}

/* Pause icon */
.videoholder_screen.pause::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>');
}

/* Keyframes for scaling and fading effect */
@keyframes scale-fade {
    0% {
        opacity: 0.6; /* Starting with 60% opacity */
        transform: scale(0.5); /* Starting smaller */
    }
    100% {
        opacity: 0; /* Fade out to 0% opacity */
        transform: scale(2); /* Scale up */
    }
}