/* ==========================================================================
   1. IMPORT TRUE HARDCORE PIXEL FONT
   ========================================================================== */
@font-face {
  font-family: 'MyPixelFont';
  src: url('VT323.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   2. CORE GLOBALS & WRAPPER SETTINGS
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #4a90e2; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-y: scroll;  
  overflow-x: hidden;  
}

.parallax-container {
  position: relative;
  width: 100%;
  height: 300vh; 
}

/* --- UNIVERSAL BASE FOR ALL BACKGROUND LAYERS --- */
.parallax-layer, .animated-bg {
  position: fixed; 
  top: 0;          
  left: 0;
  width: 100%; 
  height: calc(100vw * (384 / 288)); 
  image-rendering: pixelated;       
  image-rendering: crisp-edges;     
  background-repeat: no-repeat;
  pointer-events: none; 
}

/* --- INDIVIDUAL LAYER STACKING --- */
.bg-sky {
  background-image: url('Background4.png'); 
  background-size: cover; 
  z-index: 1;
}

.bg-mountains {
  background-image: url('Background3.png'); 
  background-size: 100% 100%;
  z-index: 2;
}

.bg-forest {
  background-image: url('Background2.png'); 
  background-size: 100% 100%;
  z-index: 3;
}

.animated-bg { 
  z-index: 4; 
  background-image: url('WaterfallVersionTest4.png'); 
  background-size: 500% 100%; 
  background-position: 0% 0%;
  animation: playPercentageSprite 0.8s steps(5) infinite; 
} 

@keyframes playPercentageSprite { 
  from { background-position-x: 0%; } 
  to { background-position-x: 125%; } 
} 

/* ==========================================================================
   3. PERFECT CRISP PIXEL ART TITLE OVERLAY
   ========================================================================== */
.title { 
  position: fixed; 
  left: 50%;
  transform: translateX(-50%); 
  top: 35vh; 
  color: #ffffff; 
  text-align: center;
  width: 90%;            
  z-index: 5; 

  /* Activate your local pixel font */
  font-family: 'MyPixelFont', monospace;
  font-size: 6rem; /* Pixel fonts can be scaled very large without blurring */

  /* 
     CRITICAL FIX: These settings force the browser's font rasterizer 
     to use aliased grid rendering, ensuring every corner maps strictly 
     to square pixel units.
  */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;

  /* Blocky, layered pixel drop-shadow outline */
  text-shadow: 
    4px 4px 0px #000000,
    -4px 4px 0px #000000,
    4px -4px 0px #000000,
    -4px -4px 0px #000000;
}

/* ==========================================================================
   4. RESPONSIVE MOBILE VIEWPORT CONFIGURATION
   ========================================================================== */
@media (max-width: 768px) {
  /* Restores the perfect scrolling depth track with no blue gaps */
  .parallax-container {
    height: 225dvh; 
  }

  .parallax-layer, .animated-bg {
    width: auto;
    
    /* Restores the unstretched vertical zoom for plenty of scrolling range */
    height: 150dvh; 
    width: calc(150dvh * (288 / 384));
    
    /* 
       CRITICAL FRAMING FIX:
       We move the anchor pin slightly left (left: 40%) and apply matching 
       transform positioning. This nudges the wide image over just enough 
       to center your waterfall inside the narrow phone screen borders.
    */
    left: 30%;
    transform: translate3d(-40%, 0, 0);
  }

  .animated-bg {
    background-size: 500% 100%;
  }
}