/* QPC Group — SVG motif animations
   Reusable animated shape library. Used across the design system + homepage.
   All motifs sit on a transparent SVG and respond to a `data-palette` attr:
     data-palette="dark"  → gold strokes/fills (default — for dark backgrounds)
     data-palette="light" → gold-dark strokes/fills (for light backgrounds)
*/

@import url('./colors_and_type.css');

/* ------------------------------------------------------------ */
/* Shared SVG color tokens                                      */
/* ------------------------------------------------------------ */
.qpc-motif {
  --motif-stroke: var(--qpc-gold);
  --motif-fill:   var(--qpc-gold);
  --motif-ghost:  rgba(201,166,70,0.28);
  --motif-line:   rgba(201,166,70,0.5);
  display: block;
  overflow: visible;
}
.qpc-motif[data-palette="light"] {
  --motif-stroke: var(--qpc-gold-dark);
  --motif-fill:   var(--qpc-gold-dark);
  --motif-ghost:  rgba(158,127,42,0.22);
  --motif-line:   rgba(158,127,42,0.4);
}
.qpc-motif[data-palette="esg"] {
  --motif-stroke: var(--qpc-esg);
  --motif-fill:   var(--qpc-esg-light);
  --motif-ghost:  rgba(31,81,50,0.22);
  --motif-line:   rgba(31,81,50,0.4);
}

@media (prefers-reduced-motion: reduce) {
  .qpc-motif * { animation: none !important; }
}

/* ============================================================ */
/* 1. RINGS — three concentric rings pulsing outward             */
/* ============================================================ */
@keyframes qpc-ring-pulse {
  0%   { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(1);   opacity: 0;   }
}
.qpc-motif--rings .ring {
  fill: none; stroke: var(--motif-stroke); stroke-width: 1.5;
  transform-origin: center; transform-box: fill-box;
  animation: qpc-ring-pulse 4s var(--ease-out) infinite;
}
.qpc-motif--rings .ring:nth-child(2) { animation-delay: 1.3s; }
.qpc-motif--rings .ring:nth-child(3) { animation-delay: 2.6s; }
.qpc-motif--rings .dot {
  fill: var(--motif-fill);
}

/* ============================================================ */
/* 2. ORBIT — central dot + nodes orbiting on three paths        */
/* ============================================================ */
@keyframes qpc-orbit-spin { to { transform: rotate(360deg); } }
.qpc-motif--orbit .orbit-path {
  fill: none; stroke: var(--motif-line); stroke-width: 1; stroke-dasharray: 3 4;
}
.qpc-motif--orbit .orbit-group {
  transform-origin: center; transform-box: fill-box;
  animation: qpc-orbit-spin linear infinite;
}
.qpc-motif--orbit .orbit-group.g1 { animation-duration: 14s; }
.qpc-motif--orbit .orbit-group.g2 { animation-duration: 22s; animation-direction: reverse; }
.qpc-motif--orbit .orbit-group.g3 { animation-duration: 30s; }
.qpc-motif--orbit .orbit-node { fill: var(--motif-fill); }
.qpc-motif--orbit .center { fill: var(--motif-fill); }

/* ============================================================ */
/* 3. BARS — chart bars breathing                                */
/* ============================================================ */
@keyframes qpc-bar-grow {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
.qpc-motif--bars .bar {
  fill: var(--motif-fill);
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: qpc-bar-grow 3.2s var(--ease-in-out) infinite;
}
.qpc-motif--bars .bar:nth-child(1) { animation-delay: 0s;    fill: var(--motif-ghost); }
.qpc-motif--bars .bar:nth-child(2) { animation-delay: 0.2s; }
.qpc-motif--bars .bar:nth-child(3) { animation-delay: 0.4s;  fill: var(--motif-ghost); }
.qpc-motif--bars .bar:nth-child(4) { animation-delay: 0.6s; }
.qpc-motif--bars .bar:nth-child(5) { animation-delay: 0.8s;  fill: var(--motif-ghost); }
.qpc-motif--bars .bar:nth-child(6) { animation-delay: 1.0s; }
.qpc-motif--bars .bar:nth-child(7) { animation-delay: 1.2s;  fill: var(--motif-ghost); }

/* ============================================================ */
/* 4. NETWORK — nodes connected by lines, lines drawing in       */
/* ============================================================ */
@keyframes qpc-net-line {
  0%, 100% { stroke-dashoffset: 200; opacity: 0.2; }
  40%      { stroke-dashoffset: 0;   opacity: 1; }
  60%      { stroke-dashoffset: 0;   opacity: 1; }
}
@keyframes qpc-net-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.5); }
}
.qpc-motif--network .net-line {
  fill: none; stroke: var(--motif-stroke); stroke-width: 1;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: qpc-net-line 5s var(--ease-in-out) infinite;
}
.qpc-motif--network .net-line:nth-child(2) { animation-delay: 0.4s; }
.qpc-motif--network .net-line:nth-child(3) { animation-delay: 0.8s; }
.qpc-motif--network .net-line:nth-child(4) { animation-delay: 1.2s; }
.qpc-motif--network .net-line:nth-child(5) { animation-delay: 1.6s; }
.qpc-motif--network .net-line:nth-child(6) { animation-delay: 2.0s; }
.qpc-motif--network .net-node {
  fill: var(--motif-fill);
  transform-origin: center; transform-box: fill-box;
  animation: qpc-net-pulse 3s var(--ease-in-out) infinite;
}

/* ============================================================ */
/* 5. WAVE — sine wave undulating                                */
/* ============================================================ */
@keyframes qpc-wave-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}
@keyframes qpc-wave-draw {
  0%   { stroke-dashoffset: 400; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.qpc-motif--wave .wave-group {
  animation: qpc-wave-shift 6s linear infinite;
}
.qpc-motif--wave .wave-line {
  fill: none; stroke: var(--motif-stroke); stroke-width: 1.5;
  stroke-linecap: round;
}
.qpc-motif--wave .wave-line.ghost { stroke: var(--motif-ghost); }

/* ============================================================ */
/* 6. HEX — hexagon lattice rotating                             */
/* ============================================================ */
@keyframes qpc-hex-spin { to { transform: rotate(360deg); } }
@keyframes qpc-hex-fade {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1;   }
}
.qpc-motif--hex .hex-group {
  transform-origin: center; transform-box: fill-box;
  animation: qpc-hex-spin 40s linear infinite;
}
.qpc-motif--hex .hex {
  fill: none; stroke: var(--motif-stroke); stroke-width: 1;
  animation: qpc-hex-fade 4s var(--ease-in-out) infinite;
}
.qpc-motif--hex .hex.a { animation-delay: 0s; }
.qpc-motif--hex .hex.b { animation-delay: 0.6s; }
.qpc-motif--hex .hex.c { animation-delay: 1.2s; }
.qpc-motif--hex .hex.d { animation-delay: 1.8s; }
.qpc-motif--hex .hex.e { animation-delay: 2.4s; }

/* ============================================================ */
/* 7. COMPASS — crosshair rotating with pulsing dot              */
/* ============================================================ */
@keyframes qpc-compass-spin { to { transform: rotate(360deg); } }
@keyframes qpc-compass-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.6; }
}
.qpc-motif--compass .compass-arm {
  fill: none; stroke: var(--motif-stroke); stroke-width: 1.2;
  transform-origin: center; transform-box: fill-box;
  animation: qpc-compass-spin 24s linear infinite;
}
.qpc-motif--compass .compass-arm.reverse { animation-direction: reverse; animation-duration: 36s; }
.qpc-motif--compass .compass-ring {
  fill: none; stroke: var(--motif-ghost); stroke-width: 1;
}
.qpc-motif--compass .compass-dot {
  fill: var(--motif-fill);
  transform-origin: center; transform-box: fill-box;
  animation: qpc-compass-pulse 2.6s var(--ease-in-out) infinite;
}