/* --- Global Font Settings --- */
body, html {
    font-family: 'Cairo', sans-serif !important;
    margin: 0;
    padding: 0;
}

/* --- Splash Screen Container --- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F6FFFD; /* General Background Color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Stays on top of everything */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

/* Class to trigger disappearance via JS */
#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* SVG Logo Styling */
#splash-screen svg {
    width: 40vmin;
    height: auto;
}

/* --- Path Animations (Drawing Effect) --- */
svg path {
    fill-opacity: 0;
    stroke-width: 15px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 25000; 
    stroke-dashoffset: 25000;
    
    /* Animation: Draw Line -> Then Fill Color */
    animation: drawLine 4s ease-out forwards, fillIn 1s ease-in forwards;
    animation-delay: 0.5s, 3.5s; 
}

/* --- Logo Colors --- */
#path-white { stroke: #e0e0e0; }
#path-cyan  { stroke: #14E5D1; }
#path-dark  { stroke: #073C3B; }

/* --- Keyframes --- */
@keyframes drawLine { to { stroke-dashoffset: 0; } }

@keyframes fillIn { 
    to { 
        fill-opacity: 1; 
        stroke-width: 0; 
    } 
}

/* --- Main Content Visibility --- */
/* Hide website content while splash is active */
body > *:not(#splash-screen) {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Show content when splash is finished */
body.loaded > *:not(#splash-screen) {
    opacity: 1;
}