<h1>Summer Vibes</h1>
<div class="grid">
  <div>
    <section class="glass">
      <header class="coupe blur">
        <div class="inside">
          <div class="bubbles">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </header>
      <main class="stern"></main>
      <footer class="foot blur"></footer>
    </section>
  </div>
  <div>
    <section class="controls">
      <fieldset class="cocktail-sliders">
        <legend>Cocktail color</legend>
        <label for="lightness">Lightness</label>
        <input type="range" value="100" id="lightness" min="0" max="100" />
        <label for="chroma">Chroma</label>
        <input type="range" value="50" id="chroma" min="0" max="50" />
        <label for="hue">Hue</label>
        <input type="range" value="304" id="hue" min="0" max="360" />

      </fieldset>
      <fieldset class="bubble-sliders">
        <legend>Bubble mix color</legend>
        <label for="bubblelightness">Bubble Lightness</label>
        <input type="range" value="36" id="bubblelightness" min="0" max="100" />
        <label for="bubblechroma">Bubble Chroma</label>
        <input type="range" value="25" id="bubblechroma" min="0" max="50" />
        <label for="bubblehue">Bubble Hue</label>
        <input type="range" value="304" id="bubblehue" min="0" max="360" />
      </fieldset>
    </section>
    <aside class="math">
      mix:
      <div class="color-cocktail"></div>
      +
      <div class="color-bubble"></div>
      =
      <div class="color-mix"></div>
    </aside>
  </div>
</div>

<div class="warning">
  Seems like your browsers doesn't support some of the needed new color spaces in CSS. This is currently supported in Chrome.
</div>
<div class="warning warning-nesting">
  This demo uses CSS nesting, which isn't supported in your browser, it is supported in Chrome.
</div>

@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&family=Poppins&display=swap");

@layer presentation, glass-shape, glass-contents, controls;

:root {
  --l: 100%;
  --c: 0.5;
  --h: 304;

  --bubble-l: 36%;
  --bubble-c: 0.2;
  --bubble-h: 304;
  --cocktail-color: oklch(var(--l, 100%) var(--c, 0.5) var(--h, 304));
  --cocktail-bubble-mix: oklch(
    var(--bubble-l, 36%) var(--bubble-c, 0.5) var(--bubble-h, 304)
  );
  --cocktail-mix-color: color-mix(
    in oklch,
    var(--cocktail-color),
    var(--cocktail-bubble-mix)
  );
}

@layer presentation {
  h1 {
    font-family: "Indie Flower", cursive;
    font-size: 4rem;
    color: var(--cocktail-color);
    -webkit-text-stroke-width: 0.02rem;
    -webkit-text-stroke-color: var(--cocktail-bubble-mix);
    margin: 20px 0 40px;
    transform: rotate(-10deg);
  }
}

@layer glass-contents {
  .inside {
    position: absolute;
    inset-block: 20px 0px;
    inset-inline: 20px;
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    background: var(--cocktail-color);
  }

  .bubbles > div {
    position: absolute;
    left: 100px;
    top: 50px;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    background: var(--cocktail-mix-color);
    z-index: 5;
    animation: 4s bubbleAnim infinite linear;
    &:nth-child(2) {
      left: 50px;
      top: 80px;
    }
    &:nth-child(3) {
      left: 70px;
      top: 120px;
    }
    &:nth-child(4) {
      left: 90px;
      top: 160px;
    }
    &:nth-child(5) {
      left: 40px;
      top: 180px;
    }
    &:nth-child(5) {
      left: 60px;
      top: 180px;
      animation-delay: -1s;
    }
  }

  @keyframes bubbleAnim {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-180px);
    }
  }
}

@layer glass-shape {
  .glass {
    position: relative;
    width: 200px;
  }
  .coupe {
    position: relative;
    height: 200px;
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.71);
    &::before {
      position: absolute;
      top: -12px;
      left: 0;
      width: 100%;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      content: "";
    }
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      clip-path: polygon(50% 50%, 0 0, 100% 0);
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(1px);
      content: "";
      z-index: 2;
    }
  }

  .stern {
    position: absolute;
    top: 93px;
    width: 10px;
    height: 140px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    clip-path: polygon(50% 2%, 100% 0, 100% 98%, 50% 100%, 0 98%, 0 0);
    border: 1px solid rgba(255, 255, 255, 0.71);
    z-index: 1;
  }

  .blur {
    backdrop-filter: blur(2.9px);
    -webkit-backdrop-filter: blur(2.9px);
  }

  .foot {
    position: absolute;
    bottom: -55px;
    left: 50%;
    width: 130px;
    height: 40px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.71);
  }
}

@layer controls {
  .cocktail-sliders input {
    accent-color: var(--cocktail-color);
  }

  .bubble-sliders input {
    accent-color: var(--cocktail-bubble-mix);
  }
  .math {
    display: flex;
    gap: 12px;
    margin-block: 10px;
    color: #fff;
    align-items: center;
    & div {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      &.color-cocktail {
        background: var(--cocktail-color);
      }
      &.color-bubble {
        background: var(--cocktail-bubble-mix);
      }
      &.color-mix {
        background: var(--cocktail-mix-color);
      }
    }
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", sans-serif;
    background-color: rgb(140, 44, 38);
    background-image: radial-gradient(
        farthest-corner circle at 100% 0%,
        #000054 0%,
        #27006b 100%
      ),
      url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    background-size: 100%, 150px;
    background-blend-mode: overlay;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-items: center;
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
  }

  .controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  label {
    margin-top: 12px;
    display: block;
    color: #fff;
  }

  input {
    width: 100%;
  }

  fieldset {
    border: 2px dashed rgba(255, 255, 255, 0.4);
    margin: 0;
    & legend {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(2px);
      padding: 5px 20px;
      border-radius: 30px;
    }
  }

  /*quick and dirty mobile fix, sorry about that ;)  */
  @media (width < 768px) {
    h1 {
      font-size: 3rem;
    }
    .grid {
      display: block;
      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
    }
    .controls {
      margin-top: 50px;
      grid-template-columns: 1fr;
      width: 100%;
    }
    fieldset {
      display: block;
      margin-block: 20px;
      width: 100%;
    }
  }
}

.warning {
  display: none;
  border: 5px solid hotpink;
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 20px;
  z-index: 200;
  background: #fff;
}

.warning-nesting {
  top: 100px;
}

@supports not (color: color-mix(in oklch, red, tan)) {
  :root {
    --cocktail-color: deeppink;
    --cocktail-mix-color: hotpink;
  }
  .warning {
    display: block;
  }
  .controls,
  .math {
    display: none;
  }
}

@supports not (selector(&)) {
  .warning-nesting {
    display: block;
  }
}

const root = document.documentElement;

function setupSlider(
  slider,
  variable,
  property,
  divisor = 1,
  isPercentage = false
) {
  let { value } = slider;

  slider.addEventListener("input", () => {
    value = slider.value / divisor;
    root.style.setProperty(variable, isPercentage ? `${value}%` : `${value}`);
  });
}

setupSlider(document.getElementById("lightness"), "--l", "--l", 1, true);
setupSlider(document.getElementById("chroma"), "--c", "--c", 100);
setupSlider(document.getElementById("hue"), "--h", "--h");

setupSlider(
  document.getElementById("bubblelightness"),
  "--bubble-l",
  "--bubble-l",
  1,
  true
);
setupSlider(
  document.getElementById("bubblechroma"),
  "--bubble-c",
  "--bubble-c",
  100
);
setupSlider(document.getElementById("bubblehue"), "--bubble-h", "--bubble-h");