@import url("https://unpkg.com/normalize.css") layer(normalize);

/* We scope layers to our widget to try and avoid conflicts, though @layer is global. 
   Using unique layer names if possible or just standard CSS without layers to be safe in WP context. 
   I will adapt to standard CSS but keep the structure. */

.wml-kinetic-scroll-wrapper {
  /* Local variables */
  --spacing: 24px;
  --dot-size: 1.5px;
  --dot-color: rgba(0, 0, 0, 0.15);

  /* Container behavior */
  width: 100%;
  position: relative;
  font-family: "Geist", system-ui, sans-serif;
}

/* Background Effect removed as per request */

.wml-kinetic-container {
  width: 100%;
  max-width: 1024px;
  padding: 0 16px;
  margin: 0 auto;
}

.wml-kinetic-scroll-wrapper .no-offset {
  margin: 0;
}

.wml-kinetic-scroll-wrapper .list-text {
  /* Default styles, can be overridden by builder typography controls */
  position: sticky;
  top: calc(50% - 0.5lh);
  align-self: flex-start;
  min-width: max-content;
  margin: 0;
  /* Proportional font sizing */
  font-size: clamp(2rem, 8vw, 6rem);
}

.wml-kinetic-scroll-wrapper .list {
  /* Default styles, can be overridden by builder typography controls */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.wml-kinetic-scroll-wrapper .list li {
  line-height: 1.25;
  scroll-snap-align: center;
  /* Proportional font sizing */
  font-size: clamp(2rem, 8vw, 6rem);
}

.wml-kinetic-scroll-wrapper .list-container {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 48px;
  position: relative;
}

/* Text Effect */
.wml-kinetic-scroll-wrapper {
  --count: 15;
  /* Default, overridden by PHP inline style */
  --end: 360;
  --step: calc(var(--end) / var(--count));
}

.wml-kinetic-scroll-wrapper .list li {
  /* Default rainbow color, overridden by inline style if set */
  color: oklch(65% 0.3 calc(var(--i) * var(--step)));
}

/* Fallback for browsers without scroll-timeline support is static opacity */
.wml-kinetic-scroll-wrapper .list li {
  opacity: 1;
}

@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
  .wml-kinetic-scroll-wrapper .list li:first-of-type {
    --start-opacity: 1;
  }

  .wml-kinetic-scroll-wrapper .list li:last-of-type {
    --end-opacity: 1;
  }

  .wml-kinetic-scroll-wrapper .list li {
    opacity: 0.2;
    animation-name: brighten;
    animation-fill-mode: both;
    animation-timing-function: linear;

    animation-timeline: view();
    animation-range: cover calc(50% - 1lh) calc(50% + 1lh);
  }

  @keyframes brighten {
    0% {
      opacity: var(--start-opacity, 0.2);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: var(--end-opacity, 0.2);
    }
  }
}

@media (max-width: 600px) {
  .wml-kinetic-scroll-wrapper .list-container {
    column-gap: 12px;
  }
}