/* ==========================================================================
   uv-preview-chrome.css  —  Sprint 17 (S17-B/D/F)
   --------------------------------------------------------------------------
   In preview mode (template viewed by a prospective buyer who hasn't bought
   yet), the page shows two floating buttons at the top:
     - .preview-back  (top-left, "← Back")
     - .preview-claim (top-right, "Make this yours")

   These are position:fixed with translucent backgrounds. Without a backdrop
   strip behind them, section titles (e.g. "BABY SHOWER", "The Countdown",
   "Honoring") scroll up underneath and appear to bleed through the buttons.

   Fix: render a full-width fixed scrim at the top that occludes content
   underneath the buttons. The scrim is invisible at the page top (the page
   already has its own background there) but creates a subtle fade so the
   buttons always sit on a clean canvas regardless of what's behind them.

   Loaded by all 3 templates (HAW, Lindo, Cinema). Hidden in:
     - .is-live-invite mode (real purchased invite — no preview chrome)
     - .uv-mode-draft mode (owner editor — has its own toolbar)
     - .uv-mode-draft-share mode (shared-draft view — has its own banner)

   The scrim uses ::before on the body since we can't add DOM in 3 templates
   without duplicating work.
   ========================================================================== */

/* The scrim — full width, fixed, sits behind the preview buttons.
   Buttons sit at top:14 with height ~34, so 0–48px is the button band.
   Section titles can extend to ~70px on some templates, so the scrim must
   stay fully opaque all the way through the title-occlusion zone and only
   fade out at the very end. Height = 96px to cover even tall section titles. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  z-index: 1050;          /* below preview buttons (z=1100), above envelope-intro (z=1000) and all content */
  pointer-events: none;
  /* Keep the scrim near-opaque through the entire button + title band,
     then fade out fast at the bottom edge so the transition is invisible. */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 60%,
    rgba(255, 255, 255, 0.96) 80%,
    rgba(255, 255, 255, 0.6) 92%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Force preview buttons above the scrim regardless of per-template z-index.
   Templates vary: HAW has them at z=90, Lindo at z=1100. We normalize. */
.preview-back,
.preview-claim {
  z-index: 1100 !important;
}

/* Hide the scrim in non-preview modes */
body.is-live-invite::before,
body.uv-mode-draft::before,
body.uv-mode-draft-share::before,
body.uv-no-preview-chrome::before,
body.uv-mode-embed::before {
  display: none;
}

/* Embed mode: template loaded inside the catalog preview modal iframe.
   The modal already renders its own Back + Customize chrome around the
   iframe, so the template's own preview buttons would collide with the
   modal close (X) at the top-right. Hide them. */
html.uv-mode-embed .preview-back,
html.uv-mode-embed .preview-claim,
body.uv-mode-embed .preview-back,
body.uv-mode-embed .preview-claim {
  display: none !important;
}

/* Also give the page a tiny scroll-padding-top so anchored scrolls don't
   land directly under the scrim. */
html {
  scroll-padding-top: 70px;
}

/* In live/draft modes restore default scroll padding */
body.is-live-invite,
body.uv-mode-draft,
body.uv-mode-draft-share {
  /* anchor scroll-padding is reset via html selector above; these modes
     have their own top chrome with their own offsets already. */
}

/* The default scrim is a soft white. Templates that need a tinted scrim can
   override via their own CSS by targeting body[data-template] selectors. */