@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

@layer scroll-effect {
  @layer base, stick, effect;

  @layer effect {
    :root {
      --start: 220;
      --end: 250;
      --lightness: 75%;
      --base-chroma: 0.2;
      --sticky-top: 50vh;
      --anim-trigger: 50%;
    }

    .scroll-list {
      --step: calc((var(--end) - var(--start)) / (var(--count) - 1));
    }

    .scroll-list li:not(:last-of-type) {
      color: oklch(
        var(--lightness) var(--base-chroma)
          calc(var(--start) + (var(--step) * var(--i)))
      );
    }

    @supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
      [data-animate='true'] .scroll-list li {
        opacity: 0.2;
        animation-name: brighten;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-range: cover calc(var(--anim-trigger) - 1lh) calc(var(--anim-trigger) + 1lh);
        animation-timeline: view();
      }
      [data-animate='true'] .scroll-list li:first-of-type {
        --start-opacity: 1;
      }
      [data-animate='true'] .scroll-list li:last-of-type {
        --brightness: 1;
        --end-opacity: 1;
      }

      @keyframes brighten {
        0% {
          opacity: var(--start-opacity, 0.2);
        }
        50% {
          opacity: 1;
          filter: brightness(var(--brightness, 1.2));
        }
        100% {
          opacity: var(--end-opacity, 0.2);
        }
      }
    }
  }

  @layer stick {
    .scroll-container {
      width: 100%;
      margin-top: 10vh;
      padding-top: 50px;
    }

    .scroll-section {
      --font-level: 4;
      display: flex;
      justify-content: center;
      gap: 1ch;
      line-height: 1.25;
      width: 100%;
      padding: 50vh 0;
    }

    .scroll-section h2 {
      position: sticky;
      top: calc(var(--sticky-top) - 1rem);
      font-size: inherit;
      margin: 0;
      display: inline-block;
      height: fit-content;
      font-weight: 600;
      align-self: flex-start;
    }

    .scroll-list {
      font-weight: 600;
      padding-inline: 0;
      margin: 0;
      list-style-type: none;
    }

    .scroll-section h2,
    .scroll-list li:last-of-type {
      background: linear-gradient(
        #ffffff 50%,
        rgba(255, 255, 255, 0.4)
      );
      background-clip: text;
      -webkit-background-clip: text;
      color: #0000;
    }
  }

  @layer base {
    :root {
      --font-size-min: 14;
      --font-size-max: 20;
      --font-ratio-min: 1.1;
      --font-ratio-max: 1.33;
      --font-width-min: 375;
      --font-width-max: 1500;
    }

    :where(.fluid) {
      --font-level: 0;
      --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);
    }

    .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;
    }

    .scroll-container {
      color: #e0e0e0;
    }
    
    @media (max-width: 768px) {
      :root {
        --sticky-top: 150px;
        --anim-trigger: calc(100vh - 150px);
      }
      .scroll-container {
        height: auto !important;
        min-height: auto !important;
        margin-top: 50px !important;
        padding-top: 0 !important;
      }
      .scroll-section {
        height: auto !important;
        min-height: auto !important;
        padding: 50px 0 0 0 !important;
      }
    }
  }
}