Update index.html

index.html

@@ -10,217 +10,224 @@
       overflow: hidden;
     }
 
-    /* Climber animations */
-    .climber {
-      position: absolute;
-      width: 40px;
-      height: 60px;
-      filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
+    /* Unified water colors */
+    :root {
+      --water-blue-1: rgba(173, 216, 230, 0.7);
+      --water-blue-2: rgba(135, 206, 235, 0.6);
+      --water-white-1: rgba(255, 255, 255, 0.5);
+      --water-white-2: rgba(240, 248, 255, 0.4);
     }
 
-    @keyframes bounce {
-      0%, 100% { transform: translateY(0) scaleY(1); }
-      50% { transform: translateY(-20px) scaleY(0.9); }
-    }
-
-    .climber1 { 
-      left: 300px; 
-      top: 200px; 
-      animation: bounce 1.2s infinite ease-in-out; 
-    }
-    .climber2 { 
-      left: 500px; 
-      top: 180px; 
-      animation: bounce 1.5s infinite ease-in-out; 
-    }
-    .climber3 { 
-      left: 700px; 
-      top: 220px; 
-      animation: bounce 0.9s infinite ease-in-out; 
-    }
-
-    /* Enhanced waterfall */
     .waterfall-container {
       position: absolute;
       left: 400px;
       top: 200px;
-      width: 80px;
+      width: 120px;
       height: 300px;
-      overflow: hidden;
-      border-radius: 40px 40px 0 0;
+      overflow: visible;
     }
 
-    .waterfall-stream {
+    .river-container {
+      position: absolute;
+      bottom: 100px;
+      left: 0;
       width: 100%;
-      height: 200%;
-      background: linear-gradient(180deg,
-        rgba(255, 255, 255, 0.8),
-        rgba(173, 216, 230, 0.9),
-        rgba(173, 216, 230, 0.7),
-        rgba(173, 216, 230, 0.8)
-      );
-      animation: waterfall 2s linear infinite;
-      filter: blur(2px);
+      height: 120px;
+      transform: perspective(1000px) rotateX(30deg);
+      transform-origin: bottom;
+      overflow: hidden;
+    }
+
+    .impact-zone {
+      position: absolute;
+      left: 380px;
+      bottom: 220px;
+      width: 160px;
+      height: 80px;
+      overflow: visible;
     }
 
-    /* Whitewater spheres */
-    .whitewater-sphere {
+    .water-shape {
       position: absolute;
       border-radius: 50%;
-      animation: float var(--float-duration, 4s) linear infinite;
-      opacity: 0.6;
+      opacity: 0;
+    }
+
+    .waterfall-drop {
+      animation: waterfall-fall var(--fall-duration, 1.5s) linear infinite;
     }
 
-    @keyframes float {
-      0% { 
-        transform: translate(-100%, var(--start-y, 0)) scale(1); 
+    .impact-splash {
+      animation: splash var(--splash-duration, 1s) ease-out infinite;
+    }
+
+    .river-swirl {
+      animation: river-flow var(--flow-duration, 4s) linear infinite;
+    }
+
+    @keyframes waterfall-fall {
+      0% {
+        transform: translate(var(--start-x, 0), -100%) scale(1);
         opacity: 0;
       }
-      10% { opacity: var(--max-opacity, 0.6); }
-      90% { opacity: var(--max-opacity, 0.6); }
-      100% { 
-        transform: translate(300%, var(--end-y, 0)) scale(var(--end-scale, 1.2)); 
+      10% { opacity: var(--opacity, 0.6); }
+      90% { opacity: var(--opacity, 0.6); }
+      100% {
+        transform: translate(var(--end-x, 0), 100%) scale(var(--end-scale, 0.8));
         opacity: 0;
       }
     }
 
-    /* River with perspective */
-    .river {
-      position: absolute;
-      width: 200%;
-      height: 100px;
-      bottom: 100px;
-      left: -50%;
-      background: linear-gradient(90deg,
-        rgba(173, 216, 230, 0.8),
-        rgba(173, 216, 230, 0.9),
-        rgba(255, 255, 255, 0.6),
-        rgba(173, 216, 230, 0.9),
-        rgba(173, 216, 230, 0.8)
-      );
-      animation: riverFlow 8s linear infinite;
-      transform: perspective(500px) rotateX(30deg);
-      transform-origin: bottom;
+    @keyframes splash {
+      0% {
+        transform: translate(var(--start-x, 0), 0) scale(0.2);
+        opacity: 0;
+      }
+      40% {
+        opacity: var(--opacity, 0.6);
+        transform: translate(var(--end-x, 0), var(--y-offset, 0)) scale(1);
+      }
+      100% {
+        transform: translate(var(--final-x, 0), var(--final-y, 0)) scale(1.5);
+        opacity: 0;
+      }
     }
 
-    .mist {
-      position: absolute;
-      width: 120px;
-      height: 40px;
-      left: 380px;
-      bottom: 160px;
-      background: radial-gradient(
-        ellipse at center,
-        rgba(255, 255, 255, 0.6) 0%,
-        rgba(255, 255, 255, 0) 70%
-      );
-      filter: blur(3px);
-      animation: mist 3s ease-in-out infinite alternate;
+    @keyframes river-flow {
+      0% {
+        transform: translate(-100%, var(--y-pos, 0)) rotate(0deg);
+        opacity: 0;
+      }
+      10% { opacity: var(--opacity, 0.6); }
+      90% { opacity: var(--opacity, 0.6); }
+      100% {
+        transform: translate(200%, var(--y-pos, 0)) rotate(360deg);
+        opacity: 0;
+      }
     }
 
-    @keyframes waterfall {
-      0% { transform: translateY(-50%); }
-      100% { transform: translateY(0); }
+    .climber {
+      position: absolute;
+      width: 40px;
+      height: 60px;
+      animation: bounce 1.2s infinite ease-in-out;
     }
 
-    @keyframes riverFlow {
-      0% { transform: perspective(500px) rotateX(30deg) translateX(0); }
-      100% { transform: perspective(500px) rotateX(30deg) translateX(-50%); }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-20px); }
     }
 
-    @keyframes mist {
-      0% { opacity: 0.4; transform: translateY(0); }
-      100% { opacity: 0.7; transform: translateY(-10px); }
-    }
+    .climber1 { left: 300px; top: 200px; animation-delay: -0.2s; }
+    .climber2 { left: 500px; top: 180px; animation-delay: -0.5s; }
+    .climber3 { left: 700px; top: 220px; animation-delay: -0.8s; }
   </style>
 </head>
 <body>
   <div class="scene-container">
-    <!-- Background with peaks -->
+    <!-- Background cliffs -->
     <svg width="100%" height="100%" viewBox="0 0 1200 800">
-      <defs>
-        <linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" style="stop-color:#8B4513"/>
-          <stop offset="50%" style="stop-color:#A0522D"/>
-          <stop offset="100%" style="stop-color:#8B4513"/>
-        </linearGradient>
-      </defs>
-      
-      <!-- Mountains with peaks -->
       <path d="M0,300 L200,100 L300,250 L400,80 L500,220 L600,100 L700,240 L800,120 L1000,280 L1200,150 L1200,800 L0,800 Z" 
-            fill="url(#rockGradient)"/>
+            fill="#8B4513"/>
     </svg>
 
-    <!-- Animated climbers -->
+    <!-- Climbers -->
     <svg class="climber climber1" viewBox="0 0 40 60">
       <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50" 
             stroke="#333" stroke-width="3" stroke-linecap="round"/>
       <circle cx="20" cy="8" r="6" fill="#ff4444"/>
-      <path d="M18,32 Q20,30 22,32" stroke="#888" stroke-width="2" fill="none"/>
     </svg>
-
     <svg class="climber climber2" viewBox="0 0 40 60">
       <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50" 
             stroke="#333" stroke-width="3" stroke-linecap="round"/>
       <circle cx="20" cy="8" r="6" fill="#4444ff"/>
-      <path d="M18,32 Q20,30 22,32" stroke="#888" stroke-width="2" fill="none"/>
     </svg>
-
     <svg class="climber climber3" viewBox="0 0 40 60">
       <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50" 
             stroke="#333" stroke-width="3" stroke-linecap="round"/>
       <circle cx="20" cy="8" r="6" fill="#44ff44"/>
-      <path d="M18,32 Q20,30 22,32" stroke="#888" stroke-width="2" fill="none"/>
     </svg>
 
-    <!-- Water effects -->
-    <div class="waterfall-container">
-      <div class="waterfall-stream"></div>
-    </div>
-    <div class="mist"></div>
-    <div class="river"></div>
+    <!-- Water system containers -->
+    <div class="waterfall-container"></div>
+    <div class="impact-zone"></div>
+    <div class="river-container"></div>
 
-    <!-- Dynamic whitewater spheres -->
     <script>
-      function createWhitewaterSpheres() {
-        const container = document.querySelector('.river');
-        const colors = [
-          'rgba(255, 255, 255, 0.6)',
-          'rgba(173, 216, 230, 0.5)',
-          'rgba(135, 206, 235, 0.4)',
-          'rgba(240, 248, 255, 0.7)'
-        ];
+      // Create dynamic water elements
+      function createWaterSystem() {
+        const waterfall = document.querySelector('.waterfall-container');
+        const impactZone = document.querySelector('.impact-zone');
+        const river = document.querySelector('.river-container');
         
-        function createSphere() {
-          const sphere = document.createElement('div');
-          sphere.className = 'whitewater-sphere';
-          const size = 5 + Math.random() * 15;
-          sphere.style.cssText = `
+        // Waterfall drops
+        function createWaterfallDrop() {
+          const drop = document.createElement('div');
+          drop.className = 'water-shape waterfall-drop';
+          const size = 10 + Math.random() * 30;
+          drop.style.cssText = `
+            width: ${size}px;
+            height: ${size}px;
+            background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
+            left: ${Math.random() * 100}%;
+            --fall-duration: ${1 + Math.random()}s;
+            --opacity: ${0.4 + Math.random() * 0.3};
+            --start-x: ${-10 + Math.random() * 20}px;
+            --end-x: ${-20 + Math.random() * 40}px;
+            --end-scale: ${0.6 + Math.random() * 0.4};
+            filter: blur(${1 + Math.random() * 2}px);
+          `;
+          waterfall.appendChild(drop);
+          drop.addEventListener('animationend', () => drop.remove());
+        }
+
+        // Impact splashes
+        function createSplash() {
+          const splash = document.createElement('div');
+          splash.className = 'water-shape impact-splash';
+          const size = 15 + Math.random() * 40;
+          splash.style.cssText = `
             width: ${size}px;
             height: ${size}px;
-            background: ${colors[Math.floor(Math.random() * colors.length)]};
-            --float-duration: ${3 + Math.random() * 4}s;
-            --start-y: ${-20 + Math.random() * 40}px;
-            --end-y: ${-10 + Math.random() * 20}px;
-            --end-scale: ${0.8 + Math.random() * 0.8};
-            --max-opacity: ${0.4 + Math.random() * 0.3};
+            background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
+            left: ${Math.random() * 100}%;
+            --splash-duration: ${0.8 + Math.random() * 0.4}s;
+            --opacity: ${0.3 + Math.random() * 0.4};
+            --y-offset: ${-10 - Math.random() * 20}px;
+            --final-y: ${-20 - Math.random() * 30}px;
+            --final-x: ${-30 + Math.random() * 60}px;
+            filter: blur(${2 + Math.random() * 2}px);
           `;
-          container.appendChild(sphere);
-          
-          sphere.addEventListener('animationend', () => {
-            sphere.remove();
-            createSphere();
-          });
+          impactZone.appendChild(splash);
+          splash.addEventListener('animationend', () => splash.remove());
         }
 
-        // Create initial spheres
-        for (let i = 0; i < 30; i++) {
-          setTimeout(() => createSphere(), Math.random() * 3000);
+        // River swirls
+        function createRiverSwirl() {
+          const swirl = document.createElement('div');
+          swirl.className = 'water-shape river-swirl';
+          const size = 20 + Math.random() * 50;
+          swirl.style.cssText = `
+            width: ${size}px;
+            height: ${size}px;
+            background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
+            top: ${Math.random() * 100}%;
+            --flow-duration: ${4 + Math.random() * 3}s;
+            --opacity: ${0.3 + Math.random() * 0.4};
+            --y-pos: ${-20 + Math.random() * 40}px;
+            filter: blur(${1 + Math.random() * 3}px);
+          `;
+          river.appendChild(swirl);
+          swirl.addEventListener('animationend', () => swirl.remove());
         }
+
+        // Generate continuous water elements
+        setInterval(createWaterfallDrop, 100);
+        setInterval(createSplash, 150);
+        setInterval(createRiverSwirl, 200);
       }
 
-      // Initialize whitewater
-      createWhitewaterSpheres();
+      createWaterSystem();
     </script>
   </div>
 </body>