/* 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-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: clip;
  pointer-events: none;
}

.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); }
}
.scene__grain--img {
  width: calc(100% + 256px);
  height: calc(100% + 256px);
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .scene__grain { animation: none; }
}

/* ---------- Mobiel: lagen ---------- */

/* Mobiel (≤ 899px) zo weinig mogelijk lagen op kamergrootte. WebKit (iOS)
   rastert elke gecomposite laag op toestelresolutie, los van de camera-schaal:
   2560 × 1440 scène-px × 3 = 7680 × 4320 px = 132 MB per laag zodra de hele
   kamer in beeld is (staand model op een laag telefoonscherm). Vijf zulke lagen
   (geblurde achtergrond, korrel, fade, dim, hotspot-SVG) lieten Safari op een
   iPhone crashen bij het pannen naar het staand model ("A problem repeatedly
   occurred"). Daarom mobiel:
   - de desktop-lagen van FOCUS (blur, dim) staan niet in beeld;
   - de hotspot-SVG ook niet: tikken gaat via scene.deviceAt (scene-mobile.js);
   - achtergrond, korrel en fade zijn een <img> met een eigen laag. Een <img>
     zonder rand, achtergrond of filter krijgt zijn bitmap rechtstreeks als
     laaginhoud, zonder backing store op toestelresolutie (scene.js maakt de
     korrel en de fade als afbeelding). De scène zelf tekent dan niets meer.
   De controle zit in tools/audit/swipe.mjs ("geen geschilderde laag op
   kamergrootte"). */
@media (max-width: 899px) {
  .scene__bg--blur,
  .scene__dim,
  .scene__hotspots,
  .scene__grain--css { display: none; }
  .scene__bg { will-change: transform; }
}
@media (min-width: 900px) {
  .scene__grain--img { display: 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;
}

/* ------------------------------------------------------------------ */
/* Desktop: één schaal voor de hele compositie                          */
/* ------------------------------------------------------------------ */
/* Tagline, knop, links, modelnamen en klik-hints schalen met --u, in vaste
   verhouding tot de scene (scene.js zet --u; 1 = ontwerpmaat). Maten binnenin
   staan in em, zodat ze vanzelf meeschalen. Zo ziet de compositie er op elk
   scherm hetzelfde uit en vergroot browser-zoom alles samen. */
:root { --u: 1; }
@media (min-width: 900px) {
  .page .tagline { font-size: calc(2.75rem * var(--u)); }
  .page .tagline__sub {
    max-width: 34em;
    font-size: calc(1rem * var(--u));
  }
  /* Knoppen hangen net als de tagline op een vaste plek in de kamer (scene.js
     zet top elke camera-update, zie placeOverlays) */
  .page .actions {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 75vh;
    grid-row: auto;
    gap: calc(var(--space-5) * var(--u));
  }
  .page .actions .cta {
    width: calc(320px * var(--u));
    min-height: calc(52px * var(--u));
    padding: 0 1.333em;
    margin-bottom: 1.69em;
    font-size: calc(1.125rem * var(--u));
  }
  .page .text-links { gap: calc(var(--space-2) * var(--u)); }
  .page .actions .text-link { font-size: calc(var(--fs-link) * var(--u)); }

  .device-info:not(.is-open) .device-info__name { font-size: calc(2.5rem * var(--u)); }
  .hint-pill.device-hint {
    gap: 0.571em;
    padding: 0.5em 1em 0.5em 0.714em;
    font-size: calc(var(--fs-small) * var(--u));
  }
  .device-hint .hint-pill__dot { width: 0.571em; height: 0.571em; }
  .device-hint .hint-pill__dot::after { inset: -0.286em; }
}