/* ==========================================================================
   QuietQuality — scenes-services.css
   Scene layer for the service pages: the five service-detail pages and the
   services hub (services.html, which loads this after scenes-hub.css so the
   framed-footage block and DM section rules apply there too).
   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-hub.css ->]
   scenes-services.css. Every effect degrades to a static, legible state under
   prefers-reduced-motion.
   ========================================================================== */

/* --- Framed footage block (Wave2) ---------------------------------------
   The dark loop clips retired in Wave1 return here as DM-style "photo blocks"
   (design-system §7 / dm-page-04): an ink-900 frame carrying a metal 1px
   hairline, a Helvetica `FOOTAGE — {THEME}` label, and the loop video inside.
   The hero itself stays paper; this block sits in a band directly below it.
   The video keeps its data-video-scene / data-src-1080/720 lazy-load contract
   unchanged — motion.js still injects the source on IO approach and this markup
   only wraps it. */
.svc-media-band {
  padding: clamp(40px, 6vw, 78px) 0;
  background: var(--qq-paper-0);
  color: var(--ink);
}

.svc-media-frame {
  position: relative;
  margin: 0;
  padding: clamp(14px, 1.8vw, 22px);
  background: var(--qq-ink-900);
  box-shadow: var(--shadow-soft);
}

/* DM 額縁: a metal hairline inset just inside the ink frame (page-04 recipe). */
.svc-media-frame::before {
  content: "";
  position: absolute;
  inset: clamp(7px, 0.9vw, 11px);
  border: 1px solid var(--metal-line);
  pointer-events: none;
  z-index: 2;
}

.svc-media-frame-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 2px 6px 13px;
  color: var(--metal);
  font-family: var(--font-label);
  font-size: clamp(9px, 0.9vw, 11px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.svc-media-meta {
  color: rgba(255, 253, 248, 0.5);
  letter-spacing: 0.16em;
}

.svc-media-window {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--qq-charcoal-800);
}

/* The video-scene container (motion.css already gives it position:relative +
   overflow:hidden) fills the window; motion.js injects the source on approach. */
.svc-media-window [data-video-scene] {
  position: absolute;
  inset: 0;
}

.svc-media-window video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}

@media (max-width: 620px) {
  .svc-media-window {
    aspect-ratio: 4 / 3;
  }
  .svc-media-frame-head {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .svc-media-meta {
    display: none;
  }
}

/* --- Editorial overlay on the framed footage (services hub only) ----------
   v3.1-6: the loop had no meaning. Here it carries a serif catchphrase, an
   English label and only numbers already present on this page (月額30万円 /
   45分35,000円), over an ink scrim for legibility. The five service-detail
   pages share .svc-media-frame but carry no .svc-media-overlay markup, so
   these rules paint on services.html alone. */
.svc-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3.2vw, 42px);
  background: linear-gradient(
    180deg,
    rgba(21, 23, 22, 0.4) 0%,
    rgba(21, 23, 22, 0.14) 36%,
    rgba(21, 23, 22, 0.66) 100%
  );
  color: var(--qq-paper-0, #fffdf8);
  pointer-events: none;
}

.svc-media-kicker {
  margin: 0;
  font-family: var(--font-label);
  font-size: clamp(9px, 0.9vw, 11px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal, #c6b58b);
}

.svc-media-lede {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 20px);
}

.svc-media-copy {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--qq-paper-0, #fffdf8);
  text-shadow: 0 1px 26px rgba(0, 0, 0, 0.32);
}

.svc-media-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-media-stats li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.svc-media-stats b {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 24px);
  letter-spacing: 0.01em;
  color: var(--qq-paper-0, #fffdf8);
}

.svc-media-stats span {
  font-family: var(--font-label);
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, 0.74);
}

@media (max-width: 620px) {
  .svc-media-copy {
    font-size: clamp(23px, 7.6vw, 32px);
  }
  .svc-media-stats {
    gap: 16px 22px;
  }
}

/* --- DM-style section rules ----------------------------------------------
   A 1px sand hairline between stacked bands, so the paper 3-tone rhythm reads
   as ruled editorial (design-system §4 罫線文化) rather than loose blocks. The
   hero's own border-bottom rules the hero|footage seam and the footage band
   adds no top border, so no line is ever doubled. */
.section-pad,
.final-cta {
  border-top: 1px solid var(--hairline);
}

/* --- 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: var(--qq-sand-300, #d9d1c3);
  stroke-width: 2;
}

.svc-steps-fill {
  fill: none;
  stroke: var(--qq-metal-400, #c6b58b);
  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: var(--qq-sand-300, #d9d1c3);
  --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(--qq-olive-800, #424a3a);
  opacity: var(--lit);
  transform: scale(calc(0.55 + 0.5 * var(--lit)));
  box-shadow: 0 0 calc(6px * var(--lit)) rgba(66, 74, 58, 0.35);
  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;
  }
}