/*
==================== CUSTOM WEBGL LOADING SCREEN STYLES ====================
This CSS file creates the visual appearance of the loading screen,
matching the style of the in-game LoadingScreen prefab.

HOW TO CUSTOMIZE:
1. Colors: Modify the CSS variables in :root
2. Fonts: Change the font-family and import your game's font
3. Timing: Adjust animation-duration values
4. Effects: Modify the animations and transitions

The design matches the Unity LoadingScreen which features:
- Black background panel
- White "Loading" text that fills from left to right
- Smooth animations for showing/hiding
===============================================================================
*/

/* ==================== CSS VARIABLES ====================
   Define colors and values in one place for easy customization.
   These match the colors from your LoadingScreen prefab:
   - Panel background: black (rgba(0, 0, 0, 1))
   - Text: white (rgba(1, 1, 1, 1))
*/
:root {
    /* Colors matching Unity prefab */
    --loading-bg-color: #000000;           /* Black background (m_Color: r:0, g:0, b:0) */
    --loading-text-color: #ffffff;          /* White text (m_fontColor: r:1, g:1, b:1) */
    --loading-text-empty-color: #333333;    /* Dark gray for unfilled text portion */
    
    /* Panel dimensions matching Unity (320x180 from prefab) */
    --panel-width: 1280px;
    --panel-height: 720px;
    
    /* Animation timings matching LoadingScreen.cs */
    --panel-expand-duration: 0.5s;          /* DOSizeDelta duration */
    --text-scale-duration: 0.3s;            /* DOScale duration */
    
    /* Font size matching TextMeshPro settings (m_fontSize: 36) */
    --loading-font-size: 135px;
}

/* ==================== RESET & BASE STYLES ====================
   Basic reset to ensure consistent appearance across browsers
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    /* Full viewport coverage */
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    /* Black background to match the game aesthetic */
    background: var(--loading-bg-color);
    
    /* 
    Font family - using a pixel/retro font to match your game
    You have several fonts in Assets/Fonts/, we'll use a web-safe fallback
    For production, you could @font-face import Pixellari or GrapeSoda
    */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==================== LOADING SCREEN CONTAINER ====================
   This is the main container that covers the entire viewport.
   Equivalent to the LoadingScreen GameObject with CanvasGroup in Unity.
   
   The CanvasGroup in Unity has:
   - alpha: Controls visibility
   - interactable: Controls if UI receives input
   - blocksRaycasts: Blocks clicks from passing through
   
   In CSS, we achieve similar behavior with:
   - opacity for alpha
   - pointer-events for interactable/blocksRaycasts
*/
#loading-screen {
    /* Position: Fixed to viewport, covers everything */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Center the loading panel using flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Z-index ensures loading screen appears above game canvas */
    z-index: 1000;
    
    /* Background color fills the entire screen */
    background: var(--loading-bg-color);
}

/* ==================== LOADING PANEL ====================
   This is the black panel that contains the loading text.
   Equivalent to LoadingScreenPanel in Unity prefab.
   
   In Unity, this panel:
   - Has a RectTransform with sizeDelta of 320x180
   - Uses a Mask component to clip content
   - Animates its size with DOSizeDelta
   
   The animation in LoadingScreen.cs:
   - EnableLoadingScreen: Starts at Vector3.zero, expands to reveal
   - DisableLoadingScreen: Shrinks back down to hide
*/
#loading-panel {
    /* Dimensions matching the Unity prefab */
    width: var(--panel-width);
    height: var(--panel-height);
    
    /* Black background with the panel image from prefab */
    background: var(--loading-bg-color);
    
    /* Center content inside the panel */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Enable overflow hidden to act like Unity's Mask component */
    overflow: hidden;
    
    /* Smooth transition for size changes during animations */
    transition: transform var(--panel-expand-duration) ease-out;
    
    /* Transform origin at center for symmetrical scaling */
    transform-origin: center center;
}

/* 
Panel collapse animation - triggered when loading completes
This mimics the DisableLoadingScreen() animation:
.Append(rectTransform.DOSizeDelta(Vector3.one * 1000, 0.5f).SetEase(animationCurveDisable))

Instead of expanding to 1000px, we scale down to 0 (same visual effect of "closing")
*/
#loading-panel.panel-collapse {
    /* Scale to 0 to "close" the loading screen */
    transform: scale(0);
    
    /* Use the custom easing that mimics animationCurveDisable */
    transition-timing-function: cubic-bezier(0.65, 0.17, 0.87, 0.67);
}

/* ==================== LOADING TEXT ====================
   Container for the text fill effect.
   In Unity, this uses TextMeshProUGUI with font size 36 and white color.
   
   The fill effect is achieved by layering two text elements:
   1. Background text (dark) - shows full word, always visible
   2. Fill text (white) - clips based on progress, overlays background
   
   This creates the visual effect of the text "filling up" with color.
*/
#loading-text-container {
    /* Position relative so child elements can be positioned absolutely */
    position: relative;
    
    /* Size to fit the text */
    display: inline-block;
    
    /* Font styling matching Unity's TextMeshPro settings */
    font-size: var(--loading-font-size);
    font-weight: bold;
    
    /* 
    Letter spacing - Unity TMP uses characterSpacing: 0
    We add a slight spacing for readability in HTML
    */
    letter-spacing: 2px;
    
    /* Prevent text selection during loading */
    user-select: none;
}

/* Background text - the "empty" unfilled portion */
#loading-text-bg {
    /* Dark gray color to show as "unfilled" */
    color: var(--loading-text-empty-color);
    
    /* Ensure it's visible behind the fill text */
    position: relative;
    z-index: 1;
    
    /* Transition for scale animation when hiding */
    transition: transform var(--text-scale-duration) ease-in;
}

/* Fill text - overlays the background and clips based on progress */
#loading-text-fill {
    /* Absolute position to overlay exactly on top of background text */
    position: absolute;
    top: 0;
    left: 0;
    
    /* Bright white color for the "filled" portion */
    color: var(--loading-text-color);
    
    /* Higher z-index to appear on top of background */
    z-index: 2;
    
    /* 
    CLIP-PATH: This is the key to the fill effect!
    
    clip-path: inset() defines a rectangle that clips the element
    Format: inset(top right bottom left)
    
    Example: clip-path: inset(0 50% 0 0)
    - top: 0 (no clip from top)
    - right: 50% (clip 50% from right side)
    - bottom: 0 (no clip from bottom)
    - left: 0 (no clip from left)
    Result: Shows only the left 50% of the text
    
    We update this dynamically in JavaScript based on loading progress.
    At 0% progress: inset(0 100% 0 0) - fully hidden
    At 50% progress: inset(0 50% 0 0) - left half visible
    At 100% progress: inset(0 0% 0 0) - fully visible
    */
    clip-path: inset(0 100% 0 0);
    
    /* Smooth transition as the clip changes */
    transition: clip-path 0.1s linear, transform var(--text-scale-duration) ease-in;
    
    /* 
    Prevent text from wrapping to ensure consistent clipping
    The text must stay on one line for the left-to-right fill to work correctly
    */
    white-space: nowrap;
}

/* ==================== PERCENTAGE DISPLAY ====================
   Shows the numeric percentage below the loading text.
   This is an additional element not in the original Unity prefab,
   but provides useful feedback to users.
*/
#loading-percentage {
    /* Spacing from the loading text */
    margin-top: 16px;
    
    /* Smaller font size than main text */
    font-size: 18px;
    
    /* Semi-transparent white for subtlety */
    color: rgba(255, 255, 255, 0.7);
    
    /* Transition for scale animation when hiding */
    transition: transform var(--text-scale-duration) ease-in;
}

/* ==================== SCALE OUT ANIMATION ====================
   Applied to text elements when hiding the loading screen.
   Mimics the DOScale animation from LoadingScreen.cs:
   .Append(loadingText.transform.DOScale(0, 0.5f).SetEase(Ease.InBack))
   
   Ease.InBack creates an effect where the element slightly
   overshoots before reaching the target (like pulling back before shrinking)
*/
.scale-out {
    /* Scale down to 0 */
    transform: scale(0) !important;
    
    /* 
    Cubic-bezier approximation of Ease.InBack
    Values sourced from common easing functions
    Creates a slight "pull back" effect before shrinking
    */
    transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
}

/* ==================== UNITY CONTAINER ====================
   Wrapper for the Unity canvas element.
   This is where the game actually renders.
*/
#unity-container {
    /* Center in viewport */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Start with slight transparency, fade in when loading completes */
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Unity game canvas */
#unity-canvas {
    /* Remove default border */
    border: none;
    
    /* Ensure canvas can receive keyboard focus for input */
    outline: none;
    
    /* Background while rendering initializes */
    background: var(--loading-bg-color);
}

/* ==================== RESPONSIVE ADJUSTMENTS ====================
   Adjust sizes for different screen sizes.
   The Unity game may have fixed dimensions, but the loading screen
   should look good on all devices.
*/
@media screen and (max-width: 480px) {
    :root {
        /* Smaller text on mobile devices */
        --loading-font-size: 24px;
        --panel-width: 240px;
        --panel-height: 135px;
    }
    
    #loading-percentage {
        font-size: 14px;
        margin-top: 12px;
    }
}

/* ==================== OPTIONAL: CUSTOM FONT ====================
   Uncomment and modify this section if you want to use your game's
   custom font (e.g., Pixellari or GrapeSoda from Assets/Fonts/)
   
   Steps:
   1. Export the font to web format (TTF/WOFF/WOFF2)
   2. Place the font file in WebGLTemplates/WhackAMonster/fonts/
   3. Uncomment and adjust the @font-face rule below
   4. Update font-family in #loading-text-container
*/

@font-face {
    font-family: 'ModernDOS8x8';
    src: url('fonts/ModernDOS8x8.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#loading-text-container {
    font-family: 'ModernDOS8x8', sans-serif;
    text-shadow: 20px 20px 20x #000000;
}


/* ==================== OPTIONAL: LOADING DOTS ANIMATION ====================
   Add animated dots after "Loading" text for extra polish.
   Uncomment to enable.
*/
/*
#loading-text-bg::after,
#loading-text-fill::after {
    content: '...';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}
*/