/* Discrete, editable opening for TikTok Creator Success. */
.portfolio__tiktok-story {
  --tiktok-story-viewport: 100svh;
  position: relative;
  background: var(--background-canvas-inverse);
  color: var(--content-primaryInverse);
  font-family: var(--pf-font);
}

@supports (height: 100dvh) {
  .portfolio__tiktok-story {
    --tiktok-story-viewport: 100dvh;
  }
}

.portfolio__tiktok-story.is-enhanced {
  --tiktok-story-exit-buffer: var(--space-48);
  block-size: calc(var(--tiktok-story-viewport) + var(--tiktok-story-exit-buffer));
  min-block-size: calc(var(--tiktok-story-viewport) + var(--tiktok-story-exit-buffer));
}

.portfolio__tiktok-story-stage {
  background: var(--background-canvas-inverse);
}

.portfolio__tiktok-story.is-enhanced .portfolio__tiktok-story-stage {
  position: sticky;
  inset-block-start: 0;
  block-size: var(--tiktok-story-viewport);
  min-block-size: var(--tiktok-story-viewport);
  overflow: hidden;
}

.portfolio__tiktok-story.is-enhanced .portfolio__module--editable-text {
  position: absolute;
  inset: 0;
  z-index: 0;
  block-size: 100%;
  min-block-size: 100%;
  aspect-ratio: auto;
  background: var(--background-canvas-inverse);
  color: var(--content-primaryInverse);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio__tiktok-story.is-enhanced [data-tiktok-story-stage].is-story-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.portfolio__tiktok-story.is-enhanced [data-tiktok-story-stage] :is(
  .portfolio__case-statement-eyebrow,
  .portfolio__case-statement-label,
  .portfolio__case-statement-body,
  .portfolio__case-statement-points
) {
  opacity: 0;
  filter: blur(var(--space-4));
  will-change: filter, opacity;
  transition:
    filter var(--duration-normal) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--duration-fast) cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio__tiktok-story.is-enhanced [data-tiktok-story-stage].is-story-active :is(
  .portfolio__case-statement-eyebrow,
  .portfolio__case-statement-label,
  .portfolio__case-statement-body,
  .portfolio__case-statement-points
) {
  opacity: 1;
  filter: blur(0);
}

.portfolio__tiktok-story.is-enhanced
  [data-tiktok-story-stage].is-story-active
  .portfolio__case-statement-label {
  transition-delay: var(--stagger-xs);
}

.portfolio__tiktok-story.is-enhanced
  [data-tiktok-story-stage].is-story-active
  :is(.portfolio__case-statement-body, .portfolio__case-statement-points) {
  transition-delay: var(--stagger-sm);
}

/* If JavaScript is unavailable, the copy remains readable in document order. */
.portfolio__tiktok-story:not(.is-enhanced) .portfolio__tiktok-story-stage {
  position: static;
  block-size: auto;
  overflow: visible;
}

.portfolio__tiktok-story:not(.is-enhanced) .portfolio__module--editable-text {
  position: static;
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: 16 / 9;
}

@media (max-width: 540px) {
  .portfolio__tiktok-story .portfolio__module--editable-text {
    padding: var(--space-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__tiktok-story,
  .portfolio__tiktok-story.is-enhanced {
    block-size: auto;
    min-block-size: 0;
  }

  .portfolio__tiktok-story-stage,
  .portfolio__tiktok-story.is-enhanced .portfolio__tiktok-story-stage {
    position: static;
    block-size: auto;
    min-block-size: 0;
    overflow: visible;
  }

  .portfolio__tiktok-story .portfolio__module--editable-text,
  .portfolio__tiktok-story.is-enhanced .portfolio__module--editable-text {
    position: static;
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: 16 / 9;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .portfolio__tiktok-story [data-tiktok-story-stage] :is(
    .portfolio__case-statement-eyebrow,
    .portfolio__case-statement-label,
    .portfolio__case-statement-body,
    .portfolio__case-statement-points
  ) {
    opacity: 1;
    filter: none;
    transition: none;
  }
}