@import url('https://unpkg.com/normalize.css') layer(normalize);
/* @import 'normalize.css' layer(normalize); */
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Grand+Hotel&display=swap');

@layer normalize, base, demo, slider, animation, debug;

@layer debug {
  :root {
    --accent: oklch(0.72 0.28 349.83);
    --size: 182%;
  }

  .instruction {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: 'Gloria Hallelujah', cursive;
    translate: -100px 40%;
    color: color-mix(in lch, canvas, canvasText 80%);

    @media (min-width: 768px) {
      translate: -200px 20%;
    }

    span {
      display: inline-block;
      translate: -50% 15%;
      rotate: 10deg;
    }
  }

  .test-stack {
    height: 20vmin;
    aspect-ratio: 1;
    outline-offset: 4px;
    outline: 2px dashed var(--accent);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: calc(100% + 4rem);
    /* translate: 0 -50%; */
    opacity: 0;
    transition: opacity var(--transition) var(--ease);
    display: grid;
    pointer-events: none;

    div {
      grid-area: 1 / 1;
    }

    div:nth-of-type(1) {
      background: black;
      filter: url(#noiseshow) contrast(2);
    }
    div:nth-of-type(2) {
      background: hsl(0 0% 50%);
      mix-blend-mode: saturation;
    }
  }

  .noise-holder {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle at 50% 40%, #0000 0%, #fff 75%);
            mask: radial-gradient(circle at 50% 40%, #0000 0%, #fff 75%);
    pointer-events: none;
  }
  .noise {
    height: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    left: 50%;
    position: absolute;
    translate: -50% 0;
    display: grid;
    opacity: 0.3;

    div {
      grid-area: 1 / 1;
    }

    div:nth-of-type(1) {
      background: black;
      filter: url(#noiseshow) contrast(2);
    }
    div:nth-of-type(2) {
      background: hsl(0 0% 50%);
      mix-blend-mode: saturation;
    }
  }

  [data-reveal='true'] .test-stack {
    opacity: 1;
  }

  .arrows-holder {
    -webkit-clip-path: circle(50%);
            clip-path: circle(50%);
  }
  [data-reveal='true'] .arrows-holder {
    -webkit-clip-path: circle(250%);
            clip-path: circle(250%);
    -webkit-mask: unset;
            mask: unset;
  }

  [data-reveal='true'] .slider input {
    opacity: 1;
    translate: 0 -150%;
    outline-color: var(--accent);
    background: color-mix(in oklch, var(--accent), #0000);
  }

  .slider input {
    outline: 2px dashed #0000;
    transition-property: opacity, outline-color, background, translate;
    transition-duration: 0.5s;
  }

  .slider [type='range']::-webkit-slider-runnable-track {
    height: 100%;
    width: 100%;
    background: color-mix(in oklch, var(--accent), #0000 75%);
  }

  .slider [type='range']::-moz-range-track {
    height: 100%;
    width: 100%;
    background: color-mix(in oklch, var(--accent), #0000 75%);
  }

  .slider ::-webkit-slider-thumb {
    width: var(--height);
    height: var(--height);
  }

  .slider ::-moz-range-thumb {
    width: var(--height);
    height: var(--height);
  }
}

@layer animation {
  :root {
    @media (hover: hover) {
      --transition: 0.625s;
      --ease: linear(
        0 0%,
        0.5007 7.21%,
        0.7803 12.29%,
        0.8883 14.93%,
        0.9724 17.63%,
        1.0343 20.44%,
        1.0754 23.44%,
        1.0898 25.22%,
        1.0984 27.11%,
        1.1014 29.15%,
        1.0989 31.4%,
        1.0854 35.23%,
        1.0196 48.86%,
        1.0043 54.06%,
        0.9956 59.6%,
        0.9925 68.11%,
        1 100%
      );
    }
    /* --transition: 0s;
    --ease: ease; */
  }
  @property --slider-complete {
    initial-value: 0;
    inherits: true;
    syntax: '<integer>';
  }

  @property --slider-offset {
    initial-value: 5;
    inherits: true;
    syntax: '<integer>';
  }

  .slider {
    position: relative;
  }

  .slider__indicator,
  .track {
    transition: translate var(--transition) var(--ease),
      -webkit-clip-path var(--transition) var(--ease);
    transition: translate var(--transition) var(--ease),
      clip-path var(--transition) var(--ease);
    transition: translate var(--transition) var(--ease),
      clip-path var(--transition) var(--ease),
      -webkit-clip-path var(--transition) var(--ease);
  }
  .arrows-holder {
    transition: -webkit-clip-path var(--transition) var(--ease);
    transition: clip-path var(--transition) var(--ease);
    transition: clip-path var(--transition) var(--ease), -webkit-clip-path var(--transition) var(--ease);
  }

  .slider__fill {
    --inset: calc(90% - ((var(--slider-complete) / 100) * 90%));
    -webkit-clip-path: inset(0 var(--inset) 0 0 round 120px);
            clip-path: inset(0 var(--inset) 0 0 round 120px);
    transition: -webkit-clip-path var(--transition) var(--ease);
    transition: clip-path var(--transition) var(--ease);
    transition: clip-path var(--transition) var(--ease), -webkit-clip-path var(--transition) var(--ease);
  }

  .slider:hover:not(:active) {
    --slider-touch: var(--slider-offset);
  }

  .slider__indicator {
    translate: calc(
        (((var(--slider-complete) / 100) * (100cqi - 54%)) - 28%) +
          (var(--slider-touch, 0) * 1%)
      ) -56%;
  }

  .slider__indicator .arrows,
  .slider__indicator .noise {
    transition: transform var(--transition) var(--ease);
    transform: rotate(
      calc(((var(--slider-complete) + var(--slider-touch, 0)) / 100) * 360deg)
    );
  }

  @supports (animation-timeline: scroll()) and (animation-range: 0 100%) {
    .slider {
      timeline-scope: --thumb;
      -webkit-animation: progress both linear, offset both steps(1);
              animation: progress both linear, offset both steps(1);
      animation-direction: reverse;
      animation-timeline: --thumb;
      animation-range: contain;
    }
    @-webkit-keyframes progress {
      to {
        --slider-complete: 100;
      }
    }
    @keyframes progress {
      to {
        --slider-complete: 100;
      }
    }
    @-webkit-keyframes offset {
      0% {
        --slider-offset: 5;
      }
      1%,
      50%,
      99% {
        --slider-offset: 0;
      }
      100% {
        --slider-offset: -5;
      }
    }
    @keyframes offset {
      0% {
        --slider-offset: 5;
      }
      1%,
      50%,
      99% {
        --slider-offset: 0;
      }
      100% {
        --slider-offset: -5;
      }
    }
    .slider input {
      overflow: hidden;
    }
    .slider ::-webkit-slider-thumb {
      view-timeline: --thumb inline;
    }
  }
}

@layer slider {
  .slider {
    --width: 230;
    --height: 2.625rem;
    display: flex;
    border-radius: 100px;
    color: white;
    width: calc(var(--width) * 1px);
    max-width: calc(100vw - 2rem);
    align-items: center;
  }

  .slider__track {
    flex: 1;
    height: var(--height);
    position: relative;
    container-type: inline-size;
  }

  .slider__fill {
    height: 100%;
    border-radius: 100px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    display: grid;
    place-items: center;
    translate: 0 -50%;
    -webkit-clip-path: inset(0 0 0 0 round 120px);
            clip-path: inset(0 0 0 0 round 120px);
    pointer-events: none;
    background: color-mix(in oklch, canvas, canvasText 15%);
    background: linear-gradient(
      90deg,
      oklch(0.32 0.15 259.94),
      oklch(0.61 0.2 247.14),
      oklch(0.71 0.24 313.75),
      oklch(0.72 0.28 349.83),
      oklch(0.72 0.23 3.74)
    );
    span {
      font-family: 'Grand Hotel', cursive;
      font-size: calc(var(--height) * 0.65);
      letter-spacing: 0.1ch;
      font-weight: 400;
      font-style: italic;
      line-height: 1;
    }
  }

  /* .slider__fill::after {
    content: '';
    width: 120%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: color-mix(in oklch, canvas, canvasText 75%);
    clip-path: inset(0 0 0 0 round 120px);
    transform: translateX(-100%);
  } */

  .slider__indicator {
    border-radius: 50%;
    pointer-events: none;
    height: 144%;
    aspect-ratio: 1;
    background: hsl(0 0% 0%);
    /* background-color: light-dark(hsl(240 30% 10%), hsl(240 30% 0%)); */
    position: absolute;
    top: 50%;
    left: 0;
    translate: calc(((100cqi - 100%) / 10) * 10) -56%;
    box-shadow: 0 12px 8px -2px light-dark(hsl(0 0% 10% / 0.25), hsl(0 0% 1% /
              0.25)),
      0 8px 12px -4px light-dark(hsl(0 0% 20% / 0.45), hsl(0 0% 2% / 0.45)),
      0 16px 16px -10px light-dark(hsl(0 0% 30% / 0.45), hsl(0 0% 3% / 0.45)),
      0 24px 24px -8px light-dark(hsl(0 0% 40% / 0.45), hsl(0 0% 4% / 0.45)),
      0 32px 32px -2px light-dark(hsl(0 0% 50% / 0.45), hsl(0 0% 5% / 0.45)),
      0 -6px 10px 0 hsl(0 0% 100% / 0.6) inset;

    .shines {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 50%;
      z-index: 3;

      &::before {
        content: '';
        position: absolute;
        width: 70%;
        height: 50%;
        background: linear-gradient(#fff, hsl(222 53% 93% / 0.9));
        filter: blur(20px);
        top: 12%;
        left: 50%;
        translate: -50% 0;
      }

      &::after {
        content: '';
        width: 60%;
        aspect-ratio: 1;
        background: radial-gradient(
          circle at 50% 0,
          #fff 50%,
          hsl(0 0% 100% / 1)
        );
        filter: blur(7px);
        position: absolute;
        top: 10%;
        left: 50%;
        translate: -50% 0;
        border-radius: 50%;
      }
    }

    .arrows-holder {
      position: absolute;
      inset: 0;
      z-index: 4;
      -webkit-mask: radial-gradient(circle at 50% 30%, #fff 25%, #0000 65%);
              mask: radial-gradient(circle at 50% 30%, #fff 25%, #0000 65%);
    }

    .arrows {
      position: absolute;
      height: var(--size);
      aspect-ratio: 1;
      border-radius: 50%;
      outline: 2px dashed var(--accent);
      left: 50%;
      top: 0;
      translate: -50% 0;

      svg {
        filter: drop-shadow(0 0 1px hsl(0 0% 50%));
        width: 1.35rem;
        position: absolute;
        color: hsl(0 0% 30%);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(calc(var(--i, 0) * 90deg))
          translate(10%, -2.25rem);

        path {
          stroke-width: 8;
        }

        &:nth-of-type(1) {
          --i: 0;
        }
        &:nth-of-type(2) {
          --i: 1;
        }
        &:nth-of-type(3) {
          --i: 2;
        }
        &:nth-of-type(4) {
          --i: 3;
        }
      }
    }
  }

  .slider__label {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
  }

  .slider input {
    width: 100%;
  }

  .slider [type='range'] {
    height: var(--height);
    outline: none;
  }

  .slider:has(:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  .slider [type='range']:hover {
    cursor: -webkit-grab;
  }

  .slider [type='range']:active {
    cursor: -webkit-grabbing;
  }

  .slider [type='range'] {
    opacity: 0;
  }
}

@layer base {
  html {
    color-scheme: light dark;
  }

  [data-theme='dark'] {
    color-scheme: dark;
  }

  [data-theme='light'] {
    color-scheme: light;
  }

  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

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

  body {
    background: light-dark(#fff, #000);
    overflow-x: hidden;
    display: grid;
    place-items: center;
    min-height: 100svh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in lch, canvasText, transparent 70%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}