/*******************************************************************************
            SCROLL ANIMATIONS
*******************************************************************************/

/*all properties must be outside the @supports check for mobile safari*/
@property --sc-translate-x {
syntax: '<length-percentage>';
inherits: false;
initial-value: 0;
}

@property --sc-translate-y {
syntax: '<length-percentage>';
inherits: false;
initial-value: 0;
}

@property --sp-translate-x {
syntax: '<length-percentage>';
inherits: false;
initial-value: 0;
}

@property --sp-translate-y {
syntax: '<length-percentage>';
inherits: false;
initial-value: 0;
}


@supports (animation-timeline: view()) {

  @media (prefers-reduced-motion: reduce) {
    [class*="scroll-"] { animation-timeline: none !important; }
  }
  /* ===================== CORE PIPELINE ===================== */
  /* Defaults: cover 0% → cover 50%, values 0 → 100, linear 1s */
  /* Usage: add any .scroll-* class to opt into the shared view() driver */
  [class*="scroll-"]{
    --sc-from: 0;
    --sc-to: 100;
    animation-name: var(--sc-animation-fade, none), var(--sc-animation-scale, none), var(--sc-animation-rotate, none), var(--sc-animation-move-x, none), var(--sc-animation-move-y, none), var(--sc-animation-blur, none), var(--sc-animation-clip, none);
    animation-direction: var(--sc-direction-fade, normal), var(--sc-direction-scale, normal), var(--sc-direction-rotate, normal), var(--sc-direction-move-x, normal), var(--sc-direction-move-y, normal), var(--sc-direction-blur, normal), var(--sc-direction-clip, normal);
    animation-duration: var(--sc-duration, 1s);
    animation-timing-function: var(--sc-ease, linear);
    animation-fill-mode: var(--sc-fill, both);
    animation-timeline: view();
    animation-range: var(--sc-start-point, cover) var(--sc-start, 0%) var(--sc-end-point, cover) var(--sc-end, 50%);
    translate: var(--sc-translate-x, 0px) var(--sc-translate-y, 0px);
    rotate: 0deg;
    scale: 1;
    transition: none;
  }



  /* ===================== FADE (opacity) ===================== */
  /* Defaults: from 0 → to 100, uses fade channel, expects 0..100 ranges */
  /* Usage: .scroll-fade, .scroll-fade:10-80, .scroll:from-20, etc. */

  [class*="scroll-fade"] {
    --sc-animation-fade: scroll-fade;
    will-change: opacity;
  }

  .scroll-fade\:reverse { --sc-direction-fade: reverse; }

  @keyframes scroll-fade {
    from {
      opacity: calc(var(--sc-fade-from, var(--sc-from)) / 100);
    }
    to {
      opacity: calc(var(--sc-fade-to, var(--sc-to)) / 100);
    }
  }

  .scroll-fade\:0-10, .scroll-fade\:0-20, .scroll-fade\:0-30, .scroll-fade\:0-40, .scroll-fade\:0-50, .scroll-fade\:0-60, .scroll-fade\:0-70, .scroll-fade\:0-80, .scroll-fade\:0-90, .scroll-fade\:0-100 { --sc-fade-from: 0; }
  .scroll-fade\:10-20, .scroll-fade\:10-30, .scroll-fade\:10-40, .scroll-fade\:10-50, .scroll-fade\:10-60, .scroll-fade\:10-70, .scroll-fade\:10-80, .scroll-fade\:10-90, .scroll-fade\:10-100 { --sc-fade-from: 10; }
  .scroll-fade\:20-30, .scroll-fade\:20-40, .scroll-fade\:20-50, .scroll-fade\:20-60, .scroll-fade\:20-70, .scroll-fade\:20-80, .scroll-fade\:20-90, .scroll-fade\:20-100 { --sc-fade-from: 20; }
  .scroll-fade\:30-40, .scroll-fade\:30-50, .scroll-fade\:30-60, .scroll-fade\:30-70, .scroll-fade\:30-80, .scroll-fade\:30-90, .scroll-fade\:30-100 { --sc-fade-from: 30; }
  .scroll-fade\:40-50, .scroll-fade\:40-60, .scroll-fade\:40-70, .scroll-fade\:40-80, .scroll-fade\:40-90, .scroll-fade\:40-100 { --sc-fade-from: 40; }
  .scroll-fade\:50-60, .scroll-fade\:50-70, .scroll-fade\:50-80, .scroll-fade\:50-90, .scroll-fade\:50-100 { --sc-fade-from: 50; }
  .scroll-fade\:60-70, .scroll-fade\:60-80, .scroll-fade\:60-90, .scroll-fade\:60-100 { --sc-fade-from: 60; }
  .scroll-fade\:70-80, .scroll-fade\:70-90, .scroll-fade\:70-100 { --sc-fade-from: 70; }
  .scroll-fade\:80-90, .scroll-fade\:80-100 { --sc-fade-from: 80; }
  .scroll-fade\:90-100 { --sc-fade-from: 90; }

  .scroll-fade\:0-10 { --sc-fade-to: 10; }
  .scroll-fade\:0-20, .scroll-fade\:10-20 { --sc-fade-to: 20; }
  .scroll-fade\:0-30, .scroll-fade\:10-30, .scroll-fade\:20-30 { --sc-fade-to: 30; }
  .scroll-fade\:0-40, .scroll-fade\:10-40, .scroll-fade\:20-40, .scroll-fade\:30-40 { --sc-fade-to: 40; }
  .scroll-fade\:0-50, .scroll-fade\:10-50, .scroll-fade\:20-50, .scroll-fade\:30-50, .scroll-fade\:40-50 { --sc-fade-to: 50; }
  .scroll-fade\:0-60, .scroll-fade\:10-60, .scroll-fade\:20-60, .scroll-fade\:30-60, .scroll-fade\:40-60, .scroll-fade\:50-60 { --sc-fade-to: 60; }
  .scroll-fade\:0-70, .scroll-fade\:10-70, .scroll-fade\:20-70, .scroll-fade\:30-70, .scroll-fade\:40-70, .scroll-fade\:50-70, .scroll-fade\:60-70 { --sc-fade-to: 70; }
  .scroll-fade\:0-80, .scroll-fade\:10-80, .scroll-fade\:20-80, .scroll-fade\:30-80, .scroll-fade\:40-80, .scroll-fade\:50-80, .scroll-fade\:60-80, .scroll-fade\:70-80 { --sc-fade-to: 80; }
  .scroll-fade\:0-90, .scroll-fade\:10-90, .scroll-fade\:20-90, .scroll-fade\:30-90, .scroll-fade\:40-90, .scroll-fade\:50-90, .scroll-fade\:60-90, .scroll-fade\:70-90, .scroll-fade\:80-90 { --sc-fade-to: 90; }
  .scroll-fade\:0-100, .scroll-fade\:10-100, .scroll-fade\:20-100, .scroll-fade\:30-100, .scroll-fade\:40-100, .scroll-fade\:50-100, .scroll-fade\:60-100, .scroll-fade\:70-100, .scroll-fade\:80-100, .scroll-fade\:90-100 { --sc-fade-to: 100; }

/* ===================== BLUR (filter) ===================== */
/* Defaults: from 5 → to 0 (px), uses blur slot, expects 0..20 */
/* Usage: .scroll-blur, .scroll-blur:15-5, combines with .scroll:* utilities */
  [class*="scroll-blur"] {
    --sc-animation-blur: scroll-blur;
    will-change: filter;
  }

  .scroll-blur\:reverse { --sc-direction-blur: reverse; }

  @keyframes scroll-blur {
    from {
      filter: blur(calc((var(--sc-blur-from, var(--sc-from)) / 100) * 20px));
    }
    to {
      filter: blur(calc((var(--sc-blur-to, var(--sc-to)) / 100) * 20px));
    }
  }

  .scroll-blur\:0-5, .scroll-blur\:0-10, .scroll-blur\:0-15, .scroll-blur\:0-20 { --sc-blur-from: 0; }
  .scroll-blur\:5-10, .scroll-blur\:5-15, .scroll-blur\:5-20 { --sc-blur-from: 25; }
  .scroll-blur\:10-15, .scroll-blur\:10-20 { --sc-blur-from: 50; }
  .scroll-blur\:15-20 { --sc-blur-from: 75; }

  .scroll-blur\:0-5 { --sc-blur-to: 25; }
  .scroll-blur\:0-10, .scroll-blur\:5-10 { --sc-blur-to: 50; }
  .scroll-blur\:0-15, .scroll-blur\:5-15, .scroll-blur\:10-15 { --sc-blur-to: 75; }
  .scroll-blur\:0-20, .scroll-blur\:5-20, .scroll-blur\:10-20, .scroll-blur\:15-20 { --sc-blur-to: 100; }

  /* ===================== SCALE (transform) ================= */
  /* Defaults: from 0 → to 100, mapped to scale 0 → 1 via calc */
  /* Usage: .scroll-scale, .scroll-scale:20-80, share .scroll:* utilities */
  [class*="scroll-scale"] {
    --sc-animation-scale: scroll-scale;
    will-change: transform;
  }

  .scroll-scale\:reverse { --sc-direction-scale: reverse; }

  @keyframes scroll-scale {
    from {
      scale: calc(var(--sc-scale-from, var(--sc-from)) / 100);
    }
    to {
      scale: calc(var(--sc-scale-to, var(--sc-to)) / 100);
    }
  }

  .scroll-scale\:0-10, .scroll-scale\:0-20, .scroll-scale\:0-30, .scroll-scale\:0-40, .scroll-scale\:0-50, .scroll-scale\:0-60, .scroll-scale\:0-70, .scroll-scale\:0-80, .scroll-scale\:0-90, .scroll-scale\:0-100 { --sc-scale-from: 0; }
  .scroll-scale\:10-20, .scroll-scale\:10-30, .scroll-scale\:10-40, .scroll-scale\:10-50, .scroll-scale\:10-60, .scroll-scale\:10-70, .scroll-scale\:10-80, .scroll-scale\:10-90, .scroll-scale\:10-100 { --sc-scale-from: 10; }
  .scroll-scale\:20-30, .scroll-scale\:20-40, .scroll-scale\:20-50, .scroll-scale\:20-60, .scroll-scale\:20-70, .scroll-scale\:20-80, .scroll-scale\:20-90, .scroll-scale\:20-100 { --sc-scale-from: 20; }
  .scroll-scale\:30-40, .scroll-scale\:30-50, .scroll-scale\:30-60, .scroll-scale\:30-70, .scroll-scale\:30-80, .scroll-scale\:30-90, .scroll-scale\:30-100 { --sc-scale-from: 30; }
  .scroll-scale\:40-50, .scroll-scale\:40-60, .scroll-scale\:40-70, .scroll-scale\:40-80, .scroll-scale\:40-90, .scroll-scale\:40-100 { --sc-scale-from: 40; }
  .scroll-scale\:50-60, .scroll-scale\:50-70, .scroll-scale\:50-80, .scroll-scale\:50-90, .scroll-scale\:50-100 { --sc-scale-from: 50; }
  .scroll-scale\:60-70, .scroll-scale\:60-80, .scroll-scale\:60-90, .scroll-scale\:60-100 { --sc-scale-from: 60; }
  .scroll-scale\:70-80, .scroll-scale\:70-90, .scroll-scale\:70-100 { --sc-scale-from: 70; }
  .scroll-scale\:80-90, .scroll-scale\:80-100 { --sc-scale-from: 80; }
  .scroll-scale\:90-100 { --sc-scale-from: 90; }

  .scroll-scale\:0-10 { --sc-scale-to: 10; }
  .scroll-scale\:0-20, .scroll-scale\:10-20 { --sc-scale-to: 20; }
  .scroll-scale\:0-30, .scroll-scale\:10-30, .scroll-scale\:20-30 { --sc-scale-to: 30; }
  .scroll-scale\:0-40, .scroll-scale\:10-40, .scroll-scale\:20-40, .scroll-scale\:30-40 { --sc-scale-to: 40; }
  .scroll-scale\:0-50, .scroll-scale\:10-50, .scroll-scale\:20-50, .scroll-scale\:30-50, .scroll-scale\:40-50 { --sc-scale-to: 50; }
  .scroll-scale\:0-60, .scroll-scale\:10-60, .scroll-scale\:20-60, .scroll-scale\:30-60, .scroll-scale\:40-60, .scroll-scale\:50-60 { --sc-scale-to: 60; }
  .scroll-scale\:0-70, .scroll-scale\:10-70, .scroll-scale\:20-70, .scroll-scale\:30-70, .scroll-scale\:40-70, .scroll-scale\:50-70, .scroll-scale\:60-70 { --sc-scale-to: 70; }
  .scroll-scale\:0-80, .scroll-scale\:10-80, .scroll-scale\:20-80, .scroll-scale\:30-80, .scroll-scale\:40-80, .scroll-scale\:50-80, .scroll-scale\:60-80, .scroll-scale\:70-80 { --sc-scale-to: 80; }
  .scroll-scale\:0-90, .scroll-scale\:10-90, .scroll-scale\:20-90, .scroll-scale\:30-90, .scroll-scale\:40-90, .scroll-scale\:50-90, .scroll-scale\:60-90, .scroll-scale\:70-90, .scroll-scale\:80-90 { --sc-scale-to: 90; }
  .scroll-scale\:0-100, .scroll-scale\:10-100, .scroll-scale\:20-100, .scroll-scale\:30-100, .scroll-scale\:40-100, .scroll-scale\:50-100, .scroll-scale\:60-100, .scroll-scale\:70-100, .scroll-scale\:80-100, .scroll-scale\:90-100 { --sc-scale-to: 100; }


  /*custom presets*/
  .scroll-scale\:100-120 { --sc-scale-from: 100; --sc-scale-to: 120; }
  .scroll-scale\:100-150 { --sc-scale-from: 100; --sc-scale-to: 150; }
  .scroll-scale\:100-200 { --sc-scale-from: 100; --sc-scale-to: 200; }
  .scroll-scale\:100-300 { --sc-scale-from: 100; --sc-scale-to: 200; }
  

  /* ===================== ROTATE (transform) ================= */
  /* Usage: .scroll-rotate:0-90, .scroll-rotate:180-0, etc. */
  [class*="scroll-rotate"] {
    --sc-animation-rotate: scroll-rotate;
    --sc-rotate-from: 0deg;
    --sc-rotate-to: 0deg;
  }

  .scroll-rotate\:reverse { --sc-direction-rotate: reverse; }

  @keyframes scroll-rotate {
    from {
      rotate: var(--sc-rotate-from, 0deg);
    }
    to {
      rotate: var(--sc-rotate-to, 0deg);
    }
  }

  [class*="scroll-rotate:0"] { --sc-rotate-from: 0deg; }
  .scroll-rotate\:0-45 {  --sc-rotate-to: 45deg; }
  .scroll-rotate\:0-90 {  --sc-rotate-to: 90deg; }
  .scroll-rotate\:0-135 { --sc-rotate-to: 135deg; }
  .scroll-rotate\:0-180 { --sc-rotate-to: 180deg; }
  .scroll-rotate\:0-225 { --sc-rotate-to: 225deg; }
  .scroll-rotate\:0-270 { --sc-rotate-to: 270deg; }
  .scroll-rotate\:0-315 { --sc-rotate-to: 315deg; }
  .scroll-rotate\:0-360 { --sc-rotate-to: 360deg; }
  .scroll-rotate\:0-540 { --sc-rotate-to: 540deg; }
  .scroll-rotate\:0-720 { --sc-rotate-to: 720deg; }

  
  /* ===================== CLIP (clip-path inset) ===================== */
  /* Full hide → reveal or reveal → hide using inset clip-path masks. */
  /* Usage: .scroll-clip, .scroll-clip:reverse, etc. */
  [class*="scroll-clip"] {
    --sc-animation-clip: scroll-clip-center;
    --sc-direction-clip: normal;
    --sc-clip-radius-start: 0px;
    --sc-clip-radius-end: 0px;
    will-change: clip-path;
  }

  .scroll-clip\:reverse,
  .scroll-clip-ltr\:reverse,
  .scroll-clip-rtl\:reverse,
  .scroll-clip-ttb\:reverse,
  .scroll-clip-btt\:reverse,
  .scroll-clip-v\:reverse,
  .scroll-clip-h\:reverse,
  .scroll-clip-circle\:reverse{
    --sc-direction-clip: reverse;
  }

  /* directional variants override the shared clip keyframe */
  [class*="scroll-clip-ltr"] { --sc-animation-clip: scroll-clip-ltr; }
  [class*="scroll-clip-rtl"] { --sc-animation-clip: scroll-clip-rtl; }
  [class*="scroll-clip-ttb"] { --sc-animation-clip: scroll-clip-ttb; }
  [class*="scroll-clip-btt"] { --sc-animation-clip: scroll-clip-btt; }
  [class*="scroll-clip-v"]   { --sc-animation-clip: scroll-clip-v; }
  [class*="scroll-clip-h"]   { --sc-animation-clip: scroll-clip-h; }
  [class*="scroll-clip-circle"] { --sc-animation-clip: scroll-clip-circle; }

  /* radius modifiers (start/end in 10px increments, 0 → 100px) */
  .scroll-clip-radius\:start-0 { --sc-clip-radius-start: 0px; }
  .scroll-clip-radius\:start-10 { --sc-clip-radius-start: 10px; }
  .scroll-clip-radius\:start-20 { --sc-clip-radius-start: 20px; }
  .scroll-clip-radius\:start-30 { --sc-clip-radius-start: 30px; }
  .scroll-clip-radius\:start-40 { --sc-clip-radius-start: 40px; }
  .scroll-clip-radius\:start-50 { --sc-clip-radius-start: 50px; }
  .scroll-clip-radius\:start-60 { --sc-clip-radius-start: 60px; }
  .scroll-clip-radius\:start-70 { --sc-clip-radius-start: 70px; }
  .scroll-clip-radius\:start-80 { --sc-clip-radius-start: 80px; }
  .scroll-clip-radius\:start-90 { --sc-clip-radius-start: 90px; }
  .scroll-clip-radius\:start-100 { --sc-clip-radius-start: 100px; }

  .scroll-clip-radius\:end-0 { --sc-clip-radius-end: 0px; }
  .scroll-clip-radius\:end-10 { --sc-clip-radius-end: 10px; }
  .scroll-clip-radius\:end-20 { --sc-clip-radius-end: 20px; }
  .scroll-clip-radius\:end-30 { --sc-clip-radius-end: 30px; }
  .scroll-clip-radius\:end-40 { --sc-clip-radius-end: 40px; }
  .scroll-clip-radius\:end-50 { --sc-clip-radius-end: 50px; }
  .scroll-clip-radius\:end-60 { --sc-clip-radius-end: 60px; }
  .scroll-clip-radius\:end-70 { --sc-clip-radius-end: 70px; }
  .scroll-clip-radius\:end-80 { --sc-clip-radius-end: 80px; }
  .scroll-clip-radius\:end-90 { --sc-clip-radius-end: 90px; }
  .scroll-clip-radius\:end-100 { --sc-clip-radius-end: 100px; }

  @keyframes scroll-clip-center {
    from { clip-path: inset(50% 50% 50% 50% round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-ltr {
    from { clip-path: inset(0 100% 0 0 round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-rtl {
    from { clip-path: inset(0 0 0 100% round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-ttb {
    from { clip-path: inset(0 0 100% 0 round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-btt {
    from { clip-path: inset(100% 0 0 0 round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-v {
    from { clip-path: inset(50% 0 50% 0 round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-h {
    from { clip-path: inset(0 50% 0 50% round var(--sc-clip-radius-start)); }
    to { clip-path: inset(0 0 0 0 round var(--sc-clip-radius-end)); }
  }

  @keyframes scroll-clip-circle {
    from { clip-path: circle(var(--sc-circle-from, 0%) at 50% 50%); }
    to { clip-path: circle(var(--sc-circle-to, 150%) at 50% 50%); }
  }

  

  /* ===================== MOVE X/Y (transform) Shared ===================== */
  [class*="scroll-move-"]{
    will-change: transform;
    --sc-start: 0%;
    --sc-end: 100%;
    
    /* 1 should work for all cases. 0.75 up til very wide images like 7:1*/
    --sc-overscan-factor: 0.75;
  }

  /* ===================== MOVE X (transform) ===================== */
  /* Defaults: from -10vw → 10vw; helpers cover -20..20 buckets */
  /* Usage: .scroll-move-x, .scroll-move-x:-20-0, .scroll-move-x:10--10 */
  [class*="scroll-move-x"] {
    --sc-animation-move-x: scroll-move-x;
    --sc-move-x-from: -10;
    --sc-move-x-to: 10;
    --sc-move-x-unit: 1vw;
    --sc-move-x-positive: max(var(--sc-move-x-from, -10), var(--sc-move-x-to, 10), 0);
    --sc-move-x-negative: min(var(--sc-move-x-from, -10), var(--sc-move-x-to, 10), 0);
    --sc-overscan-x-left: calc( var(--sc-move-x-positive) * var(--sc-overscan-factor-x, var(--sc-overscan-factor)) * var(--sc-move-x-unit));
    --sc-overscan-x-right: calc( var(--sc-move-x-negative) * -1 * var(--sc-move-x-unit) * var(--sc-overscan-factor-x, var(--sc-overscan-factor)));
    --sc-overscan-x: calc(var(--sc-overscan-x-left) + var(--sc-overscan-x-right));
  }

  .scroll-move-x\:reverse { --sc-direction-move-x: reverse; }

  @keyframes scroll-move-x {
    from {
      --sc-translate-x: calc(var(--sc-move-x-from, -10) * var(--sc-move-x-unit, 1vw));
    }
    to {
      --sc-translate-x: calc(var(--sc-move-x-to, 10) * var(--sc-move-x-unit, 1vw));
    }
  }

  [class*="scroll-move-x:0"] { --sc-move-x-from: 0; }
  .scroll-move-x\:0-10 { --sc-move-x-to: 10; }
  .scroll-move-x\:0-20 { --sc-move-x-to: 20; }
  .scroll-move-x\:0-30 { --sc-move-x-to: 30; }
  .scroll-move-x\:0-40 { --sc-move-x-to: 40; }
  .scroll-move-x\:0-50 { --sc-move-x-to: 50; }
  .scroll-move-x\:0-100 {--sc-move-x-to: 100; }
  .scroll-move-x\:0-200 {--sc-move-x-to: 200; }
  
  .scroll-move-x\:0--10 { --sc-move-x-to: -10; }
  .scroll-move-x\:0--20 { --sc-move-x-to: -20; }
  .scroll-move-x\:0--30 { --sc-move-x-to: -30; }
  .scroll-move-x\:0--40 { --sc-move-x-to: -40; }
  .scroll-move-x\:0--50 { --sc-move-x-to: -50; }
  .scroll-move-x\:0--100 {--sc-move-x-to: -100; }
  .scroll-move-x\:0--200 {--sc-move-x-to: -200; }

  .scroll-move-x\:-10-10 {  --sc-move-x-from: -10; --sc-move-x-to: 10; }
  .scroll-move-x\:-20-20 {  --sc-move-x-from: -20; --sc-move-x-to: 20; }
  .scroll-move-x\:-100-100 {--sc-move-x-from: -100; --sc-move-x-to: 100; }


  /* ===================== MOVE Y (transform) ===================== */
  /* Defaults: from -10vh → 10vh; helpers cover -20..20 buckets */
  /* Usage: .scroll-move-y, .scroll-move-y:-20-0, .scroll-move-y:10--10 */
  [class*="scroll-move-y"] {
    --sc-animation-move-y: scroll-move-y;
    --sc-move-y-from: -10;
    --sc-move-y-to: 10;
    --sc-move-y-unit: 1vh;
    --sc-move-y-positive: max(var(--sc-move-y-from, -10), var(--sc-move-y-to, 10), 0);
    --sc-move-y-negative: min(var(--sc-move-y-from, -10), var(--sc-move-y-to, 10), 0);
    --sc-overscan-y-top: calc(var(--sc-move-y-positive) * var(--sc-overscan-factor-y, var(--sc-overscan-factor)) * var(--sc-move-y-unit));
    --sc-overscan-y-bottom: calc( var(--sc-move-y-negative) * -1 * var(--sc-move-y-unit) * var(--sc-overscan-factor-y, var(--sc-overscan-factor)));
    --sc-overscan-y: calc(var(--sc-overscan-y-top) + var(--sc-overscan-y-bottom));
  }

  .scroll-move-y\:reverse { --sc-direction-move-y: reverse; }

  @keyframes scroll-move-y {
    from {
      --sc-translate-y: calc(var(--sc-move-y-from, -10) * var(--sc-move-y-unit));
    }
    to {
      --sc-translate-y: calc(var(--sc-move-y-to, 10) * var(--sc-move-y-unit));
    }
  }

  [class*="scroll-move-y:0"] { --sc-move-y-from: 0; }
  .scroll-move-y\:0-10 { --sc-move-y-to: 10; }
  .scroll-move-y\:0-20 { --sc-move-y-to: 20; }
  .scroll-move-y\:0-30 { --sc-move-y-to: 30; }
  .scroll-move-y\:0-40 { --sc-move-y-to: 40; }
  .scroll-move-y\:0-50 { --sc-move-y-to: 50; }
  .scroll-move-y\:0-100 {--sc-move-y-to: 100; }
  .scroll-move-y\:0-200 {--sc-move-y-to: 200; }
  
  .scroll-move-y\:0--10 { --sc-move-y-to: -10; }
  .scroll-move-y\:0--20 { --sc-move-y-to: -20; }
  .scroll-move-y\:0--30 { --sc-move-y-to: -30; }
  .scroll-move-y\:0--40 { --sc-move-y-to: -40; }
  .scroll-move-y\:0--50 { --sc-move-y-to: -50; }
  .scroll-move-y\:0--100 {--sc-move-y-to: -100; }
  .scroll-move-y\:0--200 {--sc-move-y-to: -200; }

  .scroll-move-y\:-10-10 {  --sc-move-y-from: -10; --sc-move-y-to: 10; }
  .scroll-move-y\:-20-20 {  --sc-move-y-from: -20; --sc-move-y-to: 20; }
  .scroll-move-y\:-100-100 {--sc-move-y-from: -100; --sc-move-y-to: 100; }



  /* ===================== PARALLAX BACKGROUND (shared) ================= */
  /* Independent parallax engine for background images. */
  [class*='scroll-parallax-bg-'] {
    position: relative;
    overflow: clip;
    isolation: isolate;

    /* 1 should work for all cases. 0.75 up til very wide images like 7:1*/
    --sp-overscan-factor: 0.75; 
  }

  [class*='scroll-parallax-bg-']::after {
    content: "";
    position: absolute;
    background-image: inherit;
    background-color: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    pointer-events: none;
    z-index: -1;
    inset: calc(-1 * var(--spy-overscan-top, 0vh))
           calc(-1 * var(--spx-overscan-right, 0vw))
           calc(-1 * var(--spy-overscan-bottom, 0vh))
           calc(-1 * var(--spx-overscan-left, 0vw));
    animation-name: var(--spx-animation-name, none), var(--spy-animation-name, none);
    animation-direction: var(--spx-animation-direction, normal), var(--spy-animation-direction, normal);
    animation-duration: var(--sp-animation-duration, 1s);
    animation-fill-mode: var(--sp-animation-fill-mode, both);
    animation-timing-function: var(--sp-ease, linear);
    animation-timeline: view();
    animation-range: var(--spx-animation-range, cover 0% cover 100%), var(--spy-animation-range, cover 0% cover 100%);
    translate: var(--sp-translate-x, 0px) var(--sp-translate-y, 0px);
  }

  [class*='scroll-parallax-bg-'] > * {
    position: relative;
    z-index: 1;
  }

  /* ===================== PARALLAX BACKGROUND X ================= */
  /* Defaults: from -10vw → 10vw, cover 0% → 100% of the viewport */

  [class*='scroll-parallax-bg-x'] {
    --spx-from: -10;
    --spx-to: 10;
    --spx-range-start: 0%;
    --spx-range-end: 100%;
    --spx-direction: normal;
    --spx-positive: max(var(--spx-from, -10), var(--spx-to, 10), 0);
    --spx-negative: min(var(--spx-from, -10), var(--spx-to, 10), 0);
    --spx-overscan-left: calc(var(--spx-positive) * var(--spx-overscan-factor, var(--sp-overscan-factor)) * 1vw );
    --spx-overscan-right: calc(var(--spx-negative) * -1vw * var(--spx-overscan-factor, var(--sp-overscan-factor)));
    --spx-overscan: calc(var(--spx-overscan-left) + var(--spx-overscan-right));
  }

 [class*='scroll-parallax-bg-x']::after {
    --spx-animation-name: scroll-parallax-bg-x;
    --spx-animation-direction: var(--spx-direction, normal);
    --spx-animation-range: cover var(--spx-range-start, 0%) cover var(--spx-range-end, 100%);
  }

  .scroll-parallax-bg-x\:reverse { --spx-direction: reverse; }


  @keyframes scroll-parallax-bg-x {
    from { --sp-translate-x: calc(var(--spx-from, -10) * 1vw); }
    to   { --sp-translate-x: calc(var(--spx-to, 10) * 1vw); }
  }

  /* ===================== PARALLAX BACKGROUND Y ================= */
  /* Defaults: from -10vh → 10vh, cover 0% → 100% of the viewport */

  [class*='scroll-parallax-bg-y'] {
    --spy-from: -10;
    --spy-to: 10;
    --spy-range-start: 0%;
    --spy-range-end: 100%;
    --spy-direction: normal;
    --spy-positive: max(var(--spy-from, -10), var(--spy-to, 10), 0);
    --spy-negative: min(var(--spy-from, -10), var(--spy-to, 10), 0);
    --spy-overscan-top: calc( var(--spy-positive) * var(--spy-overscan-factor, var(--sp-overscan-factor)) * 1vh );
    --spy-overscan-bottom: calc( var(--spy-negative) * -1vh * var(--spy-overscan-factor, var(--sp-overscan-factor)));
    --spy-overscan: calc(var(--spy-overscan-top) + var(--spy-overscan-bottom));
  }

 [class*='scroll-parallax-bg-y']::after {
    --spy-animation-name: scroll-parallax-bg-y;
    --spy-animation-direction: var(--spy-direction, normal);
    --spy-animation-range: cover var(--spy-range-start, 0%) cover var(--spy-range-end, 100%);
  }

  .scroll-parallax-bg-y\:reverse { --spy-direction: reverse; }

  @keyframes scroll-parallax-bg-y {
    from { --sp-translate-y: calc(var(--spy-from, -10) * 1vh); }
    to   { --sp-translate-y: calc(var(--spy-to, 10) * 1vh); }
  }



  /* ========== TRIGGER WINDOWS & VALUE RANGES  ================ */
  /*placed at the bottom to overwrite defaults*/

  /* ===================== TRIGGER WINDOWS ===================== */
  /* Defaults: start cover 0%, end cover 50% */
  /* Usage: .scroll:start-50 · .scroll:end-100 (percent timeline offsets) */
  .scroll\:start-0  { --sc-start: 0%; }
  .scroll\:start-5  { --sc-start: 5%; }
  .scroll\:start-10 { --sc-start: 10%; }
  .scroll\:start-15 { --sc-start: 15%; }
  .scroll\:start-20 { --sc-start: 20%; }
  .scroll\:start-25 { --sc-start: 25%; }
  .scroll\:start-30 { --sc-start: 30%; }
  .scroll\:start-35 { --sc-start: 35%; }
  .scroll\:start-40 { --sc-start: 40%; }
  .scroll\:start-45 { --sc-start: 45%; }
  .scroll\:start-50 { --sc-start: 50%; }
  .scroll\:start-55 { --sc-start: 55%; }
  .scroll\:start-60 { --sc-start: 60%; }
  .scroll\:start-65 { --sc-start: 65%; }
  .scroll\:start-70 { --sc-start: 70%; }
  .scroll\:start-75 { --sc-start: 75%; }
  .scroll\:start-80 { --sc-start: 80%; }
  .scroll\:start-85 { --sc-start: 85%; }
  .scroll\:start-90 { --sc-start: 90%; }
  .scroll\:start-95 { --sc-start: 95%; }
  .scroll\:start-100{ --sc-start: 100%; }
  .scroll\:end-0  { --sc-end: 0%; }
  .scroll\:end-5  { --sc-end: 5%; }
  .scroll\:end-10 { --sc-end: 10%; }
  .scroll\:end-15 { --sc-end: 15%; }
  .scroll\:end-20 { --sc-end: 20%; }
  .scroll\:end-25 { --sc-end: 25%; }
  .scroll\:end-30 { --sc-end: 30%; }
  .scroll\:end-35 { --sc-end: 35%; }
  .scroll\:end-40 { --sc-end: 40%; }
  .scroll\:end-45 { --sc-end: 45%; }
  .scroll\:end-50 { --sc-end: 50%; }
  .scroll\:end-55 { --sc-end: 55%; }
  .scroll\:end-60 { --sc-end: 60%; }
  .scroll\:end-65 { --sc-end: 65%; }
  .scroll\:end-70 { --sc-end: 70%; }
  .scroll\:end-75 { --sc-end: 75%; }
  .scroll\:end-80 { --sc-end: 80%; }
  .scroll\:end-85 { --sc-end: 85%; }
  .scroll\:end-90 { --sc-end: 90%; }
  .scroll\:end-95 { --sc-end: 95%; }
  .scroll\:end-100{ --sc-end: 100%; }

  /* ===================== VALUE RANGES ===================== */
  /* Defaults: from 0 → to 100 (unitless percent buckets) */
  /* Usage: .scroll:from-20 · .scroll:to-80 (accepts 0..100) */
  .scroll\:from-0 { --sc-from: 0; }
  .scroll\:from-10 { --sc-from: 10; }
  .scroll\:from-20 { --sc-from: 20; }
  .scroll\:from-30 { --sc-from: 30; }
  .scroll\:from-40 { --sc-from: 40; }
  .scroll\:from-50 { --sc-from: 50; }
  .scroll\:from-60 { --sc-from: 60; }
  .scroll\:from-70 { --sc-from: 70; }
  .scroll\:from-80 { --sc-from: 80; }
  .scroll\:from-90 { --sc-from: 90; }
  .scroll\:from-100 { --sc-from: 100; }
  .scroll\:to-0 { --sc-to: 0; }
  .scroll\:to-10 { --sc-to: 10; }
  .scroll\:to-20 { --sc-to: 20; }
  .scroll\:to-30 { --sc-to: 30; }
  .scroll\:to-40 { --sc-to: 40; }
  .scroll\:to-50 { --sc-to: 50; }
  .scroll\:to-60 { --sc-to: 60; }
  .scroll\:to-70 { --sc-to: 70; }
  .scroll\:to-80 { --sc-to: 80; }
  .scroll\:to-90 { --sc-to: 90; }
  .scroll\:to-100 { --sc-to: 100; }


    /* ===================== PARENT / CHILD LINK ===================== */
    /*default timeline name is "--scroll-parent"*/
  .scroll\:parent {
    --sc-parent-timeline: var(--scroll-parent-timeline-name, --scroll-parent);
    view-timeline-name: var(--sc-parent-timeline);
    view-timeline-axis: var(--scroll-parent-axis, block);
    view-timeline-inset: var(--scroll-parent-inset, 0%);
  }

  .scroll\:child {
    animation-timeline: var(--sc-parent-timeline, view());
  }


  /* ===================== Disable animations via class ===================== */

    /* disable ≤ 767px */
  @media (max-width: 767px) {
    .scroll\:disable-phone,
    .scroll\:disable-phone-all, .scroll\:disable-phone-all [class*="scroll-"] {
    animation: none !important;
    animation-timeline: none !important;
    --sc-animation-fade: none;
    --sc-animation-scale: none;
    --sc-animation-rotate: none;
    --sc-animation-move-x: none;
    --sc-animation-move-y: none;
    --sc-animation-blur: none;
    --sc-animation-clip: none;
    }
  }

  /* disable ≤ 991px */
  @media (max-width: 991px) {
    .scroll\:disable-tablet,
    .scroll\:disable-tablet-all, .scroll\:disable-tablet-all [class*="scroll-"] {
    animation: none !important;
    animation-timeline: none !important;
    --sc-animation-fade: none;
    --sc-animation-scale: none;
    --sc-animation-rotate: none;
    --sc-animation-move-x: none;
    --sc-animation-move-y: none;
    --sc-animation-blur: none;
    --sc-animation-clip: none;
    }
  }


    /* disable ≥ 768px */
  @media (min-width: 768px) {
    .scroll\:disable-phone-up,
    .scroll\:disable-phone-up-all, .scroll\:disable-phone-up-all [class*="scroll-"] {
    animation: none !important;
    animation-timeline: none !important;
    --sc-animation-fade: none;
    --sc-animation-scale: none;
    --sc-animation-rotate: none;
    --sc-animation-move-x: none;
    --sc-animation-move-y: none;
    --sc-animation-blur: none;
    --sc-animation-clip: none;
    }
  }

  /* disable ≥ 992px */
  @media (min-width: 992px) {
    .scroll\:disable-tablet-up,
    .scroll\:disable-tablet-up-all, .scroll\:disable-tablet-up-all [class*="scroll-"] {
    animation: none !important;
    animation-timeline: none !important;
    --sc-animation-fade: none;
    --sc-animation-scale: none;
    --sc-animation-rotate: none;
    --sc-animation-move-x: none;
    --sc-animation-move-y: none;
    --sc-animation-blur: none;
    --sc-animation-clip: none;
    }
  }

}



/*
helpers need to live outside the timline support check. 
necessary for proper display even without timeline scroll
*/

  .scroll-move-x\:parallax {
    width: calc(100% + var(--sc-overscan-x, 0px) );
    margin-left: calc(-1 * var(--sc-overscan-x-left, 0px) );
    width: 100%;
    position: absolute;
  }

 .scroll-move-y\:parallax {
    height: calc(100% + var(--sc-overscan-y, 0px) );
    margin-top: calc(-1 * var(--sc-overscan-y-top, 0px) );
    width: 100%;
    position: absolute;
  }


  .scroll-move-x\:parallax img, .scroll-move-y\:parallax img{
    object-fit: cover;
  }









/* =========================================================
   TEXT STAGGER — WORD / CHAR (base fade only)
   - Single var set for both words/chars
   - Outer unit masks (for clip variants), inner span carries motion/opacity
   ========================================================= */

:root{
  --text-stagger: .07s;              /* per unit (word/char) */
  --text-dur: 1.2s;                  /* transition duration   */
  --text-ease: cubic-bezier(0.25,1,0.5,1);
  --base-delay: 0ms;                  /* extra delay before first unit */

  /* show() defaults (used by ani-show* at the bottom) */
  --show-distance: 2em;              /* how far it moves in/out */
}




.ani\:start-0{  --ani-start: 0; }
.ani\:start-5{  --ani-start: 5; }
.ani\:start-10{ --ani-start: 10; }
.ani\:start-15{ --ani-start: 15; }
.ani\:start-20{ --ani-start: 20; }
.ani\:start-25{ --ani-start: 25; }
.ani\:start-30{ --ani-start: 30; }
.ani\:start-35{ --ani-start: 35; }
.ani\:start-40{ --ani-start: 40; }
.ani\:start-45{ --ani-start: 45; }
.ani\:start-50{ --ani-start: 50; }
.ani\:start-55{ --ani-start: 55; }
.ani\:start-60{ --ani-start: 60; }
.ani\:start-65{ --ani-start: 65; }
.ani\:start-70{ --ani-start: 70; }
.ani\:start-75{ --ani-start: 75; }
.ani\:start-80{ --ani-start: 80; }
.ani\:start-85{ --ani-start: 85; }
.ani\:start-90{ --ani-start: 90; }
.ani\:start-95{ --ani-start: 95; }

/* hide units until JS wraps & flags ready */
[class*="ani-word"], [class*="ani-char"]{ visibility: hidden; }
.ani\:js-active :is([class*="ani-word"], [class*="ani-char"]){ visibility: visible !important; }

/* units + inner content */
.a-wrap-char { display: inline-flex; }
.a-word, .a-char { display: inline-flex; overflow: hidden; line-height: inherit;}
.a-word > span, .a-char > span{
  display: inline-flex;
  opacity: 0;
  transition: opacity var(--text-dur) var(--text-ease);
  transition-delay: calc(var(--base-delay, 0s) + var(--at, var(--ac, 0)) * var(--text-stagger, .07s));
  line-height: inherit;
}

/* activate base fade */
.ani\:active .a-word > span,
.ani\:active .a-char > span{
  opacity: 1;
}

/* ======================= CLIP VARIANTS (no opacity) ======================= */
.ani-word-clip .a-word,
.ani-char-clip .a-char{ overflow: hidden; }

.ani-word-clip .a-word > span,
.ani-char-clip .a-char > span{
  opacity: 1; /* override base fade */
  transform: translateY(120%); /* use your --rise inlined or swap to var(--rise) */
  transition: transform var(--text-dur) var(--text-ease);
  transition-delay: calc(var(--base-delay, 0s) + var(--at, var(--ac, 0)) * var(--text-stagger, .07s));
  will-change: transform;
}
.ani-word-clip.ani\:active .a-word > span,
.ani-char-clip.ani\:active .a-char > span{
  transform: translateY(0);
}

/* ========================================================================
   ANI SHOW — element + :children (directional fade/slide)
   - Base reads --show-x / --show-y / --show-o
   - Directions set initial offsets; activation resets them to 0/1
   - :children variant staggers direct children via --i
   ======================================================================== */

:root{
  --show-dur:1.2s;
  --show-distance: 3em;   /* movement distance */
  --show-stagger: .1s;   /* per-child step for :children */
  --show-zoom-from: 0;   /* scale start for ani-show-zoom */
  --show-zoom-to: 1;     /* scale end for ani-show-zoom */
  --show-zoom-origin: 50% 50%;
  --show-zoom-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* default easeOutBack */
  --show-zoom-duration: var(--text-dur, 1.2s);
}

/* Direction modifiers (apply to element or :children variants) */
[class*="ani-show-ttb"]:not([class*=":children"]),
[class*="ani-show-ttb"][class*=":children"] > * {
  /* from top */
  --show-y-start: calc(var(--show-distance) * -1);
  --show-y: var(--show-y-start);
}
[class*="ani-show-btt"]:not([class*=":children"]),
[class*="ani-show-btt"][class*=":children"] > * {
  /* from bottom */
  --show-y-start: var(--show-distance);
  --show-y: var(--show-y-start);
}
[class*="ani-show-ltr"]:not([class*=":children"]),
[class*="ani-show-ltr"][class*=":children"] > * {
  /* from left */
  --show-x-start: calc(var(--show-distance) * -1);
  --show-x: var(--show-x-start);
}
[class*="ani-show-rtl"]:not([class*=":children"]),
[class*="ani-show-rtl"][class*=":children"] > * {
  /* from right */
  --show-x-start: var(--show-distance);
  --show-x: var(--show-x-start);
}

[class*="ani-show-zoom"]:not([class*=":children"]),
[class*="ani-show-zoom"][class*=":children"] > * {
  --show-scale: var(--show-zoom-from, 0);
  --show-scale-start: var(--show-zoom-from, 0);
  --show-scale-end: var(--show-zoom-to, 1);
  --show-transform-ease: var(--show-zoom-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
  --show-transform-duration: var(--show-zoom-duration, var(--show-dur));
  transform-origin: var(--show-zoom-origin, 50% 50%);
}

/* BASE — element target + children targets share rules */
[class*="ani-show"]:not([class*=":children"]),
[class*="ani-show"][class*=":children"] > *{
  opacity: var(--show-o, 0);
  transform: translate(var(--show-x, 0), var(--show-y, 0)) scale(var(--show-scale, 1));
  transition: opacity var(--show-dur) var(--text-ease), transform var(--show-transform-duration, var(--show-dur)) var(--show-transform-ease, var(--text-ease));
  transition-delay: calc(var(--base-delay, 0s) + var(--i, 0) * var(--show-stagger, .12s));
  will-change: opacity, transform;
}

/* ACTIVATE — flip vars to end state (0,0,1) for element + children */
.ani\:active[class*="ani-show"]:not([class*=":children"]),
.ani\:active[class*="ani-show"][class*=":children"] > *{
  --show-x: 0;
  --show-y: 0;
  --show-scale: var(--show-scale-end, 1);
  --show-o: 1;
}



/* CSS-only index plumbing for :children (extend count as needed) */
[class*="ani-show"][class*=":children"] > :nth-child(1)  { --i: 0 }
[class*="ani-show"][class*=":children"] > :nth-child(2)  { --i: 1 }
[class*="ani-show"][class*=":children"] > :nth-child(3)  { --i: 2 }
[class*="ani-show"][class*=":children"] > :nth-child(4)  { --i: 3 }
[class*="ani-show"][class*=":children"] > :nth-child(5)  { --i: 4 }
[class*="ani-show"][class*=":children"] > :nth-child(6)  { --i: 5 }
[class*="ani-show"][class*=":children"] > :nth-child(7)  { --i: 6 }
[class*="ani-show"][class*=":children"] > :nth-child(8)  { --i: 7 }
[class*="ani-show"][class*=":children"] > :nth-child(9)  { --i: 8 }
[class*="ani-show"][class*=":children"] > :nth-child(10) { --i: 9 }
[class*="ani-show"][class*=":children"] > :nth-child(11) { --i: 10 }
[class*="ani-show"][class*=":children"] > :nth-child(12) { --i: 11 }
[class*="ani-show"][class*=":children"] > :nth-child(13) { --i: 12 }
[class*="ani-show"][class*=":children"] > :nth-child(14) { --i: 13 }
[class*="ani-show"][class*=":children"] > :nth-child(15) { --i: 14 }
[class*="ani-show"][class*=":children"] > :nth-child(16) { --i: 15 }
[class*="ani-show"][class*=":children"] > :nth-child(17) { --i: 16 }
[class*="ani-show"][class*=":children"] > :nth-child(18) { --i: 17 }
[class*="ani-show"][class*=":children"] > :nth-child(19) { --i: 18 }
[class*="ani-show"][class*=":children"] > :nth-child(20) { --i: 19 }




/* =========================================================
   FIRST-PAINT ANIMATION START VALUES (no JS)
   - Works when elements already have .ani:active in HTML
   - Keeps your existing rules untouched
   ========================================================= */
@starting-style {

  /* ani-show — element + :children */
  .ani\:active[class*="ani-show"]:not([class*=":children"]),
  .ani\:active[class*="ani-show"][class*=":children"] > *{
    /* Start at the directional FROM values */
    opacity:  0;
    transform: translate(
      var(--show-x-start, var(--show-x, 0)),
      var(--show-y-start, var(--show-y, 0))
    ) scale(var(--show-scale-start, var(--show-scale, 1)));
  }

  /* ani-word / ani-char base fade */
  .ani\:active:not(.ani-word-clip):not(.ani-char-clip) .a-word > span,
  .ani\:active:not(.ani-word-clip):not(.ani-char-clip) .a-char > span {
    opacity: 0;
  }

  /* ani-word-clip / ani-char-clip clip offsets */
  .ani\:active.ani-word-clip .a-word > span,
  .ani\:active.ani-char-clip .a-char > span {
    transform: translateY(120%);
  }
}