Enhance wave background animations and adjust opacity settings for improved visual effects

Signed-off-by: André Silva <2493377+askpt@users.noreply.github.com>

Author: askpt

styles/layout.css

@@ -24,7 +24,7 @@
   --of-card-bg: rgba(0, 0, 0, 0.05);
   --of-card-border: var(--of-accent-purple);
   --of-code-bg: #e8e8ec;
-  --of-wave-opacity: 0.8;
+  --of-wave-opacity: 1;
   --of-green-text: #007a00;
   --of-logo-fill: #231f20;
   --of-logo-circle: #f5f5f5;
@@ -175,9 +175,54 @@
 }
 
 /* ----------------------------------------------------------
-   Wave Background Decoration (CSS-only approximation)
-   The ODP uses flowing green + blue/purple wave lines at
-   the bottom-left corner of slides.
+   Wave Animation Keyframes
+   Each pseudo-element is taller than the container and
+   extends below it, so the bottom edge is never visible.
+   Multi-stop 2D translate paths create organic side-to-side
+   drift. Green and purple counter-phase at different speeds.
+   ---------------------------------------------------------- */
+
+@keyframes green-drift {
+  0%   { transform: translate(0%, 0%) scale(1); }
+  20%  { transform: translate(-6%, -1%) scale(1.02); }
+  40%  { transform: translate(-12%, 0.5%) scale(1.01); }
+  60%  { transform: translate(-4%, -0.5%) scale(1.03); }
+  80%  { transform: translate(-10%, 0%) scale(1.01); }
+  100% { transform: translate(0%, 0%) scale(1); }
+}
+
+@keyframes purple-drift {
+  0%   { transform: translate(-15%, 0%) scale(1); }
+  25%  { transform: translate(-8%, -1%) scale(1.02); }
+  50%  { transform: translate(0%, 0.5%) scale(1.01); }
+  75%  { transform: translate(-10%, -0.5%) scale(1.03); }
+  100% { transform: translate(-15%, 0%) scale(1); }
+}
+
+@keyframes green-drift-prominent {
+  0%   { transform: translate(0%, 0%) scale(1); }
+  15%  { transform: translate(-8%, -1%) scale(1.03); }
+  35%  { transform: translate(-16%, 0.5%) scale(1.01); }
+  55%  { transform: translate(-5%, -1%) scale(1.04); }
+  75%  { transform: translate(-14%, 0%) scale(1.02); }
+  100% { transform: translate(0%, 0%) scale(1); }
+}
+
+@keyframes purple-drift-prominent {
+  0%   { transform: translate(-15%, 0%) scale(1); }
+  20%  { transform: translate(-6%, -1%) scale(1.03); }
+  45%  { transform: translate(0%, 0.5%) scale(1.01); }
+  70%  { transform: translate(-12%, -1%) scale(1.04); }
+  100% { transform: translate(-15%, 0%) scale(1); }
+}
+
+/* ----------------------------------------------------------
+   Wave Background Decoration
+   Pseudo-elements are 130% wide x 120% tall, positioned so
+   they overhang on the right and below. overflow:hidden on
+   the parent clips them. No hard edges are ever visible
+   because gradients fade to transparent well inside the
+   element boundaries.
    ---------------------------------------------------------- */
 
 .wave-bg {
@@ -190,91 +235,97 @@
 .wave-bg::after {
   content: "";
   position: absolute;
-  bottom: 0;
+  bottom: -20%;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 130%;
+  height: 120%;
   pointer-events: none;
   z-index: -1;
+  will-change: transform;
+  transform-origin: center bottom;
 }
 
 /* Green wave layer */
 .wave-bg::before {
   background:
     radial-gradient(
-      ellipse 80% 50% at 5% 100%,
-      rgba(0, 200, 0, calc(0.3 * var(--of-wave-opacity))) 0%,
+      ellipse 80% 50% at 5% 85%,
+      rgba(0, 200, 0, calc(0.55 * var(--of-wave-opacity))) 0%,
       transparent 70%
     ),
     radial-gradient(
-      ellipse 60% 40% at 15% 95%,
-      rgba(0, 200, 0, calc(0.2 * var(--of-wave-opacity))) 0%,
+      ellipse 60% 40% at 25% 80%,
+      rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
       transparent 60%
     ),
     radial-gradient(
-      ellipse 90% 35% at 95% 100%,
-      rgba(0, 200, 0, calc(0.15 * var(--of-wave-opacity))) 0%,
+      ellipse 70% 35% at 75% 85%,
+      rgba(0, 200, 0, calc(0.3 * var(--of-wave-opacity))) 0%,
       transparent 50%
     );
+  animation: green-drift 8s ease-in-out infinite;
 }
 
 /* Blue/purple wave layer */
 .wave-bg::after {
   background:
     radial-gradient(
-      ellipse 70% 45% at 20% 100%,
-      rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
+      ellipse 70% 45% at 30% 85%,
+      rgba(123, 123, 255, calc(0.55 * var(--of-wave-opacity))) 0%,
       transparent 65%
     ),
     radial-gradient(
-      ellipse 80% 35% at 85% 100%,
-      rgba(123, 123, 255, calc(0.25 * var(--of-wave-opacity))) 0%,
+      ellipse 80% 35% at 70% 85%,
+      rgba(123, 123, 255, calc(0.45 * var(--of-wave-opacity))) 0%,
       transparent 55%
     ),
     radial-gradient(
-      ellipse 50% 30% at 50% 95%,
-      rgba(123, 123, 255, calc(0.15 * var(--of-wave-opacity))) 0%,
+      ellipse 50% 30% at 50% 80%,
+      rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
       transparent 50%
     );
+  animation: purple-drift 10s ease-in-out infinite;
 }
 
-/* Cover/section slides get more prominent waves */
+/* Cover/section slides get more prominent waves with wider drift */
 .wave-bg-prominent::before {
   background:
     radial-gradient(
-      ellipse 90% 60% at 5% 100%,
-      rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
+      ellipse 90% 60% at 5% 85%,
+      rgba(0, 200, 0, calc(0.7 * var(--of-wave-opacity))) 0%,
       transparent 70%
     ),
     radial-gradient(
-      ellipse 70% 50% at 20% 95%,
-      rgba(0, 200, 0, calc(0.25 * var(--of-wave-opacity))) 0%,
+      ellipse 70% 50% at 30% 80%,
+      rgba(0, 200, 0, calc(0.5 * var(--of-wave-opacity))) 0%,
       transparent 60%
     ),
     radial-gradient(
-      ellipse 100% 45% at 90% 100%,
-      rgba(0, 200, 0, calc(0.2 * var(--of-wave-opacity))) 0%,
+      ellipse 80% 45% at 75% 85%,
+      rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
       transparent 55%
     );
+  animation: green-drift-prominent 7s ease-in-out infinite;
 }
 
 .wave-bg-prominent::after {
   background:
     radial-gradient(
-      ellipse 80% 55% at 15% 100%,
-      rgba(123, 123, 255, calc(0.4 * var(--of-wave-opacity))) 0%,
+      ellipse 80% 55% at 25% 85%,
+      rgba(123, 123, 255, calc(0.7 * var(--of-wave-opacity))) 0%,
       transparent 65%
     ),
     radial-gradient(
-      ellipse 90% 45% at 80% 100%,
-      rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
+      ellipse 90% 45% at 65% 85%,
+      rgba(123, 123, 255, calc(0.55 * var(--of-wave-opacity))) 0%,
       transparent 60%
     ),
     radial-gradient(
-      ellipse 60% 35% at 50% 95%,
-      rgba(123, 123, 255, calc(0.2 * var(--of-wave-opacity))) 0%,
+      ellipse 60% 35% at 50% 80%,
+      rgba(123, 123, 255, calc(0.4 * var(--of-wave-opacity))) 0%,
       transparent 50%
     );
+  animation: purple-drift-prominent 9s ease-in-out infinite;
 }
 
 /* ----------------------------------------------------------