/* ==========================================================================
   QuietQuality — scenes-services.css
   Scene layer for the five service-detail pages. Composed on top of the shared
   motion engine (motion.js / motion.css) and site.css brand tokens.
   Load order (per page head): site.css -> motion.css -> scenes-services.css.
   Every effect degrades to a static, legible state under prefers-reduced-motion.
   ========================================================================== */

/* --- HERO: theme loop video replacing the static --hero-image ------------
   Stacking inside the .hero isolated context (bottom -> top):
     .hero background (black)
     .hero::before static image   (z-index -3, hidden behind the media)
     .svc-hero-media video        (z-index -3, opaque, paints over ::before)
     .motion-field canvas         (z-index -2, thin particle texture over video)
     .svc-hero-shade + .hero::after (z-index -1, dark gradient for legibility)
     .hero-inner content          (z-index auto/0) */
.svc-hero .svc-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--black);
}

.svc-hero .svc-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  filter: brightness(0.82) saturate(0.94);
  animation: svc-hero-drift 20s ease-in-out infinite alternate;
}

@keyframes svc-hero-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* Supplemental left-weighted shade so the cream headline stays legible over a
   full-colour clip. Sits with .hero::after at z-index -1. */
.svc-hero .svc-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 26%, rgba(201, 134, 59, 0.14), transparent 40%),
    linear-gradient(
      90deg,
      rgba(5, 6, 7, 0.9) 0%,
      rgba(5, 6, 7, 0.66) 44%,
      rgba(5, 6, 7, 0.34) 74%,
      rgba(5, 6, 7, 0.62) 100%
    );
}

/* Keep the particle canvas a subtle veil over the moving footage. */
.svc-hero .motion-field {
  opacity: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero .svc-hero-media video {
    animation: none;
    transform: none;
  }
}

/* --- STEP connector: a scroll-drawn progress axis above the schedule grid --
   A section-level timeline (not tied to card geometry, so it is robust across
   the 4 -> 2 -> 1 column reflow). An inline per-page script writes 0..1 into
   --draw on .svc-steps as the block passes through the viewport; the SVG fill
   strokes left->right and the nodes light as the fill passes them. */
.svc-steps {
  position: relative;
}

.svc-steps-axis {
  position: relative;
  height: 30px;
  margin-bottom: clamp(22px, 3.2vw, 38px);
}

.svc-steps-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 4px;
  transform: translateY(-50%);
  overflow: visible;
}

.svc-steps-track {
  fill: none;
  stroke: rgba(201, 134, 59, 0.22);
  stroke-width: 2;
}

.svc-steps-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 0));
}

.svc-steps-node {
  position: absolute;
  top: 50%;
  left: calc(var(--at, 0) * 100%);
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 999px;
  background: rgba(201, 134, 59, 0.26);
  --lit: clamp(0, calc((var(--draw, 0) - var(--at, 0)) * 30), 1);
}

.svc-steps-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold);
  opacity: var(--lit);
  transform: scale(calc(0.55 + 0.5 * var(--lit)));
  box-shadow: 0 0 calc(10px * var(--lit)) rgba(201, 134, 59, 0.55);
  transition: none;
}

/* No JS / reduced motion: show the axis fully resolved rather than blank. */
@media (prefers-reduced-motion: reduce) {
  .svc-steps-fill {
    stroke-dashoffset: 0;
  }
  .svc-steps-node {
    --lit: 1;
  }
}

@media (max-width: 620px) {
  .svc-steps-axis {
    height: 26px;
  }
}