/* ============================================================
   home-video.css — "Video attract + menu" home paradigm.
   Scoped to `.home-video` (root class set by renderer/home-video.js);
   landscape rules under `.stage.landscape .home-video`.

   No video asset exists, so the "attract" hero is a full-bleed panel
   built ENTIRELY from the six shared branding vars via layered accent
   gradients. Colours ONLY via --bg/--ink/--accent/--accent-strong/
   --accent-soft/--border (+ the fixed tokens from styles.css, e.g.
   --surface, --shadow-tile, --radius-card, --font-display). No @import,
   no external fonts/URLs/images.
   ============================================================ */

/* ---------- Root: full-bleed shell ----------
   Cancel the .content padding (8px 44px 24px) with negative margins so the
   hero reaches the stage chrome edges; the +32px min-height keeps the bled
   box exactly filling the content area (no stray scroll). */
.home-video {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100% + 32px);
  margin: -8px -44px -24px;
  overflow: hidden;
}

/* ---------- Attract hero ---------- */
.video-hero {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 64px 132px;
  overflow: hidden;
  isolation: isolate;
  /* Layered branding gradients: a light bloom (accent mixed toward white),
     a deep corner pool (accent-strong) and the base accent → accent-strong
     wash. All colour derives from the branding custom properties. */
  background:
    radial-gradient(130% 82% at 18% 6%,
      color-mix(in srgb, var(--accent) 70%, var(--surface)) 0%, transparent 52%),
    radial-gradient(120% 120% at 88% 108%,
      var(--accent-strong) 0%, transparent 60%),
    linear-gradient(158deg, var(--accent) 0%, var(--accent-strong) 100%);
}
/* Browsers without color-mix fall back to the flat accent gradient. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .video-hero { background: linear-gradient(158deg, var(--accent) 0%, var(--accent-strong) 100%); }
}

/* Soft light bloom that slowly drifts — the only "motion" the hero carries.
   Gated by BOTH the JS `home-video--motion` class AND the reduced-motion
   media query below. */
.video-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(42% 42% at 32% 30%,
    color-mix(in srgb, var(--accent-soft) 55%, transparent) 0%, transparent 70%);
}
.home-video--motion .video-hero::before {
  animation: video-bloom 18s ease-in-out infinite alternate;
}
@keyframes video-bloom {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.16); }
}

.video-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.video-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--surface) 82%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .video-eyebrow { color: var(--accent-soft); }
}

.video-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 120px;
  line-height: 0.98;
  letter-spacing: 1px;
  color: var(--surface);
  text-wrap: balance;
  text-shadow: 0 12px 44px color-mix(in srgb, var(--accent-strong) 62%, transparent);
}

.video-cta {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: var(--surface);
  border-radius: 999px;
  padding: 22px 48px;
  box-shadow: var(--shadow-tile);
}
.home-video--motion .video-cta {
  animation: video-cta-pulse 1.9s ease-in-out infinite;
}
@keyframes video-cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ---------- Menu dock (portrait: bottom strip) ----------
   Overlaps the hero (negative top margin) so it reads as an overlay dock,
   with a subtle scrim rising from the accent-strong base. Scrolls
   horizontally, hiding its scrollbar exactly like .content does. */
.video-menu {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: -44px;
  padding: 30px 44px 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--accent-strong) 62%, transparent) 0%, transparent 100%);
}
.video-menu::-webkit-scrollbar { display: none; }
@supports not (background: color-mix(in srgb, red, blue)) {
  .video-menu { background: transparent; }
}

.video-menu-track {
  display: flex;
  gap: 26px;
  /* `safe center` centres a short menu but pins to the start once the chips
     overflow, so the first chip is never scrolled off-screen unreachably. */
  justify-content: safe center;
  padding: 4px 2px 6px;
}

.video-item {
  flex: 0 0 auto;
  width: 176px;
  min-height: 176px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 16px;
  transition: transform 0.14s ease;
}
.video-item:active { transform: scale(0.94); }
.video-item:focus-visible { outline: 5px solid var(--accent-strong); outline-offset: 4px; }

.video-item-icon { width: 84px; height: 84px; }
.video-item-icon svg { width: 100%; height: 100%; display: block; }

.video-item-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: pre-line;
}

/* Staggered chip entrance (neutralised by the global reduced-motion rule). */
.home-video--motion .video-item {
  animation: video-item-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.home-video--motion .video-menu-track .video-item:nth-child(1) { animation-delay: 0.04s; }
.home-video--motion .video-menu-track .video-item:nth-child(2) { animation-delay: 0.09s; }
.home-video--motion .video-menu-track .video-item:nth-child(3) { animation-delay: 0.14s; }
.home-video--motion .video-menu-track .video-item:nth-child(4) { animation-delay: 0.19s; }
.home-video--motion .video-menu-track .video-item:nth-child(5) { animation-delay: 0.24s; }
.home-video--motion .video-menu-track .video-item:nth-child(6) { animation-delay: 0.29s; }
.home-video--motion .video-menu-track .video-item:nth-child(7) { animation-delay: 0.34s; }
.home-video--motion .video-menu-track .video-item:nth-child(8) { animation-delay: 0.39s; }
@keyframes video-item-in {
  from { opacity: 0; transform: translateY(28px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   LANDSCAPE (1920×1080): hero on the LEFT, menu as a scrollable
   RIGHT-hand column. Keyed off the `.stage.landscape` ancestor.
   ============================================================ */
.stage.landscape .home-video {
  flex-direction: row;
  /* landscape .content padding is 6px 64px 16px → +22px vertical bleed. */
  min-height: calc(100% + 22px);
  margin: -6px -64px -16px;
}

.stage.landscape .video-hero {
  flex: 1 1 auto;
  padding: 72px 88px;
}
.stage.landscape .video-title { font-size: 128px; }
.stage.landscape .video-eyebrow { font-size: 32px; }

.stage.landscape .video-menu {
  flex: 0 0 640px;
  width: 640px;
  margin-top: 0;
  margin-left: -48px;               /* overlap the hero seam → overlay feel */
  padding: 48px 52px;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-strong) 60%, transparent) 0%, transparent 40%);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .stage.landscape .video-menu { background: transparent; }
}

.stage.landscape .video-menu-track {
  flex-direction: column;
  justify-content: flex-start;
  gap: 22px;
}

/* Chips become full-width rows (icon beside label) in the column. */
.stage.landscape .video-item {
  width: 100%;
  min-height: 132px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 28px;
  padding: 22px 32px;
  text-align: left;
}
.stage.landscape .video-item-icon { flex: 0 0 auto; width: 78px; height: 78px; }
.stage.landscape .video-item-label { text-align: left; font-size: 31px; }

/* ---------- Reduced motion (belt-and-suspenders with styles.css) ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-video--motion .video-hero::before,
  .home-video--motion .video-cta,
  .home-video--motion .video-item {
    animation: none;
  }
}