[data-effects='calm'] .parallax-slow,
[data-effects='calm'] .parallax-fast,
[data-effects='calm'] .scroll-zoom-img > img,
[data-effects='calm'] .pin-scene .pin-layer,
[data-effects='calm'] .hscroll-track {
  animation: none !important;
}
[data-effects='calm'] .scroll-progress { display: none; }

[data-effects='lively'] .pin-scene .pin-layer,
[data-effects='lively'] .hscroll-track {
  animation: none !important;
}

html[data-fx-parallax='off'] .parallax-slow,
html[data-fx-parallax='off'] .parallax-fast,
html[data-fx-parallax='off'] .scroll-zoom-img > img {
  animation: none !important;
}
html[data-fx-progress='off'] .scroll-progress { display: none; }

html[data-fx-story='off'] .pin-scene { height: auto; }
html[data-fx-story='off'] .pin-stage { position: static; height: auto; }
html[data-fx-story='off'] .pin-layer { opacity: 1 !important; animation: none !important; grid-area: auto; transform: none !important; }
html[data-fx-story='off'] .hscroll { height: auto; }
html[data-fx-story='off'] .hscroll-stage { position: static; height: auto; }
html[data-fx-story='off'] .hscroll-track { animation: none !important; width: auto; flex-wrap: wrap; }

@supports (animation-timeline: view()) {
  .pin-scene {
    --pin-steps: 3;
    height: calc(var(--pin-steps) * 100svh);
    view-timeline: --pin-tl block;
  }
  .pin-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    overflow: clip;
  }
  .pin-layer {
    grid-area: 1 / 1;
    display: grid;
    place-content: center;
    text-align: center;
    padding: var(--gutter);
    opacity: 0;
    animation: kw-pin-layer linear both;
    animation-timeline: --pin-tl;
  }
  .pin-layer:nth-child(1) { animation-range: contain 0% contain 38%; opacity: 1; animation-name: kw-pin-out; }
  .pin-layer:nth-child(2) { animation-range: contain 28% contain 72%; }
  .pin-layer:nth-child(3) { animation-range: contain 62% contain 100%; animation-name: kw-pin-in; }
  @keyframes kw-pin-layer {
    0% { opacity: 0; transform: translateY(var(--anim-distance)) scale(0.99); }
    25%, 75% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)) scale(0.99); }
  }
  @keyframes kw-pin-out {
    0%, 60% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)); }
  }
  @keyframes kw-pin-in {
    0% { opacity: 0; transform: translateY(var(--anim-distance)); }
    40%, 100% { opacity: 1; transform: none; }
  }
  .hscroll {
    --hscroll-panels: 3;
    height: calc(var(--hscroll-panels) * 90svh);
    view-timeline: --hscroll-tl block;
  }
  .hscroll-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
    display: grid;
    align-content: center;
  }
  .hscroll-track {
    display: flex;
    gap: var(--space-l);
    width: max-content;
    padding-inline: var(--gutter);
    animation: kw-hscroll linear both;
    animation-timeline: --hscroll-tl;
    animation-range: contain 0% contain 100%;
  }
  .hscroll-panel {
    width: min(78vw, 42rem);
    flex-shrink: 0;
  }
  @keyframes kw-hscroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% + 100vw - var(--gutter) * 2)); }
  }
  .scroll-ink {
    background: linear-gradient(to right, var(--color-text-1) 50%, var(--color-text-3) 50%);
    background-size: 200% 100%;
    background-position-x: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: kw-ink linear both;
    animation-timeline: view(block);
    animation-range: entry 40% cover 60%;
  }
  @keyframes kw-ink { to { background-position-x: 0%; } }
  @property --count-n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
  }
  .scroll-count {
    counter-reset: kwcount calc(var(--count-n));
    animation: kw-count var(--dur-5) var(--ease-out) both;
    animation-timeline: view(block);
    animation-range: entry 20% entry 80%;
    font-variant-numeric: tabular-nums;
  }
  .scroll-count::after { content: counter(kwcount); }
  @keyframes kw-count { to { --count-n: var(--count-to, 100); } }
}

@supports not (animation-timeline: view()) {
  .scroll-count::after { content: counter(kwcount); }
  .scroll-count { counter-reset: kwcount calc(var(--count-to, 100)); }
  .pin-scene { height: auto; }
  .pin-stage { position: static; height: auto; }
  .pin-layer { opacity: 1; grid-area: auto; }
  .hscroll { height: auto; }
  .hscroll-stage { position: static; height: auto; }
  .hscroll-track { width: auto; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .pin-scene { height: auto; }
  .pin-stage { position: static; height: auto; }
  .pin-layer { opacity: 1 !important; animation: none !important; grid-area: auto; transform: none !important; }
  .hscroll { height: auto; }
  .hscroll-stage { position: static; height: auto; }
  .hscroll-track { animation: none !important; width: auto; flex-wrap: wrap; }
  .scroll-ink { animation: none; background-position-x: 0%; }
}