.iv-parallax {
  --iv-parallax: .2;
  display: block;
}

@supports (animation-timeline: view()) {
  .iv-parallax {
    animation-name: iv-parallax;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
  }
}

@supports not (animation-timeline: view()) {
  .iv-parallax {
    transform: translateY(calc((.5 - var(--iv-view, .5)) * var(--iv-parallax) * 60vh));
  }
}

@keyframes iv-parallax {
  from {
    transform: translateY(calc(var(--iv-parallax) * 30vh));
  }

  to {
    transform: translateY(calc(var(--iv-parallax) * -30vh));
  }
}

.iv-parallax-frame {
  --iv-parallax-ratio: 16 / 9;
  aspect-ratio: var(--iv-parallax-ratio);
  border-radius: var(--iv-radius-lg);
  display: block;
  position: relative;
  overflow: clip;
}

.iv-parallax--media {
  object-fit: cover;
  block-size: 130%;
  inline-size: 100%;
  position: absolute;
  inset-block-start: -15%;
  inset-inline: 0;
}

.iv-scroll-progress {
  --iv-scroll-progress-size: 3px;
  --iv-scroll-progress-color: var(--iv-color-primary);
  z-index: var(--iv-z-dropdown);
  block-size: var(--iv-scroll-progress-size);
  background-image: linear-gradient(90deg,
    var(--iv-scroll-progress-color),
    color-mix(in oklab, var(--iv-color-accent) 70%, var(--iv-scroll-progress-color)));
  transform: scaleX(var(--iv-scroll, 0));
  transform-origin: 0;
  box-shadow: 0 0 12px var(--iv-glow-primary);
  pointer-events: none;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
}

:where([dir="rtl"]) .iv-scroll-progress {
  transform-origin: 100%;
}

@supports (animation-timeline: scroll(root)) {
  .iv-scroll-progress {
    animation-name: iv-scroll-progress;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
  }
}

@keyframes iv-scroll-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.iv-marquee {
  --iv-marquee-duration: 30s;
  --iv-marquee-gap: var(--iv-space-6);
  display: flex;
  overflow: hidden;
}

.iv-marquee__track {
  gap: var(--iv-marquee-gap);
  inline-size: max-content;
  animation: iv-marquee var(--iv-marquee-duration) linear infinite;
  flex: none;
  align-items: center;
  padding-inline-end: var(--iv-marquee-gap);
  display: flex;
}

.iv-marquee__item {
  white-space: nowrap;
  flex: none;
}

@keyframes iv-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

:where([dir="rtl"]) .iv-marquee__track {
  animation-name: iv-marquee-rtl;
}

:where([dir="rtl"]) .iv-marquee--vertical .iv-marquee__track {
  animation-name: iv-marquee-v;
}

@keyframes iv-marquee-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }
}

@keyframes iv-marquee-v {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

.iv-marquee--reverse .iv-marquee__track {
  animation-direction: reverse;
}

.iv-marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
}

.iv-marquee--vertical {
  --iv-marquee-size: 14rem;
  block-size: var(--iv-marquee-size);
}

.iv-marquee--vertical .iv-marquee__track {
  block-size: max-content;
  inline-size: auto;
  flex-direction: column;
  align-items: stretch;
  padding-block-end: var(--iv-marquee-gap);
  padding-inline-end: 0;
  animation-name: iv-marquee-v;
}

.iv-marquee--vertical.iv-marquee--fade {
  -webkit-mask-image: linear-gradient(#0000, #000 8% 92%, #0000);
  mask-image: linear-gradient(#0000, #000 8% 92%, #0000);
}

@media (hover: hover) {
  :where(.iv-marquee:hover) .iv-marquee__track {
    animation-play-state: paused;
  }
}

:where(.iv-marquee:focus-within) .iv-marquee__track {
  animation-play-state: paused;
}

.iv-stack-cards {
  --iv-stack-top: var(--iv-space-8);
  --iv-stack-step: 1rem;
  --iv-stack-scale: .94;
  --iv-stack-fade: .55;
  gap: var(--iv-space-8);
  display: grid;
}

.iv-stack-cards__card {
  position: sticky;
  inset-block-start: calc(var(--iv-stack-top) + var(--iv-i, 0) * var(--iv-stack-step));
}

@supports (animation-timeline: view()) {
  .iv-stack-cards {
    view-timeline-name: --iv-stack;
    view-timeline-axis: block;
  }

  .iv-stack-cards__card {
    --iv-stack-relay: min(1, var(--iv-stack-count, 0));
    --iv-stack-span: calc((100% - 100vh) / max(1, var(--iv-stack-count, 0)));
    --iv-stack-start: calc(100vh + 200% * (1 - var(--iv-stack-relay)));
    animation-name: iv-stack-cards;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-range: calc(var(--iv-stack-start) + var(--iv-stack-span) * var(--iv-i, 0))
      calc(var(--iv-stack-start) + var(--iv-stack-span) * (var(--iv-i, 0) + 1));
    animation-timeline: --iv-stack;
  }
}

@keyframes iv-stack-cards {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    transform: scale(var(--iv-stack-scale));
    opacity: var(--iv-stack-fade);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iv-parallax {
    animation: none;
    transform: none;
  }

  .iv-marquee {
    overflow-x: auto;
  }

  .iv-marquee__track {
    animation: none;
  }

  .iv-marquee--vertical {
    overflow: hidden auto;
  }

  .iv-stack-cards__card {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .iv-scroll-progress {
    box-shadow: none;
    forced-color-adjust: none;
    background-color: highlight;
    background-image: none;
  }

  .iv-marquee--fade {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .iv-scroll-reveal {
      animation: linear both iv-scroll-reveal;
      animation-timeline: view();
      animation-range: entry entry 70%;
    }
  }
}

@keyframes iv-scroll-reveal {
  from {
    opacity: 0;
    translate: 0 var(--iv-reveal-distance, 1.5rem);
    scale: .97;
  }
}

@media print {
  .iv-scroll-progress {
    display: none;
  }

  .iv-parallax, .iv-parallax__layer, .iv-scroll-reveal, .iv-stack-cards > * {
    animation: none;
    position: static;
    transform: none;
  }

  .iv-marquee__track {
    animation: none;
  }
}