/* ==========================================================================
   QuietQuality — scenes-hub.css
   Scene styling shared by the 5 hub / content pages
   (services, case-study, staff, method, column).
   Loads immediately after motion.css and reuses its scene classes
   (qq-htrack-*, method-runner/-sticky/-connector, qq-case-grid,
   qq-video-overlay). This file adds only the page-specific pieces that the
   flagship index.html did not need. Brand tokens come from site.css :root.
   Every effect degrades to a static, legible state under
   prefers-reduced-motion.
   ========================================================================== */

/* --- Hero loop-video background (services) -------------------------------
   Sits between .hero::before (static image, z-index -3) and .hero::after
   (dark legibility gradient, z-index -1); the ambient canvas keeps painting
   its gold bars above it. The black backing hides the underlying hero image
   so the facade loop reads cleanly. */
.qq-hub-hero .qq-hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--black);
}

.qq-hub-hero .qq-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  transform: scale(1.06);
  animation: qq-hub-drift 26s ease-in-out infinite alternate;
}

@keyframes qq-hub-drift {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.14) translate3d(-1.6%, -1.1%, 0);
  }
}

/* --- Full-width video band (case-study, directly after the hero) -------- */
.qq-hub-band {
  position: relative;
  min-height: clamp(320px, 56vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.qq-hub-band-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qq-hub-band-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transform: scale(1.04);
  animation: qq-hub-drift 30s ease-in-out infinite alternate;
}

.qq-hub-band-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 22%, rgba(232, 200, 140, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(5, 6, 7, 0.72), rgba(5, 6, 7, 0.86));
}

.qq-hub-band-copy {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) 0;
  text-align: center;
}

.qq-hub-band-copy h2 {
  margin: 0;
  color: var(--cream);
  font-size: clamp(34px, 6.4vw, 82px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* --- Staff portrait: clip-path wipe reveal ------------------------------
   The wrapping .section-pad is auto-observed by the engine and gains
   .is-visible on entry (~15% threshold); we key the wipe off that so no
   extra JS is required. */
.staff-profile .portrait img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.19, 0.9, 0.22, 1);
}

.section-pad.is-visible .staff-profile .portrait img {
  clip-path: inset(0);
}

/* --- Reduced motion: pin new scenes to their resolved, legible state ---- */
@media (prefers-reduced-motion: reduce) {
  .qq-hub-hero .qq-hero-video video,
  .qq-hub-band-media video {
    animation: none;
    transform: none;
  }
  .staff-profile .portrait img {
    clip-path: none;
    transition: none;
  }
}