@supports (animation-timeline: auto, scroll()) {
  /* Scale animations */
  .scroll-scale-up,
  .scroll-scale-down {
    overflow: clip;
  }
  .scroll-scale-up img,
  .scroll-scale-down img {
    animation: scroll-scale-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-scale-down img {
    animation-direction: reverse;
  }

  .scroll-scale-up-from-bottom-left {
    animation: scale-up-from-bottom-left 1s linear both;
    animation-timeline: view();
  }

  .scroll-scale-up-from-top-right {
    animation: scale-up-from-top-right 1s linear both;
    animation-timeline: view();
  }

  .scroll-light-vertical-motion {
    animation: light-vertical-motion 1s linear both;
    animation-timeline: view();
  }
  .scroll-light-vertical-motion-reverse {
    animation: light-vertical-motion-reverse 1s linear both reverse;
    animation-timeline: view();
  }

  .scroll-light-horizontal-motion {
    animation: light-horizontal-motion 1s linear both;
    animation-timeline: view();
  }
  .scroll-light-horizontal-motion-reverse {
    animation: light-horizontal-motion-reverse 1s linear both reverse;
    animation-timeline: view();
  }

  /* Horizontal object-position animations */
  .scroll-left-right img,
  .scroll-right-left img {
    animation: scroll-horizontal-object-position-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-left-right-40-60 img,
  .scroll-right-left-40-60 img {
    animation: scroll-horizontal-object-position-40-60-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-left-right-25-75 img,
  .scroll-right-left-25-75 img {
    animation: scroll-horizontal-object-position-25-75-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-right-left img,
  .scroll-right-left-40-60 img,
  .scroll-right-left-25-75 img {
    animation-direction: reverse;
  }

  /* Vertical object-position animations */
  .scroll-top-bottom img,
  .scroll-bottom-top img {
    animation: scroll-vertical-object-position-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-top-bottom-25-75 img,
  .scroll-bottom-top-25-75 img {
    animation: scroll-vertical-object-position-25-75-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-bottom-top img,
  .scroll-bottom-top-25-75 img {
    animation-direction: reverse;
  }

  /* Diagonal object-position animation */
  .scroll-diagonal-left-top-right-bottom,
  .scroll-diagonal-right-bottom-left-top {
    overflow: clip;
  }
  .scroll-diagonal-left-top-right-bottom img {
    animation: scroll-diagonal-object-position-keyframes 1s linear both;
    animation-timeline: view();
  }
  .scroll-diagonal-right-bottom-left-top img {
    animation-direction: reverse;
  }

  /* Blur out animation */
  .scroll-blur-out {
    animation: scroll-blur-keyframes 1s linear both;
    animation-timeline: view();
    animation-range: 70% 100%;
  }

  /* Cover parallax animation */
  .scroll-cover img {
    animation: scroll-cover-keyframes 1s linear both;
    animation-timeline: view();
    animation-range: contain 0% cover 100%;
  }

  /* Gradient mask animation */
  .scroll-gradient-mask {
    /* 1. MASK: Transparent (Start) -> Solid (Middle) -> Transparent (End) */
    /* We use broad transparent zones to ensure total hiding */
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 25%,
      black 45%,
      black 55%,
      transparent 75%,
      transparent 100%
    );
    /* 2. SCALE: Set height to 400% for 100% "safe" transparent zones */
    -webkit-mask-size: 100% 400%;
    mask-size: 100% 400%;

    /* 3. ANIMATION */
    animation: scroll-gradient-mask-keyframes 1s linear both;
    animation-timeline: view();
  }

  .scroll-border-radius {
    animation: scroll-border-radius-keyframes 1s linear both;
    animation-timeline: view();
    overflow: clip;
  }

  .scroll-circular-clip-path {
    animation: scroll-circular-clip-path-keyframes 1s linear both;
    animation-timeline: view();
    overflow: clip;
  }

  .scroll-cover-container {
    position: relative;
    overflow: clip;
  }

  .scroll-svg-path-morph-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100% !important;
    height: 400px;
    transform: scaleX(-1.1);
  }

  .scroll-svg-path-morph-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100% !important;
    height: 400px;
    transform: scaleX(-1.1);
  }

  .scroll-svg-path-morph-1 path {
    animation: scroll-svg-path-morph-1-keyframes 1s linear both;
    animation-timeline: view();
    animation-range: cover 25% cover 100%;
    fill: var(--wp--preset--color--page-background);
  }
  .scroll-svg-path-morph-2 path {
    animation: scroll-svg-path-morph-2-keyframes 1s linear both;
    animation-timeline: view();
    animation-range: cover 25% cover 100%;
    fill: var(--wp--preset--color--page-background);
  }
  .scroll-svg-path-morph-3 path {
    animation: scroll-svg-path-morph-3-keyframes 1s linear both;
    animation-timeline: view();
    animation-range: cover 25% cover 100%;
    fill: var(--wp--preset--color--page-background);
  }
}

/* Keyframes */
@keyframes scroll-scale-keyframes {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.25);
  }
}
@keyframes scroll-diagonal-object-position-keyframes {
  from {
    object-position: left top;
  }
  to {
    object-position: right bottom;
  }
}
@keyframes scroll-horizontal-object-position-keyframes {
  from {
    object-position: left center;
  }
  to {
    object-position: right center;
  }
}
@keyframes scroll-horizontal-object-position-40-60-keyframes {
  from {
    object-position: 40% center;
  }
  to {
    object-position: 60% center;
  }
}
@keyframes scroll-horizontal-object-position-25-75-keyframes {
  from {
    object-position: 25% center;
  }
  to {
    object-position: 75% center;
  }
}
@keyframes scroll-vertical-object-position-keyframes {
  from {
    object-position: center top;
  }
  to {
    object-position: center bottom;
  }
}
@keyframes scroll-cover-keyframes {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(50vh) scale(1.1);
  }
}
@keyframes scroll-vertical-object-position-25-75-keyframes {
  from {
    object-position: center 25%;
  }
  to {
    object-position: center 75%;
  }
}
@keyframes scroll-blur-keyframes {
  from {
    filter: blur(0px);
    opacity: 1;
  }
  to {
    filter: blur(12px);
    opacity: 0;
  }
}
@keyframes scroll-gradient-mask-keyframes {
  0% {
    /* Start: Element is hidden in the first 25% transparent block */
    mask-position: 0% 0%;
  }
  30% {
    /* 30-70%: Element is revealed by the middle black block */
    mask-position: 0% 50%;
  }
  70% {
    mask-position: 0% 50%;
  }
  100% {
    /* End: Element is hidden in the last 25% transparent block */
    mask-position: 0% 100%;
  }
}

@keyframes scroll-border-radius-keyframes {
  from {
    border-radius: 50% 50% 0% 0%;
  }
  to {
    border-radius: 75% 75% 0% 0%;
  }
}

@keyframes scroll-circular-clip-path-keyframes {
  from {
    clip-path: circle(100% at 0% 100%);
  }
  to {
    clip-path: circle(100% at 100% 100%);
  }
}

/* Text focus-in animation */
.text-focus-in {
  animation: text-focus-in 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes scroll-svg-path-morph-1-keyframes {
  from {
    d: path(
      "M0,59 C22.9413613,59 29.7808497,59 50,59 C70.2191503,59 72.1111759,59 100,59 L100,60 L0,60 L0,59 Z"
    );
  }
  to {
    d: path(
      "M0,20 C16.6666667,-6.66666667 33.3333333,-6.66666667 50,20 C66.6666667,46.6666667 83.3333333,46.6666667 100,20 L100,60 L0,60 L0,20 Z"
    );
  }
}

@keyframes scroll-svg-path-morph-2-keyframes {
  from {
    d: path(
      "M0,312 L37.5,312 C75,312 150,312 225,312 C300,312 375,312 450,312 C525,312 600,312 675,312 C750,312 825,312 862.5,312 L900,312 L900,313 L862.5,313 C825,313 750,313 675,313 C600,313 525,313 450,313 C375,313 300,313 225,313 C150,313 75,313 37.5,313 L0,313 L0,312 Z"
    );
  }
  to {
    d: path(
      "M0,123 L37.5,102.2 C75,81.3 150,39.7 225,18.7 C300,-2.3 375,-2.7 450,19.3 C525,41.3 600,85.7 675,86.2 C750,86.7 825,43.3 862.5,21.7 L900,0 L900,313 L862.5,313 C825,313 750,313 675,313 C600,313 525,313 450,313 C375,313 300,313 225,313 C150,313 75,313 37.5,313 L0,313 L0,123 Z"
    );
  }
}

@keyframes scroll-svg-path-morph-3-keyframes {
  from {
    d: path(
      "M 0 390.9141133196595 C 5.688888888888889 397.96854982165934, 22.755555555555553 441.560038855492, 34.13333333333333 433.2407323316583 C 45.51111111111111 424.9214258078246, 56.888888888888886 373.8197482657371, 68.26666666666667 340.9982741766575 C 79.64444444444445 308.17680008757793, 91.02222222222223 238.2431288658441, 102.4 236.3118877971808 C 113.77777777777779 234.38064672851746, 125.15555555555555 299.9858867622361, 136.53333333333333 329.4108277646776 C 147.9111111111111 358.83576876711913, 159.2888888888889 411.89313827670577, 170.66666666666666 412.8615338118299 C 182.04444444444442 413.829929346954, 193.42222222222222 342.53123103549393, 204.8 335.22120097542233 C 216.1777777777778 327.91117091535074, 227.55555555555557 358.9583776446611, 238.93333333333334 369.0013534514004 C 250.3111111111111 379.0443292581397, 261.68888888888887 391.58247508613493, 273.06666666666666 395.4790558158584 C 284.44444444444446 399.3756365455818, 295.8222222222222 412.1321476038436, 307.2 392.380837829741 C 318.5777777777778 372.6295280556384, 329.9555555555555 296.5594761475578, 341.3333333333333 276.9711971712427 C 352.7111111111111 257.3829181949276, 364.08888888888885 257.1236445617395, 375.46666666666664 274.8511639718504 C 386.84444444444443 292.57868338196124, 398.22222222222223 358.7270890925565, 409.6 383.3363136319077 C 420.9777777777778 407.9455381712588, 432.35555555555555 424.9869363508053, 443.73333333333335 422.5065112079571 C 455.11111111111114 420.02608606510887, 466.4888888888889 386.5980749951216, 477.8666666666667 368.45376277481853 C 489.24444444444447 350.3094505545155, 500.6222222222222 317.2065242190719, 512 313.6406378861386 C 523.3777777777777 310.0747515532053, 534.7555555555556 349.4644178457963, 546.1333333333333 347.0584447772188 C 557.5111111111111 344.6524717086414, 568.8888888888889 307.1327473514449, 580.2666666666667 299.204799474674 C 591.6444444444444 291.27685159790315, 603.0222222222222 279.2307819253659, 614.4 299.49075751659376 C 625.7777777777777 319.75073310782165, 637.1555555555556 398.6076152185963, 648.5333333333333 420.76465302204144 C 659.911111111111 442.92169082548656, 671.2888888888889 444.54449859404787, 682.6666666666666 432.4329843372646 C 694.0444444444444 420.32147008048133, 705.4222222222222 373.4744825022205, 716.8 348.0955674813419 C 728.1777777777777 322.7166524604633, 739.5555555555554 286.3657214093156, 750.9333333333333 280.1594942119931 C 762.3111111111111 273.9532670146706, 773.6888888888889 296.64356854038846, 785.0666666666667 310.85820429740704 C 796.4444444444446 325.0728400544256, 807.8222222222223 361.9198871547681, 819.2 365.44730875410454 C 830.5777777777778 368.974730353441, 841.9555555555556 332.48036513009015, 853.3333333333334 332.0227338934256 C 864.7111111111111 331.56510265676104, 876.088888888889 354.7562209851711, 887.4666666666667 362.70152133411705 C 898.8444444444444 370.64682168306297, 910.2222222222223 390.90135229442154, 921.6 379.694535987101 C 932.9777777777778 368.48771967978047, 944.3555555555556 315.7773764402815, 955.7333333333333 295.46062349019377 C 967.1111111111111 275.14387054010604, 978.4888888888889 251.25609805360253, 989.8666666666667 257.79401828657444 C 1001.2444444444444 264.3319385195463, 1018.3111111111111 321.8724571211167, 1024 334.6881448880252 L 1024 512 L 0 512 Z"
    );
  }
  to {
    d: path(
      "M 0 348 C 5.688888888888889 348, 22.755555555555553 348, 34.13333333333333 348 C 45.51111111111111 348, 56.888888888888886 348, 68.26666666666667 348 C 79.64444444444445 348, 91.02222222222223 348, 102.4 348 C 113.77777777777779 348, 125.15555555555555 348, 136.53333333333333 348 C 147.9111111111111 348, 159.2888888888889 348, 170.66666666666666 348 C 182.04444444444442 348, 193.42222222222222 348, 204.8 348 C 216.1777777777778 348, 227.55555555555557 348, 238.93333333333334 348 C 250.3111111111111 348, 261.68888888888887 348, 273.06666666666666 348 C 284.44444444444446 348, 295.8222222222222 348, 307.2 348 C 318.5777777777778 348, 329.9555555555555 348, 341.3333333333333 348 C 352.7111111111111 348, 364.08888888888885 348, 375.46666666666664 348 C 386.84444444444443 348, 398.22222222222223 348, 409.6 348 C 420.9777777777778 348, 432.35555555555555 348, 443.73333333333335 348 C 455.11111111111114 348, 466.4888888888889 348, 477.8666666666667 348 C 489.24444444444447 348, 500.6222222222222 348, 512 348 C 523.3777777777777 348, 534.7555555555556 348, 546.1333333333333 348 C 557.5111111111111 348, 568.8888888888889 348, 580.2666666666667 348 C 591.6444444444444 348, 603.0222222222222 348, 614.4 348 C 625.7777777777777 348, 637.1555555555556 348, 648.5333333333333 348 C 659.911111111111 348, 671.2888888888889 348, 682.6666666666666 348 C 694.0444444444444 348, 705.4222222222222 348, 716.8 348 C 728.1777777777777 348, 739.5555555555554 348, 750.9333333333333 348 C 762.3111111111111 348, 773.6888888888889 348, 785.0666666666667 348 C 796.4444444444446 348, 807.8222222222223 348, 819.2 348 C 830.5777777777778 348, 841.9555555555556 348, 853.3333333333334 348 C 864.7111111111111 348, 876.088888888889 348, 887.4666666666667 348 C 898.8444444444444 348, 910.2222222222223 348, 921.6 348 C 932.9777777777778 348, 944.3555555555556 348, 955.7333333333333 348 C 967.1111111111111 348, 978.4888888888889 348, 989.8666666666667 348 C 1001.2444444444444 348, 1018.3111111111111 348, 1024 348 L 1024 512 L 0 512 Z"
    );
  }
}

/* Example usage with scroll timeline */
.scroll-wave-morph {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100% !important;
  height: 400px;
  transform: scaleX(-1.1);
}
.scroll-wave-morph path {
  animation: wave-morph 2s linear both;
  animation-timeline: view();
  animation-range: cover 25% cover 100%;
  fill: var(--wp--preset--color--page-background);
}
@keyframes wave-morph {
  from {
    d: path(
      "M 0 511 C 28.444444444444443 511, 113.77777777777777 511, 170.66666666666666 511 C 227.55555555555554 511, 284.4444444444444 511, 341.3333333333333 511 C 398.22222222222223 511, 455.1111111111111 511, 512 511 C 568.8888888888889 511, 625.7777777777777 511, 682.6666666666666 511 C 739.5555555555555 511, 796.4444444444445 511, 853.3333333333334 511 C 910.2222222222223 511, 995.5555555555555 511, 1024 511 L 1024 512 L 0 512 Z"
    );
  }
  to {
    d: path(
      "M 0 80.39985945948824 C 28.444444444444443 91.13615434208552, 113.77777777777777 138.22998178630164, 170.66666666666666 144.81762875507187 C 227.55555555555554 151.4052757238421, 284.4444444444444 141.70451691242855, 341.3333333333333 119.92574127210963 C 398.22222222222223 98.1469656317907, 455.1111111111111 31.771914402520405, 512 14.14497491315835 C 568.8888888888889 -3.481964576203705, 625.7777777777777 -2.0423971679276, 682.6666666666666 14.164104335937296 C 739.5555555555555 30.37060583980219, 796.4444444444445 92.21165934408532, 853.3333333333334 111.38398393634773 C 910.2222222222223 130.55630852861015, 995.5555555555555 126.22904056398443, 1024 129.19805188951176 L 1024 512 L 0 512 Z"
    );
  }
}

/* Example usage with scroll timeline */
.scroll-wave-morph-filter {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  max-width: 100% !important;
  height: 400px;
  transform: scaleX(1.5);
}
.scroll-wave-morph-filter path {
  animation: wave-morph-filter 2s linear both;
  animation-timeline: view();
  animation-range: cover 25% cover 100%;
  fill: var(--wp--preset--color--page-background);
}
@keyframes wave-morph-filter {
  from {
    d: path(
      "M 0 511 C 21.333333333333332 511, 85.33333333333334 511, 128 511 C 170.66666666666666 511, 213.33333333333334 511, 256 511 C 298.6666666666667 511, 341.3333333333333 511, 384 511 C 426.6666666666667 511, 469.3333333333333 511, 512 511 C 554.6666666666666 511, 597.3333333333334 511, 640 511 C 682.6666666666666 511, 725.3333333333334 511, 768 511 C 810.6666666666666 511, 853.3333333333334 511, 896 511 C 938.6666666666666 511, 1002.6666666666666 511, 1024 511 L 1024 512 L 0 512 Z"
    );
  }
  to {
    d: path(
      "M 0 -9.208242160068203 C 21.333333333333332 -7.323332912429183, 85.33333333333334 -10.468161425126796, 128 2.1012133257659187 C 170.66666666666666 14.670588076658634, 213.33333333333334 56.57526164236209, 256 66.2080063452881 C 298.6666666666667 75.8407510482141, 341.3333333333333 62.5933815442032, 384 59.897681543321966 C 426.6666666666667 57.201981542440734, 469.3333333333333 44.31255784705789, 512 50.0338063400007 C 554.6666666666666 55.755054832943514, 597.3333333333334 89.51875074975366, 640 94.22517250097883 C 682.6666666666666 98.931594252204, 725.3333333333334 96.09978585663465, 768 78.27233684735171 C 810.6666666666666 60.444887838068766, 853.3333333333334 2.629453713924571, 896 -12.739521554718834 C 938.6666666666666 -28.108496823362238, 1002.6666666666666 -13.741182562877077, 1024 -13.941514764508725 L 1024 512 L 0 512 Z"
    );
  }
}

/* Example usage with scroll timeline */
.scroll-wave-morph-alt-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100% !important;
  height: 500px;
}
.scroll-wave-morph-alt-2 path {
  animation: wave-morph-alt-2 2s linear both;
  animation-timeline: view();
  animation-range: cover 25% cover 100%;
  fill: var(--wp--preset--color--page-background);
}
@keyframes wave-morph-alt-2 {
  from {
    d: path(
      "M 0 511 C 28.444444444444443 511, 113.77777777777777 511, 170.66666666666666 511 C 227.55555555555554 511, 284.4444444444444 511, 341.3333333333333 511 C 398.22222222222223 511, 455.1111111111111 511, 512 511 C 568.8888888888889 511, 625.7777777777777 511, 682.6666666666666 511 C 739.5555555555555 511, 796.4444444444445 511, 853.3333333333334 511 C 910.2222222222223 511, 995.5555555555555 511, 1024 511 L 1024 512 L 0 512 Z"
    );
  }
  to {
    d: path(
      "M 0 118.20208928032388 C 28.444444444444443 130.26534195739947, 113.77777777777777 183.17975481606925, 170.66666666666666 190.58160534277738 C 227.55555555555554 197.9834558694855, 284.4444444444444 187.08372686789724, 341.3333333333333 162.61319244057262 C 398.22222222222223 138.142658013248, 455.1111111111111 63.56394876687687, 512 43.758398778829616 C 568.8888888888889 23.95284879078236, 625.7777777777777 25.570340260755504, 682.6666666666666 43.779892512289095 C 739.5555555555555 61.98944476382269, 796.4444444444445 131.47377454391608, 853.3333333333334 153.01571228803115 C 910.2222222222223 174.55765003214623, 995.5555555555555 169.69555119548812, 1024 173.0315189769795 L 1024 512 L 0 512 Z"
    );
  }
}

@keyframes scale-up-from-bottom-left {
  from {
    transform: scale(0);
    transform-origin: left bottom;
  }
  to {
    transform: scale(1);
    transform-origin: left bottom;
  }
}

@keyframes scale-up-from-top-right {
  from {
    transform: scale(0);
    transform-origin: right top;
  }
  to {
    transform: scale(1);
    transform-origin: right top;
  }
}

@keyframes light-vertical-motion {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(80px);
  }
}

@keyframes light-horizontal-motion {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(40px);
  }
}

@keyframes light-vertical-motion-reverse {
  from {
    transform: translateY(-80px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes light-horizontal-motion-reverse {
  from {
    transform: translateX(-40px);
  }
  to {
    transform: translateX(0);
  }
}