/* Effektiv Media – områdeshubb v1. Utseendet (färger, layout, panelens stil) skrivs i kundens komponent-CSS;
   här finns bara mekaniken: lutning/zoom, markerad ort, paneler. */
[data-hubb-scene] { perspective: 1600px; overflow: hidden; }
[data-hubb-scene] > svg { display: block; width: 100%; height: auto; transform-origin: var(--hx, 50%) var(--hy, 50%);
  transform: rotateX(calc((1 - var(--t, 1)) * 24deg)) scale(calc(1 + var(--t, 1) * var(--hubb-zoom, .22)));
  transition: transform 120ms linear; will-change: transform; }
[data-hubb] [data-ort] { cursor: pointer; outline: none; }
[data-hubb] [data-ort] [class$="-km-prick"], [data-hubb] [data-ort] [class$="-km-halo"] { transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
[data-hubb] [data-ort]:is(.is-hl, .is-aktiv) [class$="-km-prick"] { transform: scale(1.7); }
[data-hubb] [data-ort]:is(.is-hl, .is-aktiv) [class$="-km-halo"] { opacity: .35; transform: scale(1.3); }
[data-hubb] [data-ort].is-aktiv text { font-weight: 800; }
[data-hubb] [data-hubb-ort] { transition: background .25s, color .25s, padding .25s; }
.hubb-js [data-hubb-panel][hidden] { display: none; }
[data-hubb-panel] { animation: hubb-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes hubb-in { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-hubb-scene] > svg { transform: none !important; } [data-hubb-panel] { animation: none; } }