Update index.html

index.html

@@ -17,195 +17,207 @@
       overflow: hidden;
     }
 
-    /* Enhanced waterfall effects */
+    /* Waterfall base styles */
     .waterfall-container {
       position: absolute;
       left: 400px;
       top: 200px;
-      width: 80px;
+      width: 120px;
       height: 300px;
-      overflow: hidden;
-      filter: blur(1px);
+      overflow: visible;
     }
 
-    .waterfall-stream {
+    /* River container */
+    .river-container {
       position: absolute;
+      bottom: 100px;
       width: 100%;
-      height: 400%;
-      background: repeating-linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0.8) 0%,
-        rgba(255, 255, 255, 0.2) 15%,
-        rgba(173, 216, 230, 0.4) 25%,
-        rgba(173, 216, 230, 0.6) 35%,
-        rgba(173, 216, 230, 0.8) 45%,
-        rgba(173, 216, 230, 0.6) 55%,
-        rgba(173, 216, 230, 0.4) 65%,
-        rgba(255, 255, 255, 0.2) 85%,
-        rgba(255, 255, 255, 0.8) 100%
-      );
-      animation: waterfall 4s linear infinite;
+      height: 150px;
+      overflow: hidden;
+      transform: perspective(1000px) rotateX(30deg);
+      transform-origin: bottom;
+    }
+
+    /* Particle animations */
+    @keyframes particleFlow {
+      0% { 
+        transform: translate3d(0, -100%, 0) rotate(0deg);
+        opacity: 0;
+      }
+      10% { opacity: 1; }
+      90% { opacity: 1; }
+      100% { 
+        transform: translate3d(var(--translateX, 0), 100%, var(--translateZ, 0)) rotate(360deg);
+        opacity: 0;
+      }
+    }
+
+    @keyframes whitewaterFloat {
+      0% { 
+        transform: translate3d(-100%, 0, 0);
+        opacity: 0;
+      }
+      10% { opacity: 1; }
+      90% { opacity: 1; }
+      100% { 
+        transform: translate3d(100%, 0, 0);
+        opacity: 0;
+      }
     }
 
     /* Mist effect */
     .mist {
       position: absolute;
-      width: 120px;
-      height: 60px;
-      left: 380px;
+      width: 200px;
+      height: 100px;
+      left: 360px;
       bottom: 160px;
       background: radial-gradient(
         ellipse at center,
-        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0.7) 0%,
         rgba(255, 255, 255, 0.3) 40%,
         rgba(255, 255, 255, 0) 70%
       );
-      filter: blur(3px);
-      animation: mist 3s ease-in-out infinite alternate;
+      filter: blur(4px);
+      animation: mistPulse 4s ease-in-out infinite alternate;
     }
 
-    /* Enhanced river with realistic flow */
-    .river {
-      position: absolute;
-      width: 100%;
-      height: 120px;
-      bottom: 100px;
-      background: 
-        linear-gradient(
-          90deg,
-          rgba(173, 216, 230, 0.8),
-          rgba(135, 206, 235, 0.9),
-          rgba(173, 216, 230, 0.8)
-        ),
-        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,50 Q25,40 50,50 T100,50" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>');
-      background-size: 200% 100%, 100px 100px;
-      animation: riverFlow 8s linear infinite;
-      transform: perspective(500px) rotateX(30deg);
-      transform-origin: bottom;
+    @keyframes mistPulse {
+      0% { 
+        opacity: 0.4;
+        transform: translate(0, 0) scale(1);
+      }
+      100% { 
+        opacity: 0.7;
+        transform: translate(-10px, -15px) scale(1.1);
+      }
     }
 
-    /* Detailed climber with gear */
-    .climber {
+    .splash {
       position: absolute;
-      width: 40px;
-      height: 60px;
-      filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
-    }
-
-    @keyframes waterfall {
-      0% { transform: translateY(-75%); }
-      100% { transform: translateY(0%); }
-    }
-
-    @keyframes riverFlow {
-      0% { background-position: 0% 0%, 0 0; }
-      100% { background-position: 200% 0%, 100px 0; }
-    }
-
-    @keyframes mist {
-      0% { opacity: 0.4; transform: translateY(0); }
-      100% { opacity: 0.7; transform: translateY(-10px); }
-    }
-
-    @keyframes climb {
-      0% { transform: translate(0, 0) rotate(var(--rotation, 0deg)); }
-      25% { transform: translate(30px, -45px) rotate(var(--rotation, 5deg)); }
-      50% { transform: translate(60px, -90px) rotate(var(--rotation, -5deg)); }
-      75% { transform: translate(90px, -135px) rotate(var(--rotation, 5deg)); }
-      100% { transform: translate(120px, -180px) rotate(var(--rotation, 0deg)); }
+      bottom: 250px;
+      left: 380px;
+      width: 160px;
+      height: 40px;
+      filter: blur(2px);
     }
-
-    .climber1 { left: 300px; top: 500px; animation: climb 8s infinite alternate; --rotation: 0deg; }
-    .climber2 { left: 500px; top: 450px; animation: climb 8s infinite alternate; animation-delay: -2s; --rotation: 5deg; }
-    .climber3 { left: 700px; top: 480px; animation: climb 8s infinite alternate; animation-delay: -4s; --rotation: -5deg; }
   </style>
 </head>
 <body>
   <div class="scene-container">
-    <!-- Base landscape -->
+    <!-- Main waterfall and river SVG -->
     <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
-      <!-- Complex cliff texture with multiple layers -->
       <defs>
-        <linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" style="stop-color:#8B4513"/>
-          <stop offset="25%" style="stop-color:#A0522D"/>
-          <stop offset="50%" style="stop-color:#8B4513"/>
-          <stop offset="75%" style="stop-color:#6B4423"/>
-          <stop offset="100%" style="stop-color:#593122"/>
+        <!-- Gradients -->
+        <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" style="stop-color:rgba(173,216,230,0.9)"/>
+          <stop offset="50%" style="stop-color:rgba(135,206,235,0.8)"/>
+          <stop offset="100%" style="stop-color:rgba(173,216,230,0.9)"/>
         </linearGradient>
-        <filter id="rockTexture">
-          <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5"/>
-          <feDisplacementMap in="SourceGraphic" scale="20"/>
+
+        <!-- Filters -->
+        <filter id="waterBlur" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
+          <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.8 0"/>
         </filter>
+
+        <!-- Curved path for waterfall -->
+        <path id="waterfallPath" d="M0,0 C20,-10 40,10 60,0 S80,-10 100,0" />
+
+        <!-- River flow path -->
+        <path id="riverFlowPath" d="M0,50 C200,20 400,80 600,50 S800,20 1000,50 S1200,80 1400,50" />
+    
+        <!-- Animation paths -->
+        <animateMotion id="flowAnimation" dur="3s" repeatCount="indefinite">
+          <mpath href="#riverFlowPath"/>
+        </animateMotion>
       </defs>
 
-      <!-- Main cliff face -->
-      <path d="M0,200 Q300,100 600,250 T1200,200 V800 H0 Z" 
-            fill="url(#rockGradient)"
-            filter="url(#rockTexture)"/>
-      
-      <!-- Detailed rock formations -->
-      <g transform="translate(0,100)" opacity="0.9">
-        <path d="M0,300 Q200,250 400,300 T800,280 T1200,300 V800 H0 Z" 
-              fill="#8B4513" filter="url(#rockTexture)"/>
-        <path d="M0,400 Q200,350 400,400 T800,380 T1200,400 V800 H0 Z" 
-              fill="#A0522D" filter="url(#rockTexture)"/>
+      <!-- Layered waterfall -->
+      <g class="waterfall">
+        <!-- Base water column -->
+        <use href="#waterfallPath" stroke="rgba(173,216,230,0.8)" stroke-width="80" filter="url(#waterBlur)">
+          <animate attributeName="d" 
+                   dur="2s"
+                   repeatCount="indefinite"
+                   values="M0,0 C20,-10 40,10 60,0 S80,-10 100,0;
+                          M0,0 C20,10 40,-10 60,0 S80,10 100,0;
+                          M0,0 C20,-10 40,10 60,0 S80,-10 100,0"/>
+        </use>
+        
+        <!-- Transparent overlays for depth -->
+        <use href="#waterfallPath" stroke="rgba(255,255,255,0.4)" stroke-width="60" filter="url(#waterBlur)"/>
+        <use href="#waterfallPath" stroke="rgba(173,216,230,0.6)" stroke-width="40" filter="url(#waterBlur)"/>
       </g>
-    </svg>
 
-    <!-- Water effects -->
-    <div class="waterfall-container">
-      <div class="waterfall-stream"></div>
-    </div>
-    <div class="mist"></div>
-    <div class="river"></div>
-
-    <!-- Detailed climbers -->
-    <svg class="climber climber1" viewBox="0 0 40 60">
-      <!-- Body -->
-      <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"/>
-      <!-- Climbing gear -->
-      <path d="M15,25 L25,25 M18,30 L22,30" 
-            stroke="#666" stroke-width="2"/>
-      <!-- Helmet -->
-      <path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8" 
-            fill="#ff4444"/>
-      <!-- Harness -->
-      <path d="M18,32 Q20,30 22,32" 
-            stroke="#888" stroke-width="2" fill="none"/>
-      <!-- Rope -->
-      <path d="M20,32 C30,32 30,0 20,0" 
-            stroke="#eee" stroke-width="1" fill="none"/>
+      <!-- River with whitewater -->
+      <g class="river" transform="translate(0,600)">
+        <!-- Base river flow -->
+        <use href="#riverFlowPath" stroke="url(#waterGradient)" stroke-width="150" filter="url(#waterBlur)"/>
+        
+        <!-- Whitewater patterns -->
+        <g class="whitewater">
+          <circle r="5" fill="rgba(255,255,255,0.6)" filter="url(#waterBlur)">
+            <animateMotion dur="4s" repeatCount="indefinite">
+              <mpath href="#riverFlowPath"/>
+            </animateMotion>
+          </circle>
+          <!-- Multiple whitewater particles with varying speeds and opacities -->
+          <!-- Generated dynamically via JavaScript -->
+        </g>
+      </g>
     </svg>
 
-    <svg class="climber climber2" viewBox="0 0 40 60">
-      <!-- Similar detailed climber structure with different colors -->
-      <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"/>
-      <path d="M15,25 L25,25 M18,30 L22,30" 
-            stroke="#666" stroke-width="2"/>
-      <path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8" 
-            fill="#4444ff"/>
-      <path d="M18,32 Q20,30 22,32" 
-            stroke="#888" stroke-width="2" fill="none"/>
-      <path d="M20,32 C30,32 30,0 20,0" 
-            stroke="#eee" stroke-width="1" fill="none"/>
-    </svg>
+    <!-- Dynamic particle system -->
+    <script>
+      function createWaterParticles() {
+        const waterfall = document.querySelector('.waterfall-container');
+        const river = document.querySelector('.river-container');
+        
+        // Create waterfall particles
+        for (let i = 0; i < 50; i++) {
+          const particle = document.createElement('div');
+          particle.className = 'water-particle';
+          particle.style.cssText = `
+            position: absolute;
+            width: ${2 + Math.random() * 4}px;
+            height: ${2 + Math.random() * 4}px;
+            background: rgba(255, 255, 255, ${0.3 + Math.random() * 0.4});
+            border-radius: 50%;
+            left: ${Math.random() * 100}%;
+            animation: particleFlow ${2 + Math.random() * 2}s linear infinite;
+            animation-delay: ${Math.random() * 2}s;
+            filter: blur(1px);
+          `;
+          waterfall.appendChild(particle);
+        }
 
-    <svg class="climber climber3" viewBox="0 0 40 60">
-      <!-- Similar detailed climber structure with different colors -->
-      <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"/>
-      <path d="M15,25 L25,25 M18,30 L22,30" 
-            stroke="#666" stroke-width="2"/>
-      <path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8" 
-            fill="#44ff44"/>
-      <path d="M18,32 Q20,30 22,32" 
-            stroke="#888" stroke-width="2" fill="none"/>
-      <path d="M20,32 C30,32 30,0 20,0" 
-            stroke="#eee" stroke-width="1" fill="none"/>
-    </svg>
+        // Create river whitewater
+        for (let i = 0; i < 30; i++) {
+          const foam = document.createElement('div');
+          foam.className = 'whitewater-particle';
+          foam.style.cssText = `
+            position: absolute;
+            width: ${5 + Math.random() * 10}px;
+            height: ${5 + Math.random() * 10}px;
+            background: rgba(255, 255, 255, ${0.4 + Math.random() * 0.3});
+            border-radius: 50%;
+            top: ${Math.random() * 100}%;
+            animation: whitewaterFloat ${5 + Math.random() * 5}s linear infinite;
+            animation-delay: ${Math.random() * 5}s;
+            filter: blur(2px);
+          `;
+          river.appendChild(foam);
+        }
+      }
+
+      // Initialize particle systems
+      createWaterParticles();
+    </script>
+
+    <!-- Mist and splash effects -->
+    <div class="mist"></div>
+    <div class="splash"></div>
   </div>
 </body>
 </html>