/* YOOtheme Scroll Reveal Text (srtype) */
.yoo-srtype{
  position: relative;
  white-space: pre-wrap;
  --sr-p: 0;                  /* 0..1 scroll progress */
  --sr-w: 0.045;              /* softness window */
  --sr-base-color: rgba(255,255,255,.18);
  --sr-reveal-color: rgba(255,255,255,1);
  --sr-base-shadow: rgba(255,255,255,.18); /* derived in JS if base color is hex */
}

/* fallback (no JS): just show base color */
.yoo-srtype{
  color: var(--sr-base-color);
}

/* after build we draw glyphs via spans */
.yoo-srtype.is-built{
  color: transparent;
}

/* Ensure elements start with progress at 0 until scroll updates it */
.yoo-srtype.is-built:not([style*="--sr-p"]){
  --sr-p: 0;
}

/* prevent mid-word wrapping */
.yoo-srtype .w{
  display: inline-block;
  white-space: nowrap;
}

/* each character */
.yoo-srtype .ch{
  position: relative;
  display: inline-block;
  color: transparent;
  text-shadow: 0 0 0 var(--sr-base-shadow);
}

/* white ink overlay */
.yoo-srtype .ch::after{
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  color: var(--sr-reveal-color);
  /*
    Opacity ramp per character:
      - sr-p: 0..1 scroll progress
      - sr-i: character position scaled so the final character can reach opacity 1
      - sr-w: softness window (smaller = snappier)
    The calculation ensures that when sr-p = 0, all characters have opacity 0
  */
  opacity: clamp(0, calc((var(--sr-p) - var(--sr-i)) / var(--sr-w)), 1);
  will-change: opacity;
}

/* reduced motion: fully revealed */
@media (prefers-reduced-motion: reduce){
  .yoo-srtype{ color: var(--sr-reveal-color) !important; }
  .yoo-srtype .ch::after{ opacity: 1 !important; }
}