/* "Sound familiar?" puzzle, hub version (nh-puzzle.js). Picked by Beau 2026-10-21 (sandbox prototypes: puzzle-hub, then puzzle-once).
   The script plays it once when the pieces come into view, then leaves it solved. */
@media (prefers-reduced-motion: no-preference) {
  .nh .nh-pz { position: relative; display: block; }
  .nh .nh-pz .nh-piece { will-change: transform; transition: border-color 0.3s ease, box-shadow 0.3s ease; z-index: 2; }
  .nh .nh-pz-wires { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
  .nh .nh-pz-wires line { stroke: var(--nh-teal, #8dc2c5); stroke-width: 1.5; stroke-linecap: round; }
  .nh .nh-pieces-lines { transition: none; }

  .nh .nh-pz-hub {
    position: absolute; z-index: 3; border-radius: 50%; opacity: 0;
    background: #ffffff url(/wp-content/themes/dcm/assets/media/icon-512.png) center / 74% no-repeat;
    border: 1.5px solid rgba(34, 50, 92, 0.16);
    box-shadow: 0 10px 28px rgba(26, 31, 46, 0.10);
  }
  .nh .nh-pz-hub::after {
    content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--nh-teal, #8dc2c5);
    opacity: 0; pointer-events: none;
  }
  /* solved: the pieces' outlines turn teal (connected) and the mark sends out one ring */
  @keyframes nh-pz-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
  .nh .nh-pz.is-solved .nh-piece { border-color: var(--nh-teal, #8dc2c5); }
  .nh .nh-pz.is-solved .nh-pz-hub::after { animation: nh-pz-ring 0.8s cubic-bezier(0.23, 1, 0.32, 1) both; }
  .nh .nh-pz.nh-pz-quiet .nh-pz-hub::after { animation: none; }   /* rebuilt solved after a resize: no second ring */
}