/* Mobiel (≤ 899px): segmented control, tik-hint, bottom sheet met zwevend
   toestel (brief §2.6, §5 + feedback) */

/* ---------- Segmented control ---------- */

.switcher { display: none; }

.switcher__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: min(100%, 272px);
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--dj-toggle-track);
}
.switcher__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--count, 3));
  border-radius: var(--radius-pill);
  background: var(--dj-blue);
  box-shadow: 0 2px 8px rgba(0, 128, 255, 0.35);
  transition: transform var(--dur-med) var(--ease-out);
}
.switcher__tab {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--dj-white);
  font: 600 var(--fs-small) / 1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switcher__tab:focus-visible {
  outline: 2px solid var(--dj-white);
  outline-offset: -4px;
}

/* ---------- Hint-pil ("Tik/Klik voor meer info"): mobiel + desktop-hover ---------- */

.hint-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px 7px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  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);
  color: var(--dj-blue);
  font: 600 var(--fs-small) / 1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hint-pill__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dj-blue);
}
/* Pulserende ring: "hier kan je tikken" */
.hint-pill__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--dj-blue);
  opacity: 0;
  animation: dj-tap-pulse 1.8s var(--ease-out) infinite;
}
@keyframes dj-tap-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  80%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Mobiel: de hint hangt vast onder het actieve toestel */
.m-hint {
  display: none;
  position: absolute;
  z-index: 2;
  translate: -50% 0;
}

/* Mobiel: zachte blauwe ademende gloed aan de kant waar nog een model staat */
.m-edge {
  display: none;
  position: absolute;
  z-index: 2;
  width: 44px;
  padding: 0;
  border: 0;
  background: radial-gradient(ellipse 100% 50% at var(--edge-x) 50%, rgba(0, 128, 255, 0.5), rgba(0, 128, 255, 0) 100%);
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-edge--left  { left: 0;  --edge-x: 0%; }
.m-edge--right { right: 0; --edge-x: 100%; }
.m-edge:not(.is-on) { visibility: hidden; pointer-events: none; }
.m-edge.is-on {
  animation: dj-edge-breathe 2.6s ease-in-out infinite alternate;
}
@keyframes dj-edge-breathe {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

@media (max-width: 899px) {
  .switcher {
    display: flex;
    justify-content: center;
    margin: var(--space-3) 0 var(--space-4);
  }
  .m-hint { display: inline-flex; }
  .m-edge { display: block; }
  /* Horizontaal vegen = wisselen (scene-mobile.js); verticaal blijft scrollen.
     Ook op de zijgloed en de hint-pil: anders breekt de browser een veeg die
     daar begint af (pointercancel), en op iOS zoomt een dubbele tik erop. */
  .scene-viewport,
  .m-edge,
  .m-hint { touch-action: pan-y; }
}
/* Liggend (telefoon of browser-zoom): anders krimpt het scene-venster tot niets
   en valt het toestel achter de tekst. De pagina scrollt dan een stukje. */
@media (max-width: 899px) and (orientation: landscape) {
  .stage-spacer { min-height: 260px; }
}

/* ---------- Bottom sheet (glas-stijl staat in scene.css) ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(30, 30, 30, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-width: 560px;
  max-height: 60vh;
  max-height: 60dvh;
  margin-inline: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Extra ruimte onderaan: de browserbalk van smartphones mag niets bedekken */
  padding: 0 28px calc(var(--space-6) + 48px + env(safe-area-inset-bottom));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  outline: none;
}
.sheet[hidden],
.sheet-backdrop[hidden] { display: none; }

/* Greep + kop: hier kan je de sheet omlaag vegen */
.sheet__grab {
  position: relative;
  z-index: 3;
  padding: 10px 0 var(--space-3);
  touch-action: none;
  cursor: grab;
}
.sheet__handle {
  width: 40px;
  height: 5px;
  margin: 0 auto var(--space-3);
  border-radius: 3px;
  background: rgba(30, 30, 30, 0.18);
}
.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.sheet .device-info__bullets { margin-top: 0; }
.sheet .device-info__pitch { margin-top: var(--space-4); }

/* ✕: zelfde kleine grijze knop als op de desktop-kaart, iets groter voor duimen */
.sheet__close {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
  width: 32px;
  height: 32px;
  visibility: visible;
  opacity: 1;
}

/* Zwevend toestel boven de kaart (losgemaakt uit de kamer) */
.sheet-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 22;
  pointer-events: none;
}
.sheet-float__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 18px 16px rgba(30, 30, 30, 0.22));
}

html.sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hint-pill__dot::after { animation: none; }
  .m-edge.is-on { animation: none; opacity: 0.7; }
}

/* Waar de kamer ophoudt: zacht uitfaden naar de paginakleur i.p.v. een
   geblurde rand (vooral onder de CTA zichtbaar). Ook links en rechts: de
   camera klemt mobiel niet op de kamerrand (scene.js, toTransform), dus bij
   het staand model op een laag scherm komt de rechterrand net in beeld.
   Alleen mobiel. Het verloop zelf is een <img> die scene.js tekent (140 px
   boven, links en rechts; 260 px onder, in scène-px): een <img> met een eigen
   laag kost op iOS geen backing store op kamergrootte (scene.css, "Mobiel:
   lagen"). Zonder canvas valt hij terug op dezelfde CSS-verlopen. */
.scene__fade { display: none; }
@media (max-width: 899px) {
  .scene__backdrop { display: none; }
  .scene__fade {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    will-change: transform;
  }
  .scene__fade--css {
    background:
      linear-gradient(to right,
        var(--dj-scene-bg) 0, rgba(230, 224, 217, 0) 140px,
        rgba(230, 224, 217, 0) calc(100% - 140px), var(--dj-scene-bg) 100%),
      linear-gradient(to bottom,
        var(--dj-scene-bg) 0, rgba(230, 224, 217, 0) 140px,
        rgba(230, 224, 217, 0) calc(100% - 260px), var(--dj-scene-bg) 100%);
  }
}