html:has(.worship-scroll),
body:has(.worship-scroll) {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.worship-scroll {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.worship-scroll__panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.worship-scroll__panel .liquify-hero {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.worship-scroll__parallax {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  --parallax-stage-max-h: min(68dvh, calc(100dvh - var(--site-header-height) * 2));
  --parallax-stage-w: min(78vw, 600px, calc(var(--parallax-stage-max-h) * 1608 / 2528));
}

.worship-scroll__parallax-stickers {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: var(--parallax-stage-w);
  max-height: var(--parallax-stage-max-h);
  aspect-ratio: 1608 / 2528;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.worship-scroll__stickers {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

.worship-sticker {
  position: absolute;
  left: var(--sticker-x);
  top: var(--sticker-y);
  width: min(76vw, 420px);
  transform: translate(-50%, -50%) rotate(var(--sticker-rotate, 0deg)) scale(var(--sticker-scale, 1));
  transform-origin: center center;
}

.worship-sticker__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.worship-sticker .stroke-text,
.worship-sticker .stroke-text__line {
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: 'Rubik', system-ui, sans-serif;
  font-weight: 900;
  font-size: 52px;
}

.worship-sticker .stroke-text__layer--stroke .stroke-text__line {
  fill: none;
  stroke: var(--stroke-color, #e91e8c);
  stroke-width: var(--stroke-width, 16px);
}

.worship-sticker .stroke-text__layer--fill .stroke-text__line {
  fill: var(--fill-color, #fff);
  stroke: none;
  stroke-width: 0;
}

.worship-sticker .stroke-text__rotator {
  transform-box: fill-box;
  transform-origin: center center;
}

.worship-scroll__parallax-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 0;
  max-width: none;
  width: var(--parallax-stage-w);
  max-height: var(--parallax-stage-max-h);
  transform: translate(-50%, -50%);
}

@media (min-width: 521px) {
  .worship-scroll__parallax {
    --parallax-stage-max-h: 100dvh;
    --parallax-stage-w: calc(var(--parallax-stage-max-h) * 1608 / 2528);
  }

  .worship-scroll__parallax-stickers,
  .worship-scroll__parallax-stage {
    height: var(--parallax-stage-max-h);
  }
}