#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-center-text {
top: 60%;
}
#hossamintro-center-logo {
top: 40%;
}
.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%); }