/**
 * Skiper44-style overlap: light promise + dark launch countdown.
 * Inspired by https://skiper-ui.com/v1/skiper44 and https://vercel.com
 */

/**
 * Mobile / touch: document-flow stack before JS (html.kc-overlap-simple from index head).
 * Avoids hidden panels + empty scroll track on iOS Safari.
 */
html.kc-overlap-simple .page-theme-preview .preview-overlap .preview-overlap__pin {
  position: relative;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

html.kc-overlap-simple .page-theme-preview .preview-overlap .preview-overlap__hero.preview-hero {
  position: relative;
  inset: auto;
  min-height: min(88vh, 820px);
  height: auto;
  overflow: visible;
}

html.kc-overlap-simple .page-theme-preview .preview-overlap .preview-overlap__hero .preview-hero__photo {
  min-height: min(42vh, 360px);
  height: auto;
}

html.kc-overlap-simple .page-theme-preview .preview-overlap .preview-overlap__panel--light,
html.kc-overlap-simple .page-theme-preview .preview-overlap .preview-overlap__panel--dark {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  opacity: 1;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: visible;
  pointer-events: auto;
  transform: none;
}

html.kc-overlap-simple
  .page-theme-preview
  .preview-overlap
  [data-promise-stack]
  .preview-promise__line {
  opacity: 1;
  transform: none;
}

.page-theme-preview .preview-overlap {
  position: relative;
  isolation: isolate;
}

.page-theme-preview .preview-overlap__track {
  position: relative;
}

/* Boot-safe fallback: keep hero visible until JS marks static or scrub-ready. */
.page-theme-preview .preview-overlap.preview-overlap--booting .preview-overlap__pin {
  position: relative;
  min-height: min(100vh, 920px);
  height: min(100vh, 920px);
  overflow: hidden;
}

.page-theme-preview .preview-overlap.preview-overlap--booting .preview-overlap__hero.preview-hero {
  position: relative;
  inset: auto;
  min-height: min(100vh, 920px);
}

.page-theme-preview .preview-overlap.preview-overlap--booting .preview-overlap__panel--light,
.page-theme-preview .preview-overlap.preview-overlap--booting .preview-overlap__panel--dark {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Scroll room for scrub (set --overlap-scroll-vh from JS; fallback matches default units) */
.page-theme-preview .preview-overlap--animated .preview-overlap__track {
  min-height: calc(100vh + var(--overlap-scroll-vh, 146) * 1vh);
}

.page-theme-preview .preview-overlap--animated .preview-overlap__pin {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Before GSAP pins: avoid hero + cream + countdown stacking ~300vh in flow */
.page-theme-preview
  .preview-overlap:not(.preview-overlap--animated):not(.preview-overlap--static)
  .preview-overlap__pin {
  position: relative;
  min-height: min(100vh, 920px);
  height: min(100vh, 920px);
  overflow: hidden;
}

.page-theme-preview
  .preview-overlap:not(.preview-overlap--animated):not(.preview-overlap--static)
  .preview-overlap__panel--light,
.page-theme-preview
  .preview-overlap:not(.preview-overlap--animated):not(.preview-overlap--static)
  .preview-overlap__panel--dark {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* After scrub finishes: class for RSVP stacking only */
.page-theme-preview .preview-overlap--released .preview-overlap__pin {
  pointer-events: none;
}

.page-theme-preview .preview-overlap__pin {
  position: relative;
  width: 100%;
}

/* Hero stage — base layer under cream + countdown sheets */
.page-theme-preview .preview-overlap__hero.preview-hero {
  position: relative;
  z-index: 0;
  width: 100%;
}

.page-theme-preview .preview-overlap--animated .preview-overlap__hero.preview-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.page-theme-preview .preview-overlap--animated .preview-overlap__hero .preview-hero__photo {
  min-height: 0;
  height: 100%;
}

/* Light band — promise (cream / white-smoke from .preview-promise) */
.page-theme-preview .preview-overlap__panel--light {
  position: relative;
  z-index: 1;
  min-height: min(100vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-theme-preview .preview-overlap__panel--light.preview-promise {
  border-block: 4px solid var(--dark-garnet);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
}

/* Animated: single viewport stage; sticky pin, sheets rise over hero */
.page-theme-preview .preview-overlap--animated .preview-overlap__pin {
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: clip;
}

.page-theme-preview .preview-overlap--animated .preview-overlap__panel--light {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 100%;
  z-index: 2;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(2.5rem, 8vh, 4rem);
  overflow: hidden;
  will-change: transform;
}

/* Off-screen before GSAP sets yPercent; removed once JS adds --scrub-ready */
.page-theme-preview
  .preview-overlap--animated:not(.preview-overlap--scrub-ready)
  .preview-overlap__panel--light {
  transform: translate3d(0, 100%, 0);
}

/* Dark band — countdown slides up over light (absolute within pin) */
.page-theme-preview .preview-overlap__panel--dark.launch-countdown {
  position: relative;
  z-index: 2;
  margin-top: -3rem;
  min-height: min(100vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--dark-garnet);
  color: var(--white-smoke);
  padding: clamp(2rem, 5vh, 3rem) var(--page-gutter)
    clamp(2.25rem, 5vh, 3.25rem);
  border-top: 3px solid var(--mahogany-red);
  box-shadow: 0 -28px 56px rgba(11, 9, 10, 0.28);
  will-change: transform;
}

.page-theme-preview .preview-overlap--animated .preview-overlap__panel--dark.launch-countdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  margin-top: 0;
  min-height: 100%;
  height: 100%;
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 -32px 64px rgba(11, 9, 10, 0.32),
    0 -1px 0 var(--mahogany-red);
}

.page-theme-preview
  .preview-overlap--animated:not(.preview-overlap--scrub-ready)
  .preview-overlap__panel--dark.launch-countdown {
  transform: translate3d(0, 100%, 0);
}

/* Static / reduced-motion — full list + countdown in document flow */
.page-theme-preview .preview-overlap--static .preview-overlap__pin {
  display: flex;
  flex-direction: column;
  overflow: visible;
  height: auto;
  min-height: 0;
}

.page-theme-preview .preview-overlap--static .preview-overlap__hero.preview-hero {
  position: relative;
  inset: auto;
  height: auto;
  min-height: min(92vh, 780px);
  overflow: visible;
}

@media (max-width: 47.99rem) {
  .page-theme-preview .preview-overlap--static .preview-overlap__hero.preview-hero {
    min-height: 0;
  }

  .page-theme-preview .preview-overlap--static .preview-hero__photo {
    min-height: min(42vh, 360px);
  }

  .page-theme-preview .preview-overlap--static .preview-overlap__track {
    min-height: 0;
  }
}

.page-theme-preview .preview-overlap--static .preview-overlap__panel--light {
  position: relative;
  top: auto;
  min-height: 0;
  transform: none !important;
}

.page-theme-preview .preview-overlap--static .preview-overlap__panel--dark.launch-countdown {
  position: relative;
  inset: auto;
  margin-top: 0;
  transform: none !important;
  min-height: 0;
  height: auto;
  width: 100%;
  box-shadow: none;
}

@media (max-width: 47.99rem) {
  .page-theme-preview .preview-overlap--animated .preview-overlap__panel--dark.launch-countdown {
    border-radius: 1.25rem 1.25rem 0 0;
  }
}

/* Sections after overlap sit above any pin layer (RSVP / community) */
.page-theme-preview .preview-overlap ~ * {
  position: relative;
  z-index: 1;
}