/* SVC-PANEL — gedeeld "figuurtje"-paneel voor de dienst-hero's WS + RPO
   (Timo 2026-07-21: "twee van dit soort gegenereerde dingetjes zoals bij Talent
   Intelligence, in dezelfde soort stijl"). Zelfde visuele taal als het
   TI-talent-map-paneel (ti1.css), maar generiek herbruikbaar: licht vlak met
   navy dot-grid, navy nodes/lijnen, één oranje highlight + puls, en navy-pill
   chips met witte tekst. WS krijgt een selectie-funnel, RPO een continu
   proces-ring; de SVG-inhoud staat per pagina in ws1.html / rpo1.html.
   Kader-geometrie (radius/border/schaduw/aspect) komt uit svc-hero.css; dit
   bestand vult dat kader. */

.svc-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper);
}

/* Dot-grid-achtergrond: rgba-derivaat van --navy-950 op 8% (identiek aan TI). */
.svc-panel-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(2, 14, 44, .08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.svc-panel-label {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 22px 26px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.svc-panel-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/* Hover-zoom (homepage-VSL-recept, s1.css .hero-video): het paneelbeeld
   (dot-grid + figuur-svg) zoomt subtiel binnen het kader — overflow hidden zit
   op .svc-hero-media. Label, chips en play-knop zijn foreground en blijven staan.
   Beide lagen delen inset:0 + center-origin, dus ze zoomen pixel-gelijk mee. */
.svc-panel-grid,
.svc-panel-svg {
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.svc-panel:hover .svc-panel-grid,
.svc-panel:hover .svc-panel-svg {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .svc-panel-grid,
  .svc-panel-svg { transition: none; }
  .svc-panel:hover .svc-panel-grid,
  .svc-panel:hover .svc-panel-svg { transform: none; }
}

/* Lijnen/bogen: gedempt navy op licht. */
.svc-line { stroke: var(--navy-300); stroke-width: 1; fill: none; }
.svc-arc  { stroke: var(--navy-300); stroke-width: 1; fill: none; }

/* Nodes: navy op het lichte vlak. */
.svc-node { fill: none; stroke: var(--navy-950); stroke-width: 1.8; }
.svc-node--fill { fill: var(--navy-950); stroke: none; opacity: .85; }

/* Highlight + puls: oranje accent. */
.svc-node--hi { fill: var(--orange-500); stroke: none; }
.svc-puls { fill: none; stroke: var(--orange-500); }

@keyframes svc-puls {
  from { r: 9; opacity: .8; }
  to   { r: 24; opacity: 0; }
}
html.motion .svc-puls { animation: svc-puls 2.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { html.motion .svc-puls { animation: none; } }

/* Vloei-stip die de proces-ring (RPO) rondgaat: progressive enhancement. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .svc-flow {
    offset-path: var(--flow-path);
    animation: svc-flow 5.5s linear infinite;
  }
}
@keyframes svc-flow { to { offset-distance: 100%; } }

/* Chips: navy-950-pill met witte tekst, absoluut over de svg (decoratief). */
.svc-chips {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.svc-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--navy-950);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  white-space: nowrap;
}

/* Sfeerposities (ontkoppeld van de SVG-coords wegens de slice-crop, net als TI):
   chip 2 rechts van de altijd zichtbare play-knop (centrum 50%/50%). */
.svc-chip:nth-child(1) { top: 21%; left: 6%; transform: translate(0, -50%); }
.svc-chip:nth-child(2) { top: 50%; left: 63%; transform: translate(0, -50%); }
.svc-chip:nth-child(3) { top: 78%; left: 11%; transform: translate(0, -50%); }

@media (max-width: 560px) {
  .svc-chip:nth-child(2) { display: none; }

  /* Op de mobiele fold-hoogte (16/9-kader, svc-hero.css) botst de caption met
     chip 1; op de telefoon dragen de figuur + chips het paneel. (Timo 260722) */
  .svc-panel-label { display: none; }
}