/* Scene (brief §3): vaste laag achter de UI, één transform voor de camera */

.scene-viewport {
  /* Scrollt mee met de pagina: bovenaan, even hoog als het eerste scherm */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  overflow: clip; /* focus op een knop mag de laag nooit laten scrollen */
  background: var(--dj-scene-bg);
}

.scene__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(40px);
  transform: scale(1.15);
  pointer-events: none;
}

.scene {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  /* breedte/hoogte (2560 × 1440) en transform worden in scene.js gezet */
}
.scene.is-moving { will-change: transform; }

.scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ---------- Toestellen ---------- */

.device {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: filter var(--dur-camera) var(--ease-camera);
}

.device__img {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Ankerpunt: left/top in scene.js = het anker van die variant */
.device[data-anchor="bottom-center"] .device__img {
  translate: -50% -100%;
  transform-origin: 50% 100%;
}
.device[data-anchor="center"] .device__img {
  translate: -50% -50%;
  transform-origin: 50% 50%;
}

/* Witte variant: gloed-kopie (ademt, alleen opacity) + het toestel zelf.
   De gekleurde variant heeft géén gloed en start onzichtbaar. */
.device__white { position: absolute; left: 0; top: 0; }
.device__glow {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity var(--dur-camera) var(--ease-camera);
}
/* In FOCUS: geen gloed op de andere toestellen (ze zijn niet de highlight) */
.scene.is-focus .device:not(.is-active) .device__glow { opacity: 0; }
.device__img--glow {
  filter: var(--glow-idle);
  animation: dj-breathe 2.4s ease-in-out var(--breathe-delay, 0s) infinite alternate;
}
.device__img--color {
  opacity: 0;
  /* pop (hover) × ademen (zolang gekozen) */
  scale: calc(var(--pop, 0.97) * var(--breath, 1));
}

@keyframes dj-breathe {
  from { opacity: var(--glow-breathe-min, 0.75); }
  to   { opacity: 1; }
}

/* ---------- Lagen bij FOCUS ---------- */

.scene__bg--blur { filter: blur(2px); opacity: 0; }

.device.is-active { z-index: 3; }
.device.is-blurred { filter: blur(2px); }

.scene__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--dj-dim);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Hotspots & knoppen ---------- */

.scene__hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.scene__hotspot {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}
.scene.is-focus .scene__hotspot { cursor: default; }

.device-btn {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;   /* muis gaat via de polygonen */
  border-radius: calc(10px / var(--cam-s, 1));
}
/* Focusring blijft 3px op het scherm, ook als de camera inzoomt */
.device-btn:focus-visible {
  outline: calc(3px / var(--cam-s, 1)) solid var(--dj-blue);
  outline-offset: calc(4px / var(--cam-s, 1));
}
.scene.is-focus .device-btn:focus-visible { outline: none; }

/* ------------------------------------------------------------------ */
/* Modelnaam-label + spec-paneel (schermcoördinaten, volgt de camera)  */
/* ------------------------------------------------------------------ */

.device-info {
  --info-w: clamp(280px, 24vw, 340px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--info-w);
  pointer-events: none;
}
.device-info__panel {
  position: relative;
  padding: var(--space-6);
  visibility: hidden;
  opacity: 0;
  outline: none;
}
.device-info.is-open .device-info__panel { pointer-events: auto; }

.device-info__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}

/* ✕ in de kaart: klein en grijs, transparant rood bij hover (feedback) */
.device-info__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 30, 30, 0.07);
  color: var(--dj-text-muted);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.device-info__close:hover {
  background: rgba(229, 57, 53, 0.14);
  color: #D32F2F;
}
.device-info__close:focus-visible { outline: 2px solid var(--dj-blue); outline-offset: 2px; }
.device-info__close::before,
.device-info__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.75px;
  margin: -0.875px 0 0 -6px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.device-info__close::after { transform: rotate(-45deg); }
.device-info.is-open .device-info__label { padding-right: 32px; }

.device-info__label {
  width: max-content;
  max-width: 100%;
}

.device-info__name {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); /* iets kleiner dan --fs-label: past op één regel in de kaart */
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--dj-blue);
}

.device-info__bullets {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--dj-ink);
}
.device-info__bullets li {
  position: relative;
  padding-left: 1.1em;
}
.device-info__bullets li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.62em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: currentColor;
}

.device-info__more {
  margin-top: var(--space-4);
  visibility: hidden;
  opacity: 0;
}
.device-info__pitch {
  margin: var(--space-4) 0 0;
  color: var(--dj-text);
}
.device-info__specs {
  display: grid;
  margin: var(--space-4) 0;
  font-size: var(--fs-small);
}
/* Gestapeld: klein label boven de waarde (leest rustig, ook in een smalle kaart) */
.device-info__spec {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--space-2) 0 var(--space-2) 32px; /* links: ruimte voor het icoon */
  border-top: 1px solid rgba(30, 30, 30, 0.08);
}
.device-info__spec dt {
  color: var(--dj-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.device-info__spec dd {
  margin: 0;
  color: var(--dj-ink);
  font-size: var(--fs-body);
  font-weight: 500;
}


@media (prefers-reduced-motion: reduce) {
  .device__img--glow { animation: none; }
  .device { transition: none; }
}

/* ---------- Klik-hint (desktop): vlak onder het toestel, of erboven ---------- */

.device-hint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
}

/* ---------- Vorige/volgende-pijlen in FOCUS ---------- */

.focus-nav {
  position: absolute;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 40px;
  margin-top: -20px; /* cirkel verticaal gecentreerd op `top` */
  padding: 0;
  border: 0;
  background: none;
  color: var(--dj-text);
  font: 500 0.75rem / 1.2 var(--font-ui);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}
.focus-nav--prev { left: var(--space-4); }
.focus-nav--next { right: var(--space-4); }
.focus-nav__chev {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dj-surface-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-pill);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}
/* Chevron met twee CSS-lijnen */
.focus-nav__chev::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--dj-blue);
  border-right: 2px solid var(--dj-blue);
  transform: translate(-65%, -50%) rotate(45deg);
}
.focus-nav--prev .focus-nav__chev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.focus-nav:hover .focus-nav__chev { background: var(--dj-white); }
.focus-nav--next:hover .focus-nav__chev { transform: translateX(3px); }
.focus-nav--prev:hover .focus-nav__chev { transform: translateX(-3px); }
.focus-nav:focus-visible { outline: none; }
.focus-nav:focus-visible .focus-nav__chev { outline: 3px solid var(--dj-blue); outline-offset: 3px; }
.focus-nav__name { display: none; } /* alleen de pijl; de naam staat in aria-label */

/* ---------- Filmkorrel op de achtergrond ---------- */

.scene__grain {
  position: absolute;
  inset: -128px;
  z-index: 0;
  pointer-events: none;
  background-size: 256px 256px; /* 2 scene-px per korrel */
  animation: dj-grain 0.9s steps(1, end) infinite;
}
@keyframes dj-grain {
  0%   { transform: translate(0, 0); }
  11%  { transform: translate(-48px, 22px); }
  22%  { transform: translate(30px, -60px); }
  33%  { transform: translate(-90px, -18px); }
  44%  { transform: translate(64px, 40px); }
  55%  { transform: translate(-20px, 86px); }
  66%  { transform: translate(100px, -30px); }
  77%  { transform: translate(-70px, 60px); }
  88%  { transform: translate(40px, 104px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .scene__grain { animation: none; }
}

/* Mobiel: desktop-kaarten, klik-hints en pijlen bestaan niet (ze staan op
   desktop-posities en zouden de pagina breder maken) */
@media (max-width: 899px) {
  .device-info,
  .hint-pill.device-hint, /* .hint-pill (mobile.css) zet display anders weer aan */
  .focus-nav { display: none; }
}

/* HOVER: naam gecentreerd boven het toestel */
.device-info:not(.is-open) .device-info__label { text-align: center; }

/* "Ontdek de software ›" rechts uitgelijnd in de kaart en de sheet */
.device-info__more > .text-link,
.sheet > .text-link {
  display: block;
  width: max-content;
  margin-left: auto;
}

/* Spec-rij: klein lijn-icoon links van het label, waarde eronder uitgelijnd */
.device-info__spec-icon {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  color: var(--dj-blue);
  opacity: 0.85;
}