/* --- TemplateData/style.css --- */

/* Basic body and container styles (mostly unchanged) */
body { 
    padding: 0; 
    margin: 0;
    /* A slightly darker background can look more modern */
    background: #1a1a1a;
  }
  #unity-container { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
  }
  #unity-canvas { 
    width: 100%; 
    height: 100%; 
    background: #000;
  }
  #unity-warning { 
    position: absolute; 
    left: 50%; 
    top: 5%; 
    transform: translate(-50%); 
    background: white; 
    padding: 10px; 
    display: none; 
  }
  
  /* Centering the entire loading UI */
  #unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    /* Align logo and bar vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Logo styling (unchanged) */
  #unity-logo {
    width: 154px;
    height: 130px;
    background: url('unity-logo-dark.png') no-repeat center;
    margin-bottom: 20px; /* Add some space between logo and bar */
  }
  
  /* --- NEW POLISHED PROGRESS BAR --- */
  
  /* 1. The "Empty" Bar (the track/background) */
  #unity-progress-bar-empty {
    /* Replace image with pure CSS */
    width: 280px; /* A bit wider for a modern feel */
    height: 12px;
    margin: 0;
    padding: 3px; /* Padding creates a nice border effect */
    background-color: #2a2a2e; /* Dark background for the track */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) inset; /* Inner shadow for depth */
  }
  
  /* 2. The "Full" Bar (the actual progress) */
  #unity-progress-bar-full {
    /* Replace image with pure CSS */
    width: 0%; /* Starts at 0, controlled by JS */
    height: 100%;
    margin: 0;
    background: #3498db; /* A vibrant, friendly blue. CHANGE THIS COLOR to match your game! */
    border-radius: 8px; /* Slightly smaller radius to fit inside the empty bar */
    
    /* THIS IS THE KEY: Smoothly animate the width change over 0.3 seconds */
    transition: width .3s ease-in-out;
  
    /* --- The "Sheen" Effect (the "double" bar) --- */
    position: relative;
    overflow: hidden; /* Clips the sheen so it stays inside the bar */
  }
  
  /* 3. The Animated Sheen using a pseudo-element */
  #unity-progress-bar-full::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* The sheen is 50% of the bar's width */
    height: 100%;
    
    /* A semi-transparent white gradient creates the light effect */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    
    /* Apply the animation */
    animation: move-sheen 1.5s infinite linear;
  }
  
  /* 4. The Keyframes for the Sheen Animation */
  @keyframes move-sheen {
    0% {
      transform: translateX(-150%); /* Start off-screen to the left */
    }
    100% {
      transform: translateX(250%); /* End off-screen to the right */
    }
  }