/* ============================================================================
   showcase.css — shared, pack-AGNOSTIC layer for the design preview only.
   Holds: the scroll-reveal motion baseline, CSS-gradient placeholder imagery
   (so the demo needs no photos), a default .x-statement signature band, and the
   sticky pack-switcher bar. Theme packs (packs/<name>.css) load AFTER this and
   override freely. None of this ships to client sites.
   ============================================================================ */

/* Scroll-reveal — elements fade/rise in as they enter the viewport. The JS adds
   .reveal-in. Packs may retune the easing/feel. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,.7,.3,1), transform .7s cubic-bezier(.16,.7,.3,1); }
.reveal-in { opacity: 1; transform: none; }
/* Light stagger for the hero stack so it cascades in. */
.x-hero .container > .reveal:nth-child(1) { transition-delay: .04s; }
.x-hero .container > .reveal:nth-child(2) { transition-delay: .12s; }
.x-hero .container > .reveal:nth-child(3) { transition-delay: .20s; }
.x-hero .container > .reveal:nth-child(4) { transition-delay: .28s; }
.x-hero .container > .reveal:nth-child(5) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* CSS-gradient placeholder "photos" for the service tiles (no image deps). */
.x-svc-ph { position: absolute; inset: 0; background: var(--g, linear-gradient(150deg,#243b55,#0d1b2a)); background-size: cover; background-position: center; transition: transform .5s ease; }
.x-svc:hover .x-svc-ph { transform: scale(1.06); }

/* Signature statement band — default treatment; packs make it theirs. */
.x-statement { padding: var(--space-12) 0; background: var(--brand-secondary); color: #fff; }
.x-statement p { max-width: 900px; margin: 0 auto; text-align: center; font-size: clamp(1.4rem,3vw,2.15rem); line-height: 1.42; font-weight: 500; }
.x-statement em { color: var(--brand-primary); font-style: italic; }

/* Sticky preview switcher (preview chrome only). */
.sc-bar { position: sticky; top: 0; z-index: 9999; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 9px 16px; background: #0b0b0d; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); font: 500 13px/1 ui-sans-serif, system-ui, sans-serif; }
.sc-bar .sc-title { font-weight: 600; margin-right: 10px; letter-spacing: .02em; }
.sc-bar a { color: rgba(255,255,255,.68); text-decoration: none; padding: 7px 12px; border-radius: 6px; white-space: nowrap; }
.sc-bar a:hover { background: rgba(255,255,255,.09); color: #fff; }
.sc-bar a.on { background: #fff; color: #0b0b0d; }
.sc-bar .sc-sp { flex: 1 1 24px; }
.sc-bar .sc-note { opacity: .55; font-weight: 400; white-space: nowrap; }
@media (max-width: 720px) { .sc-bar .sc-note { display: none; } }

/* Only one sticky element on showcase pages — let the demo header scroll. */
body.showcase .site-header { position: static; }