/* Themes can lay out app blocks in a row; ours take the full width. */
.shopify-app-block:has(.manta-tg-wrap) {
  width: 100%;
}

/* Spacing comes from block settings on containers, not theme defaults on text tags. */
.manta-tg-wrap :is(h1, h2, h3, h4, p) {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}

.manta-tg-spacer-top {
  height: var(--manta-tg-padding-top);
}

.manta-tg-spacer-bottom {
  height: var(--manta-tg-padding-bottom);
}

.manta-tg-container {
  position: relative;
  overflow: clip;
  container-type: inline-size;
  container-name: manta-tg-container;
}

.manta-tg-container.manta-tg-sticky {
  display: flow-root;
}

.manta-tg-gradient-text {
  align-items: var(--manta-tg-align-items);
  overflow: visible;
  text-align: var(--manta-tg-text-align);
  font-size: var(--manta-tg-font-size);
  line-height: var(--manta-tg-line-height);
  letter-spacing: var(--manta-tg-letter-spacing);
  background-image: var(--manta-tg-gradient);
  color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  contain: layout paint;
  max-width: var(--manta-tg-max-width);
  justify-self: var(--manta-tg-align-items);
}

@container manta-tg-container (min-width: 768px) {
  .manta-tg-gradient-text {
    font-size: var(--manta-tg-font-size-desktop);
  }
}

@supports (animation-timeline: view()) {
  .manta-tg-container.manta-tg-sticky {
    height: var(--manta-tg-effect-length);
    view-timeline-name: --manta-tg-scroll;
    view-timeline-axis: block;
    view-timeline-inset: calc(50svh - (var(--manta-tg-el-height) / 2));
    will-change: background-position;
  }

  .manta-tg-gradient-text.manta-tg-sticky {
    margin-bottom: calc(var(--manta-tg-el-height) * -2);
    transform: translateY(-100%);
    position: sticky;
    top: calc(50svh + (var(--manta-tg-el-height) / 2));
    animation: manta-tg-gradient-scroll-sticky linear both;
    animation-timeline: --manta-tg-scroll;
    animation-range: cover 0% cover 100%;
    background-size: 100% calc(var(--manta-tg-height) * 1%);
  }

  .manta-tg-gradient-text.manta-tg-reveal {
    animation: manta-tg-gradient-scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    background-size: 100vw 100svh;
    background-position: 50% 100svh;
    will-change: background-position;
  }

  @keyframes manta-tg-gradient-scroll-reveal {
    from {
      background-position: 50% -100svh;
    }

    to {
      background-position: 50% var(--manta-tg-el-height);
    }
  }
}

/* Without scroll-driven animations: a still gradient, as it looks halfway through the scroll animation
   (the midpoint of manta-tg-gradient-scroll-sticky is background-position-y: 50%). */
@supports not (animation-timeline: view()) {
  .manta-tg-gradient-text {
    background-size: 100% calc(var(--manta-tg-height) * 1%);
    background-position: 50% 50%;
  }
}

@keyframes manta-tg-gradient-scroll-sticky {
  from {
    background-position-y: calc(-10000% / (var(--manta-tg-height) - 100));
  }
  to {
    background-position-y: calc((100% * var(--manta-tg-height)) / (var(--manta-tg-height) - 100));
  }
}

@media (prefers-reduced-motion: reduce), print {
  .manta-tg-gradient-text {
    animation: none !important;
    background-size: 100% calc(var(--manta-tg-height) * 1%) !important;
    background-position: 50% 50% !important;
  }
}