:root {
  /* Dark (default) */
  --black: #0a0a0a;
  --dark: #111111;
  --dark2: #1a1a1a;
  --dark3: #222222;

  /* Accent (dark = orange) */
  --orange: #e8600a;
  --orange2: #ff7920;

  /* Text */
  --white: #f0f0f0;
  --grey: #999999;
  --grey2: #555555;

  /* UI helpers */
  --font: 'Segoe UI', system-ui, sans-serif;
  --header-bg: rgba(40, 40, 40, 0.92);
  --header-bg-scrolled: rgba(10, 10, 10, 0.98);
  --shadow-accent: rgba(232, 96, 10, 0.35);

  /* Wave colors */
  --wave-1: rgba(0, 0, 0, 0.70);
  --wave-2: rgba(0, 0, 0, 0.50);
  --wave-3: rgba(0, 0, 0, 0.30);
  --wave-4: var(--dark);
  --fill-path : #0a0a0a;
  --wave-color : #0a0a0a;
  --wave-color-l_white-d_gray : #111111;
}

/* Light theme overrides */
:root[data-theme="light"]{
  /* White + soft violet */
  --black: rgb(220, 220, 220);     /* page background */
  --dark:  rgb(255, 255, 255);     /* section-dark becomes white */
  --dark2: #f1effa;     /* cards */
  --dark3: #eae7f8;     /* inner surfaces */

  /* Accent becomes violet */
  --orange:  #6d28d9;   /* violet */
  --orange2: #8b5cf6;   /* violet lighter */

  /* Text */
  --white: #14131a;     /* main text (dark) */
  --grey:  #4b4a57;     /* muted */
  --grey2: #7b7990;     /* lighter muted */

  /* Header */
  --header-bg: rgba(255,255,255,0.78);
  --header-bg-scrolled: rgba(255,255,255,0.92);
  --shadow-accent: rgba(109, 40, 217, 0.26);

  /* Waves become violet-tinted (soft) */
  --wave-1: rgba(255, 255, 255, 0.18);
  --wave-2: rgba(203, 203, 205, 0.167);
  --wave-3: rgb(247, 246, 251, 0.08);
  --wave-4: rgb(255, 255, 255);
  --fill-path : rgb(220, 220, 220);   
  --wave-color : #ffffff;
  --wave-color-l_white-d_gray : #ffffff;

}


.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}

.wave-1-col{ fill: var(--wave-1); }
.wave-2-col{ fill: var(--wave-2); }
.wave-3-col{ fill: var(--wave-3); }
.wave-4-col{ fill: var(--wave-4); }

.path-fill-scale{
    fill : var(--fill-path)
}

.wave-colors{
    fill: var(--wave-color);
}

.wave-colors-inv{
    fill: var(--wave-color-inv);
}

.wave-colors-white-gray{
    fill: var(--wave-color-l_white-d_gray);
}

.wave-colors-follow-black{
    fill: var(--black);
}
/* .content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
} */

/* Animation */

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    .content {
        height: 30vh;
    }
}