#hossamintro-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    z-index: 9999;
    overflow: hidden;
}
#hossamintro-overlay.full {
    display: block;
}
.hossamintro-block {
    width: 100%;
    height: 100%;
    background-color: var(--hossamintro-color, #1a1a1a);
    transition: all 1.5s ease;
}
#hossamintro-center-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    color: white;
    font-weight: bold;
    transition: transform 1.5s ease, opacity 1.5s ease;
    text-align: center;
    z-index: 10000;
}
.hossamintro-block.shrink.top-left { transform: translate(-100%, -100%); }
.hossamintro-block.shrink.top-right { transform: translate(100%, -100%); }
.hossamintro-block.shrink.bottom-left { transform: translate(-100%, 100%); }
.hossamintro-block.shrink.bottom-right { transform: translate(100%, 100%); }