/* ============================================================
   SHOWCASE ENGINE — the one layer shared by every area & demo
   ============================================================
   Infrastructure only: reset, accessibility, breakpoints, z-index,
   fluid-type mechanics. NO color, NO font-family, NO "brand" or
   "mood" decisions belong in this file — those are area/demo-level
   (see styles/showcase/{area}/tokens.css). Per
   Campaign/Demo-Platform-Strategy/07-design-system-architecture.md.
   ============================================================ */

@import '../reset.css';

:root {
  /* ── Breakpoints (documented constants — plain vars, CSS has no
     custom-media without a build step here) ─────────────────── */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ── Z-index scale — shared so a modal in one area can never
     land under a nav in another ─────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Motion mechanics (durations only — easing "feel" is an
     area/demo brand decision, not engineering) ──────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   450ms;
}

/* ── Universal a11y baseline ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: var(--z-toast);
  padding: 0.75rem 1.25rem;
  background: #000;
  color: #fff;
  border-radius: 6px;
  transition: top var(--duration-normal) ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ── Lazy "facade" video embed — structural CSS only.
   Colors/hover states are supplied by the area's own tokens.css
   via the semantic vars referenced below (--sc-color-*, --sc-*).
   See Campaign/Demo-Platform-Strategy/05 and /06 for the pattern
   this implements. ─────────────────────────────────────────────*/
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--sc-radius-lg, 12px);
  background: var(--sc-color-surface-alt, #1a1a1a);
}

/* Owner/Member Brief cuts are produced as YouTube Shorts (9:16), not
   standard landscape video — embedding one at the default 16:9 pillarboxes
   it inside YouTube's own player (black bars both sides, video reduced to
   a thin center strip). Apply alongside .video-facade whenever the target
   video is a Short. Capped width, not full-bleed: at a wide grid-column
   width a 9:16 box would otherwise tower over the text next to it. */
.video-facade--vertical {
  aspect-ratio: 9 / 16;
  max-width: 240px;
  margin-inline: auto;
}

.video-facade__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
}

.video-facade[data-playing="true"] .video-facade__frame {
  display: block;
}

.video-facade[data-playing="true"] .video-facade__poster {
  display: none;
}

.video-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-facade__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--sc-color-accent, #ff5a1f);
  color: #fff;
  transition: transform var(--duration-normal) ease;
}

.video-facade:hover .video-facade__play-icon {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .video-facade:hover .video-facade__play-icon { transform: none; }
}