/* =============================================================================
   PAGONI — SLIDE OVERLAYS
   Pricing, the questions and contact rise over the landing page as a slide in
   Pagoni's own signature dark theme, Nocturne (js/core/slide-overlay.js):
   forest velvet with its fine grain, a short gold rule over a light Cormorant
   heading whose closing phrase is gold italic, sage body text, hairline
   ivory rules, and the deck footer. 16:9 like any slide; what does not fit
   scrolls inside it.
   ============================================================================= */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond/cormorant-garamond-light.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond/cormorant-garamond-light-italic.woff2') format('woff2');
}

.overlay {
  --pad: clamp(0.75rem, 3vmin, 2.5rem);
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--pad);
  pointer-events: none;
}
.overlay.is-open { pointer-events: auto; }

/* Hidden from pointer, screen reader and tab order until open: visibility is
   what takes it out of the tab order. The delay keeps it visible for its exit. */
.overlay:not(.is-open) { visibility: hidden; transition: visibility 0s linear var(--raw-duration-slow); }

.overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgb(2 9 8 / 0.78);
  opacity: 0;
  transition: opacity var(--raw-duration-slow) var(--raw-ease-entrance);
}
.overlay.is-open .overlay__scrim { opacity: 1; }

/* --- the slide --------------------------------------------------------------- */
.overlay__slide {
  position: relative;
  /* As large as the screen allows at 16:9. */
  width: min(88rem, 100vw - 2 * var(--pad), (100dvh - 2 * var(--pad)) * 16 / 9);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  container-type: inline-size;
  color: var(--slide-ink);
  background: var(--slide-ground) image-set(
    url('../assets/manifesto-slide/surface.avif') type('image/avif'),
    url('../assets/manifesto-slide/surface.webp') type('image/webp')
  ) center / cover no-repeat;
  box-shadow: 0 2.5rem 6rem -1.5rem rgb(1 6 5 / 0.9), 0 0 0 1px rgb(238 243 232 / 0.06);
  opacity: 0;
  transform: translate3d(0, 5vh, 0) scale(0.96);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity var(--raw-duration-slow) var(--raw-ease-entrance);
}
.overlay.is-open .overlay__slide { opacity: 1; transform: none; }
.overlay__slide:focus-visible { outline: none; }

/* Slide units: 1920 of them across, like the engine's own canvas. */
.overlay__slide { --u: calc(100cqw / 1920); }

.overlay__close {
  position: absolute;
  z-index: 2;
  top: calc(48 * var(--u));
  right: calc(56 * var(--u));
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--slide-line);
  color: var(--slide-muted);
  transition: color var(--raw-duration-fast) var(--raw-ease-entrance),
              border-color var(--raw-duration-fast) var(--raw-ease-entrance);
}
.overlay__close:hover { color: var(--slide-gold); border-color: var(--slide-gold); }
.overlay__closeMark { position: relative; width: 0.875rem; height: 0.875rem; }
.overlay__closeMark::before,
.overlay__closeMark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
}
.overlay__closeMark::before { transform: rotate(45deg); }
.overlay__closeMark::after  { transform: rotate(-45deg); }

/* The content area scrolls inside the slide; the footer stays put. */
.overlay__body,
.overlay__body.pricing,
.overlay__body.faq,
.overlay__body.contact {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(100 * var(--u)) calc(140 * var(--u)) calc(56 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgb(238 243 232 / 0.18) transparent;
}

.overlay__foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: calc(28 * var(--u)) calc(140 * var(--u)) calc(44 * var(--u));
  font-size: max(0.75rem, calc(22 * var(--u)));
  color: var(--slide-muted);
  opacity: 0.8;
}
.overlay__hint { opacity: 0.7; }

/* --- Nocturne type ------------------------------------------------------------ */
.overlay .sectionHead__eyebrow { display: none; }
.overlay .sectionHead,
.overlay .drawer__head {
  align-items: flex-start;
  text-align: left;
  gap: calc(24 * var(--u));
  margin: 0 0 calc(56 * var(--u));
  max-width: none;
}
/* The theme's accent rule. */
.overlay .sectionHead::before,
.overlay .drawer__head::before {
  content: '';
  width: calc(100 * var(--u));
  height: max(3px, calc(8 * var(--u)));
  margin-bottom: calc(12 * var(--u));
  border-radius: 99px;
  background: var(--slide-gold);
}
.overlay .sectionHead__heading,
.overlay .drawer__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(2.25rem, calc(104 * var(--u)), 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--slide-ink);
  text-wrap: balance;
}
.overlay__em { font-style: italic; color: var(--slide-gold); }
.overlay .sectionHead__lead,
.overlay .drawer__lead {
  max-width: 48rem;
  font-size: clamp(1rem, calc(34 * var(--u)), 1.375rem);
  line-height: 1.5;
  color: var(--slide-muted);
}
.overlay .seg-i { font-style: inherit; }

/* Buttons in the theme: gold for the one that matters, hairline otherwise. */
.overlay .btn--primary { background: var(--slide-gold); color: var(--slide-ground); }
.overlay .btn--primary:hover { background: var(--slide-ink); }
.overlay .btn--ghost { border-color: var(--slide-line); color: var(--slide-ink); }
.overlay .btn--ghost:hover { border-color: var(--slide-gold); color: var(--slide-gold); }
.overlay .tick { color: var(--slide-gold); }

/* --- pricing ------------------------------------------------------------------ */
.overlay .pricing__controls { justify-content: flex-start; margin-bottom: calc(40 * var(--u)); }
/* Everything lines up under the heading, as on a Pagoni slide. */
.overlay .pricing__grid, .overlay .pricing__concession { max-width: none; margin-inline: 0; }
.overlay .pricing__toggle { border-color: var(--slide-line); background: transparent; }
.overlay .pricing__track { background: rgb(238 243 232 / 0.12); }
.overlay .pricing__thumb { background: var(--slide-gold); }
.overlay .pricing__saving { color: var(--slide-sage); }
.overlay .pricing__tier,
.overlay .pricing__tier[data-featured="true"] {
  background: rgb(1 29 22 / 0.42);
  border: 1px solid var(--slide-line);
  border-radius: 0.375rem;
  box-shadow: none;
  transform: none;
}
.overlay .pricing__tier[data-featured="true"] { border-color: rgb(213 183 122 / 0.6); }
.overlay .pricing__badge { background: var(--slide-gold); color: var(--slide-ground); }
.overlay .pricing__name,
.overlay .pricing__concessionTitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--slide-ink);
}
.overlay .pricing__tagline,
.overlay .pricing__note,
.overlay .pricing__period,
.overlay .pricing__concessionBody { color: var(--slide-muted); }
.overlay .pricing__amount,
.overlay .pricing__currency {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: var(--slide-ink);
}
.overlay .pricing__amount { font-size: 3.25rem; letter-spacing: 0; font-variant-numeric: lining-nums proportional-nums; }
.overlay .pricing__feature { color: var(--slide-ink); }
.overlay .pricing__concession {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--slide-line);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.overlay .pricing__concessionIcon { color: var(--slide-gold); border-color: var(--slide-line); background: transparent; }

/* --- questions ----------------------------------------------------------------- */
.overlay .faq__list { max-width: 64rem; margin-inline: 0; border-top-color: var(--slide-line); }
.overlay .faq__item { border-color: var(--slide-line); }
.overlay .faq__q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.375rem, calc(46 * var(--u)), 2.125rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--slide-ink);
}
.overlay .faq__summary:hover .faq__q { color: var(--slide-gold); }
.overlay .faq__mark { color: var(--slide-gold); }
.overlay .faq__answer { color: var(--slide-muted); max-width: 52rem; }

/* --- contact ------------------------------------------------------------------- */
.overlay .contact__label { color: var(--slide-sage); }
.overlay .contact__input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--slide-line);
  border-radius: 0;
  padding-inline: 0;
  color: var(--slide-ink);
}
.overlay .contact__input:focus { border-bottom-color: var(--slide-gold); }
.overlay .contact__textarea { border: 1px solid var(--slide-line); border-radius: 0.25rem; padding-inline: 0.75rem; }
.overlay .contact__channelLabel { color: var(--slide-sage); }
.overlay .contact__channelValue {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 1.625rem;
  color: var(--slide-ink);
  border-bottom-color: transparent;
}
.overlay .contact__channelValue:hover { color: var(--slide-gold); }
.overlay .contact__responseNote,
.overlay .contact__status { color: var(--slide-muted); }

/* --- narrow: a phone has no room for 16:9, so the slide is a tall sheet --------- */
@media (max-width: 760px), (max-aspect-ratio: 1 / 1) {
  .overlay { align-items: end; }
  .overlay__slide {
    width: 100%;
    height: calc(100dvh - 2 * var(--pad));
    aspect-ratio: auto;
    --u: calc(100cqw / 900);
  }
  .overlay__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay__slide { transform: none; transition: opacity var(--raw-duration-fast) linear; }
  .overlay__scrim { transition: opacity var(--raw-duration-fast) linear; }
}