:root {
  --wt-screen-padding: clamp(60px, 7.5svh, 84px);
  --wt-heading-gap: clamp(44px, 6svh, 64px);
  --wt-reveal-ease: cubic-bezier(.19, 1, .22, 1);
}

/*
 * Screen rhythm inspired by the supplied Huntio reference.
 * This layer intentionally leaves WaveTrack copy, assets, color, typography,
 * DOM order and editor-owned geometry untouched.
 */
@media (min-width: 821px) {
  .wtv8-section {
    min-height: min(100svh, 900px);
    padding-block: var(--wt-screen-padding);
    scroll-margin-top: 0;
  }

  .wtv8-heading,
  .wtv8-origin-title,
  .wtv8-problems-head h2,
  .wtv8-cap-title,
  .wtv8-ai-heading,
  .wtv8-pricing .wtv8-heading {
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }

  .wtv8-product-stage,
  .wtv8-origin-body,
  .wtv8-problem-grid,
  .wtv8-process-carousel,
  .wtv8-role-stage {
    margin-top: var(--wt-heading-gap);
  }

  .wtv8-cap-layout {
    row-gap: var(--wt-heading-gap);
  }

  .wtv8-ai-copy {
    margin-top: var(--wt-heading-gap);
  }

  .wtv8-ai-infographic {
    margin-top: clamp(34px, 4.5svh, 54px);
  }

  .wtv8-plan-grid {
    margin-top: clamp(38px, 5svh, 52px);
  }

  .wtv8-demo-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .wtv8-demo-card p {
    margin-inline: auto;
  }

  .wtv8-product-image img {
    max-height: min(620px, calc(100svh - 360px));
  }

  .wtv8-origin,
  .wtv8-problems-section {
    min-height: min(100svh, 900px);
  }
}

@media (min-width: 821px) and (max-height: 775px) {
  :root {
    --wt-screen-padding: 34px;
    --wt-heading-gap: 34px;
  }

  .wtv8-section {
    min-height: 100svh;
  }

  .wtv8-product-image img {
    max-height: calc(100svh - 270px);
  }

  .wtv8-ai-infographic {
    margin-top: 20px;
  }
}

@media (max-width: 820px) {
  :root {
    --wt-heading-gap: clamp(38px, 8vw, 52px);
  }

  .wtv8-section {
    min-height: 0;
    scroll-margin-top: 0;
  }

  .wtv8-heading,
  .wtv8-origin-title,
  .wtv8-problems-head h2,
  .wtv8-cap-title,
  .wtv8-ai-heading,
  .wtv8-pricing .wtv8-heading {
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }

  .wtv8-product-stage,
  .wtv8-origin-body,
  .wtv8-problem-grid,
  .wtv8-process-carousel,
  .wtv8-role-stage {
    margin-top: var(--wt-heading-gap);
  }

  .wtv8-cap-layout {
    row-gap: var(--wt-heading-gap);
  }

  .wtv8-ai-copy {
    margin-top: var(--wt-heading-gap);
  }

  .wtv8-demo-card {
    justify-items: center;
    text-align: center;
  }

  .wtv8-demo-card h2,
  .wtv8-demo-card p {
    margin-inline: auto;
  }
}

/* Progressive enhancement: content is fully visible until JS opts in. */
.wtv8-reveal {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0);
  filter: blur(0);
}

.wtv8-motion-ready .wtv8-reveal:not(.is-visible) {
  opacity: 0;
  clip-path: inset(0 0 12% 0 round 18px);
  filter: blur(2px);
}

.wtv8-motion-ready .wtv8-reveal {
  transition:
    opacity var(--wt-reveal-duration, 760ms) var(--wt-reveal-ease) var(--wt-reveal-delay, 0ms),
    clip-path var(--wt-reveal-duration, 760ms) var(--wt-reveal-ease) var(--wt-reveal-delay, 0ms),
    filter var(--wt-reveal-duration, 760ms) var(--wt-reveal-ease) var(--wt-reveal-delay, 0ms);
}

.wtv8-motion-ready .wtv8-reveal--heading {
  --wt-reveal-duration: 920ms;
}

.wtv8-motion-ready .wtv8-reveal--content {
  --wt-reveal-duration: 780ms;
}

.wtv8-motion-ready .wtv8-reveal--item {
  --wt-reveal-duration: 620ms;
}

.wtv8-motion-ready .wtv8-reveal.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0);
  filter: blur(0);
  will-change: auto;
}

body.wt-copy-editing .wtv8-reveal,
body.wt-copy-editing .wtv8-motion-ready .wtv8-reveal {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0 round 0) !important;
  filter: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wtv8-reveal,
  .wtv8-motion-ready .wtv8-reveal,
  .wtv8-motion-ready .wtv8-reveal:not(.is-visible) {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0 round 0) !important;
    filter: none !important;
    transition: none !important;
  }
}
