/* Reset and core splash styling */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Splash Screen Container */
#pwa-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
    /* Strictly isolate splash from any React/Font layout thrashing */
    contain: strict;
    will-change: transform, opacity, background-color;

    /* Transition for the background 'hit' */
    transition: background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.6s ease-in-out,
                visibility 0.6s;
}

.splash-bg-black { background-color: #000000; }
.splash-bg-beige { background-color: #F5F5DC; }

/* SVG Sizing */
#splash-logo {
    width: 80%;
    max-width: 500px;
    overflow: visible;
    visibility: hidden;
}

/* ==========================================
   COLOR 1: Dark Green Text (غراس)
   ========================================== */
#color1-paths path {
    /* Stroke color matching your exact dark green */
    stroke: #25513B; 
    stroke-width: 15;
    fill: transparent; /* Starts transparent to show outline drawing */
    
    /* Variables populated by JS */
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    
    transition: fill 0.3s ease-in;
}

/* Class added by JS to trigger the draw */
.is-drawing #color1-paths path {
    animation: drawLogo 2s linear forwards;
}

@keyframes drawLogo {
    to { stroke-dashoffset: 0; }
}

/* On 'hit', fill the text with solid dark green */
.show-hit #color1-paths path {
    fill: #25513B;
}

/* ==========================================
   COLOR 2: Light Green Branch Pop
   ========================================== */
#color2-paths {
    opacity: 0;
    transform: scale(0.5);
    transform-origin: center;
    transition: opacity 0.2s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Fill color matching your exact light green branch */
#color2-paths path {
    fill: #99A997; 
    stroke: none;
}

.show-hit #color2-paths {
    opacity: 1;
    transform: scale(1);
}