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

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

/* --- Stacked text (manta-st) --- */

.manta-st-stack {
  width: 100%;
  padding-top: var(--manta-st-padding-top, 0);
  padding-bottom: var(--manta-st-padding-bottom, 0);
}

.manta-st-stack.manta-st-override-bg {
  background-color: var(--manta-st-bg) !important;
}

.manta-st-cq {
  container-type: inline-size;
  width: 100%;
}

.manta-st-text-stack {
  --manta-st-element-height: calc(var(--manta-st-anim-len-svh, 50) * 1svh);
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
}

.manta-st-line {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  margin: 0;
  height: var(--manta-st-text-height);
  font-size: var(--manta-st-text-height);
  width: 100%;
  white-space: nowrap;
  -webkit-text-size-adjust: 100%;
  text-align: var(--manta-st-text-align, center);
  line-height: 1;
  align-content: center;
}

.manta-st-stack.manta-st-override-font .manta-st-line {
  font-family: var(--manta-st-font-family) !important;
  font-weight: var(--manta-st-font-weight) !important;
  font-style: var(--manta-st-font-style) !important;
  font-variant: var(--manta-st-font-variant) !important;
}

.manta-st-stack.manta-st-font-auto .manta-st-text-stack {
  --manta-st-text-height: var(--manta-st-text-height-auto);
}

.manta-st-stack.manta-st-font-fixed .manta-st-text-stack {
  --manta-st-text-height: var(--manta-st-text-height-fixed-mobile);
}

@container (min-width: 768px) {
  .manta-st-stack.manta-st-font-fixed .manta-st-text-stack {
    --manta-st-text-height: var(--manta-st-text-height-fixed-desktop);
  }

  .manta-st-stack .manta-st-line {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: none;
    font-smooth: never;
  }
}

@keyframes manta-st-stack-move {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, calc(var(--manta-st-step) * var(--manta-st-copy-index, 0)), 0);
  }
}

/* Lines sit at the top like the other types (each line's view timeline starts from where it sits), start
   spread over the full height and merge at the bottom. */
@keyframes manta-st-stack-reverse {
  0% {
    transform: translate3d(
      0,
      calc(var(--manta-st-element-height) - var(--manta-st-step) * var(--manta-st-copy-index, 0)),
      0
    );
  }

  100% {
    transform: translate3d(0, var(--manta-st-element-height), 0);
  }
}

@keyframes manta-st-stack-split {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, calc(var(--manta-st-step) * var(--manta-st-copy-index, 0)), 0);
  }

  100% {
    transform: translate3d(0, calc(var(--manta-st-step) * var(--manta-st-last-index, 0)), 0);
  }
}

@supports (animation-timeline: view()) {
  .manta-st-stack .manta-st-text-stack {
    contain: layout;
    animation-timeline: view(
      block calc(100svh - var(--manta-st-margin-svh, 0) * 1svh - var(--manta-st-span-svh, 0) * 1svh)
        calc(var(--manta-st-margin-at, 0) * 1%)
    );
    animation-range: entry 0% exit 0%;
    height: calc(var(--manta-st-element-height) + var(--manta-st-text-height));
    --manta-st-animation-height: calc(var(--manta-st-element-height) - var(--manta-st-text-height));
    --manta-st-step: calc(var(--manta-st-element-height) / var(--manta-st-merge-count, 1));
  }

  .manta-st-stack .manta-st-line {
    position: absolute;
    opacity: var(--manta-st-text-opacity, 0.85);
    pointer-events: none;
  }

  .manta-st-stack.manta-st-anim-expand .manta-st-line {
    animation: manta-st-stack-move linear;
    animation-timeline: inherit;
    animation-range: inherit;
    animation-fill-mode: both;
  }

  .manta-st-stack.manta-st-anim-reverse .manta-st-line {
    animation: manta-st-stack-reverse linear;
    animation-timeline: inherit;
    animation-range: inherit;
    animation-fill-mode: both;
  }

  .manta-st-stack.manta-st-anim-harmonic .manta-st-line {
    animation: manta-st-stack-split linear;
    animation-timeline: inherit;
    animation-range: inherit;
    animation-fill-mode: both;
  }

  .manta-st-stack.manta-st-override-text .manta-st-line {
    color: var(--manta-st-text-color) !important;
  }
}

@supports not (animation-timeline: view()) {
  .manta-st-stack .manta-st-text-stack {
    height: var(--manta-st-text-height);
    animation: none !important;
  }

  .manta-st-stack .manta-st-text-stack > *:not(:first-child) {
    display: none !important;
  }

  .manta-st-stack .manta-st-line:nth-child(1) {
    opacity: 1;
  }
}

/* Static, single line: also for printing. */
@media (prefers-reduced-motion: reduce), print {
  /* Only one line shows, so drop the height the animation needs. */
  .manta-st-stack .manta-st-text-stack {
    height: var(--manta-st-text-height) !important;
    animation: none !important;
  }

  .manta-st-stack .manta-st-text-stack > * {
    height: var(--manta-st-text-height);
    animation: none !important;
  }

  .manta-st-stack .manta-st-text-stack > *:not(:first-child) {
    display: none !important;
  }

  .manta-st-stack .manta-st-line:nth-child(1) {
    opacity: 1;
  }
}