/* Effect: zwevende data-chips (datachips) — v0.1.0
   Kleine glazen kaartjes naast het 3D-voorwerp met echte gegevens (volgende show + aftelklok,
   residentie, sound). Zweven zacht (4 px) en schuiven mee met de aanwijzer (datachips.js zet
   --chip-px/--chip-py). Een dunne aanwijslijn met stip wijst naar het voorwerp.
   Kost: laag (transform-animatie op de compositor). */
.chip {
  position: absolute; z-index: 4;
  display: grid; gap: 3px; max-width: min(62%, 250px);
  padding: 10px 13px 11px; border-radius: 14px;
  background: rgba(16, 12, 22, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 500 13px/1.3 var(--sans, sans-serif); color: var(--ink, #f1ecf8);
  translate: var(--chip-px, 0px) var(--chip-py, 0px);
  transition: translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: chip-zweef 7s ease-in-out infinite;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chip { background: rgba(20, 14, 28, 0.46); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
}
.chip:nth-of-type(2n) { animation-duration: 8.5s; animation-delay: -3s; }
.chip:nth-of-type(3n) { animation-duration: 9.5s; animation-delay: -5s; }
@keyframes chip-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.chip small { font: 600 10px/1.2 var(--mono, monospace); letter-spacing: 0.18em; text-transform: uppercase; color: var(--groen, #39ff90); }
.chip strong { font-weight: 650; font-size: 13.5px; }
.chip-klok { font: 600 13px/1.2 var(--mono, monospace); font-variant-numeric: tabular-nums; color: var(--amber, #ffb347); letter-spacing: 0.02em; }
.chip .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--groen, #39ff90); display: inline-block; margin-right: 6px; box-shadow: 0 0 10px var(--groen, #39ff90); animation: stip-puls 1.6s ease-in-out infinite; vertical-align: 1px; }
@keyframes stip-puls { 50% { opacity: 0.35; } }
/* aanwijslijn naar het voorwerp */
.chip[data-lijn]::after, .chip[data-lijn]::before { content: ""; position: absolute; pointer-events: none; }
.chip[data-lijn]::after { width: var(--lijn-lengte, 34px); height: 1px; top: 50%; background: linear-gradient(90deg, rgba(255, 190, 140, 0.55), rgba(255, 190, 140, 0)); }
.chip[data-lijn]::before { width: 5px; height: 5px; border-radius: 50%; top: calc(50% - 2px); background: #ffcf9e; box-shadow: 0 0 8px rgba(255, 150, 60, 0.9); }
.chip[data-lijn="rechts"]::after { left: 100%; }
.chip[data-lijn="rechts"]::before { left: calc(100% + var(--lijn-lengte, 34px) - 2px); }
.chip[data-lijn="links"]::after { right: 100%; transform: scaleX(-1); }
.chip[data-lijn="links"]::before { right: calc(100% + var(--lijn-lengte, 34px) - 2px); }
/* mini-equalizer (decoratief) */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-top: 3px; }
.eq i { width: 3px; height: 100%; border-radius: 1px; background: linear-gradient(var(--amber, #ffb347), var(--vuur, #ff6a00)); transform-origin: bottom; animation: eq-veer 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.5s; }
.eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.2s; }
@keyframes eq-veer { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .chip, .eq i, .chip .stip { animation: none !important; } .chip { transition: none; } }