/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · preview-surfaces.css
   Shared Act VI preview surface chrome: frame, caption, grid, scroll-reveal.
   Route-specific palette and typography added by route CSS in
   .preview--ledger, .preview--threshold, .preview--cartographer scopes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Preview container — 8-surface stacked layout
   Desktop: single centered column (surfaces stack vertically; hero + rtl-hero
   are wider than the narrow surfaces). Art direction calls for a vertical
   "designer's table" stack rather than a multi-column grid.
   -------------------------------------------------------------------------- */

:where(.preview) {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-9);
}

@media (min-width: 768px) {
  :where(.preview) {
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Preview surface — frame chrome
   Each surface is a bordered card with internal padding.
   The inner stage preserves aspect ratio via --surface-aspect.
   -------------------------------------------------------------------------- */

:where(.preview__surface,
       .preview-surface) {
  border: 1px solid var(--hairline);
  padding: var(--space-2);
  background-color: var(--paper);
  /* Scroll-reveal initial state */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-reveal),
              transform var(--dur-slow) var(--ease-reveal);
}

:where(.preview__surface.is-revealed,
       .preview-surface.is-revealed) {
  opacity: 1;
  transform: translateY(0);
}

/* Pre-reveal for reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.preview__surface,
         .preview-surface) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:where(html.motion-reduced .preview__surface,
       html.motion-reduced .preview-surface) {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Surface chrome strip — label + open hint inside the frame border
   -------------------------------------------------------------------------- */

:where(.preview__surface-chrome,
       .preview-surface__chrome) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--hairline);
  margin-block-end: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

:where(.preview__surface-chrome-hint,
       .preview-surface__open-hint) {
  opacity: 0.6;
  font-size: calc(var(--fs-eyebrow) * 0.9);
}

/* --------------------------------------------------------------------------
   Surface stage — inner content area preserves aspect ratio
   Aspect ratio set per surface type via inline style or modifier class.
   -------------------------------------------------------------------------- */

:where(.preview__surface-stage,
       .preview-surface__stage) {
  width: 100%;
  overflow: hidden;
  background-color: var(--paper);
}

/* Per-surface aspect ratios */
:where(.preview__surface--hero .preview__surface-stage,
       .preview-surface[data-surface="1"] .preview-surface__stage) {
  aspect-ratio: 12 / 5;
}

:where(.preview__surface--masthead .preview__surface-stage,
       .preview-surface[data-surface="2"] .preview-surface__stage) {
  aspect-ratio: 4 / 1;
  /* Substack masthead is a tall band + about section — allow min-height */
  min-block-size: 18rem;
  aspect-ratio: unset;
}

:where(.preview__surface--cover .preview__surface-stage,
       .preview-surface[data-surface="3"] .preview-surface__stage) {
  aspect-ratio: 3 / 4;
  min-block-size: 20rem;
}

:where(.preview__surface--slide .preview__surface-stage,
       .preview-surface[data-surface="4"] .preview-surface__stage) {
  aspect-ratio: 16 / 9;
}

:where(.preview__surface--banner .preview__surface-stage,
       .preview-surface[data-surface="5"] .preview-surface__stage) {
  aspect-ratio: unset;
  min-block-size: 14rem;
}

:where(.preview__surface--post .preview__surface-stage,
       .preview-surface[data-surface="6"] .preview-surface__stage) {
  aspect-ratio: 3 / 4;
  min-block-size: 22rem;
}

:where(.preview__surface--signature .preview__surface-stage,
       .preview-surface[data-surface="7"] .preview-surface__stage) {
  aspect-ratio: unset;
  min-block-size: 10rem;
}

:where(.preview__surface--rtl-hero .preview__surface-stage,
       .preview-surface[data-surface="8"] .preview-surface__stage) {
  aspect-ratio: 12 / 5;
}

/* --------------------------------------------------------------------------
   Caption — below each surface frame
   -------------------------------------------------------------------------- */

:where(.preview__caption,
       .preview-surface__caption) {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-3);
}

:where(.preview__caption-eyebrow,
       .preview-surface__caption-eyebrow) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  line-height: var(--lh-caption);
}

:where(.preview__caption-annotation,
       .preview-surface__caption-annotation) {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
  max-inline-size: 42rem;
}

/* --------------------------------------------------------------------------
   Act VI banner block — above the 8 surfaces
   -------------------------------------------------------------------------- */

:where(.act-vi-banner) {
  max-inline-size: 42rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block-end: var(--space-7);
  text-align: center;
}

:where(.act-vi-banner__eyebrow) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block-end: var(--space-4);
}

:where(.act-vi-banner__line) {
  font-family: var(--font-agency);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-h2);
  margin-block-end: var(--space-4);
}

:where(.act-vi-banner__sub) {
  font-size: var(--fs-body-lg);
  font-style: italic;
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   Act VI route visibility safety net — CSS override for [hidden] when body
   carries the matching route class. Browsers honour [hidden] as display:none
   in their UA sheet; we override at higher specificity per active route so
   the surface is visible even if JS toggle runs late or is replayed.
   -------------------------------------------------------------------------- */

body.route-ledger [data-surface-route="ledger"][hidden],
body.route-threshold [data-surface-route="threshold"][hidden],
body.route-cartographer [data-surface-route="cartographer"][hidden] {
  display: block;
}

/* --------------------------------------------------------------------------
   Stagger overrides — JS adds transition-delay per surface index
   via inline style; no CSS stagger needed here. Base transition above
   handles the animation once .is-revealed is applied.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.preview) {
    padding-inline: var(--space-4);
    padding-block: var(--space-7);
    gap: var(--space-6);
  }

  :where(.preview__surface--hero .preview__surface-stage,
         .preview-surface[data-surface="1"] .preview-surface__stage,
         .preview__surface--rtl-hero .preview__surface-stage,
         .preview-surface[data-surface="8"] .preview-surface__stage) {
    aspect-ratio: 4 / 5;
  }

  :where(.preview__surface--slide .preview__surface-stage,
         .preview-surface[data-surface="4"] .preview-surface__stage) {
    aspect-ratio: 4 / 3;
  }
}