.greckka-scroll-fill {
  --greckka-fill-base: #6f737b;
  --greckka-fill-color: #f3f4f6;
  width: 100%;
}

.greckka-scroll-fill__wrap {
  margin: 0;
}

.greckka-scroll-fill__text {
  --greckka-fill-progress: 0%;
  display: inline;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-color: var(--greckka-fill-base);
  background-image: linear-gradient(
    135deg,
    var(--greckka-fill-color) 50%,
    var(--greckka-fill-base) 60%
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: var(--greckka-fill-progress) 200%;
  -webkit-background-clip: text;
  background-clip: text;
  will-change: background-size;
}

/* Primary engine: native scroll-driven animation.
   It also works inside the Elementor preview iframe. */
@supports (animation-timeline: view()) {
  .greckka-scroll-fill__text {
    animation-name: greckka-text-fill;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 20% cover 65%;
  }

  @keyframes greckka-text-fill {
    from { background-size: 0% 200%; }
    to   { background-size: 200% 200%; }
  }
}

/* JS fallback only for browsers without view timelines. */
@supports not (animation-timeline: view()) {
  .greckka-scroll-fill__text {
    background-size: var(--greckka-fill-progress) 200%;
  }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .greckka-scroll-fill__text {
    color: var(--greckka-fill-base) !important;
    -webkit-text-fill-color: var(--greckka-fill-base);
    background: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .greckka-scroll-fill__text {
    animation: none !important;
    background-size: 200% 200% !important;
  }
}