/* De cel: alleen het toestel, zo groot als het scherm toelaat. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0a0b0c;
  color: #e7dcc4;
  font: 15px/1.45 -apple-system, "SF Pro Text", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.podium {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: #0a0b0c;
}
/* telefoon: het hele scherm. De textuur vult alles; de plaat met het
   toestel staat op schermbreedte (rust in het midden, opgenomen bovenaan). */
.toestel {
  position: fixed; inset: 0;
  overflow: hidden;
  overflow: clip;      /* niet programmatisch te verschuiven (focus, scrollIntoView) */
  background: #0a0b0c;
}
/* groot scherm: een telefoonkader in het midden */
@media (min-width: 600px) and (min-height: 500px) {
  .toestel {
    position: relative; inset: auto;
    aspect-ratio: var(--verhouding, 390 / 844);
    height: min(94dvh, 844px);
    border-radius: 34px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  }
}
/* Van rust naar opgenomen als camerabeweging: de rustplaat zoomt richting
   de schijf en vervaagt, de textuur beweegt langzamer mee (parallax), en de
   lagen van de close-up komen elk net iets anders binnen. Terug bij ophangen. */
.kader {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1);
}
.kader.zichtbaar { opacity: 1; pointer-events: auto; }
/* 13-10 (iPhone): de hoorn van de close-up heeft inline pointer-events:auto (ophangen buiten de plaat).
   Zolang die close-up onzichtbaar is, mag hij geen tik opvangen: op een smal scherm ligt hij precies
   over de hoorn in rust, en dan ging de hoorn niet op. */
.kader:not(.zichtbaar) .laag.hoorn { pointer-events: none !important; }
.kader .textuur, .kader .plaat, .kader.opgenomen .laag:not(.rotor) {
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.kader.opgenomen .laag.hoorn { transition: transform .95s cubic-bezier(.16,.8,.24,1) .08s; }
.kader.opgenomen:not(.zichtbaar) .laag.hoorn { transform: translate(-2.5%, 3%) scale(1.16); }
/* in de close-up hangt de hoorn los aan het snoer: heel zacht schommelen,
   pas als de overgang klaar is */
@keyframes schommel {
  0%   { transform: rotate(-.9deg); }
  100% { transform: rotate(1.1deg); }
}
.kader.opgenomen.zichtbaar .laag.hoorn { animation: schommel 5.5s ease-in-out 1.1s infinite alternate; }
@media (prefers-reduced-motion: reduce) { .kader.opgenomen.zichtbaar .laag.hoorn { animation: none; } }
.kader.rust .plaat { transform-origin: 50% 44%; }
.kader.rust:not(.zichtbaar) .plaat { transform: translate(-50%, -50%) scale(1.35); }
.kader.rust:not(.zichtbaar) .textuur { transform: scale(1.06); }
.kader.opgenomen .plaat { transform-origin: 50% 40%; }
.kader.opgenomen:not(.zichtbaar) .plaat { transform: scale(.9); }
.kader.opgenomen:not(.zichtbaar) .textuur { transform: scale(.97); }
.kader.opgenomen:not(.zichtbaar) .laag:nth-child(2) { transform: translateY(1.5%); }
.kader.opgenomen:not(.zichtbaar) .laag:nth-child(3) { transform: translateY(2.5%); }
.kader.opgenomen .laag:nth-child(2) { transition-delay: .06s; }
.kader.opgenomen .laag:nth-child(3) { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .kader, .kader .textuur, .kader .plaat, .kader .laag { transition-duration: .15s; transition-delay: 0s; }
  .kader:not(.zichtbaar) .plaat, .kader:not(.zichtbaar) .textuur, .kader:not(.zichtbaar) .laag { transform: none; }
  .kader.rust:not(.zichtbaar) .plaat { transform: translate(-50%, -50%); }
}
.kader.boven-hoorn { cursor: pointer; }
.kader img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}
.plaat {
  position: absolute; left: 0; width: 100%;
  aspect-ratio: var(--verhouding, 390 / 844);
}
.kader.rust .plaat { top: 50%; left: 50%; width: var(--rust-b, 100%); transform: translate(-50%, -50%); }
.kader.opgenomen .plaat { top: var(--opg-top, 0); }
/* textuur mag uitrekken; het toestel zelf nooit */
.textuur { object-fit: fill; }
.toestelgroep { position: absolute; inset: 0; pointer-events: none; }
.opschrift { inset: auto; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
  opacity: 0; transform: translateY(6px); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.toestel[data-bedankt="ja"] .opschrift { opacity: 1; transform: none; }
.titel { inset: auto; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition: opacity .6s ease; }
.toestel[data-bedankt="ja"] .titel { opacity: 0; }
.logo { position: absolute; transform: translate(-50%, -50%); opacity: .75; pointer-events: none;
  --asterisk-size: calc(var(--rust-b, 100vw) * var(--logo-frac, .11)); max-width: 80px; max-height: 80px; }
.laag { object-fit: cover; }
.lamp { opacity: 0; transition: opacity .12s ease-out; }
.lamp.aan { opacity: 1; }

.gaten { position: absolute; inset: 0; pointer-events: none; }
.gat, .knop {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0; padding: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation;
}
/* alleen in de zichtbare stand; anders vangen onzichtbare gaten de klik */
.kader.zichtbaar .gat, .kader.zichtbaar .knop { pointer-events: auto; }
.gat.geraakt { background: rgba(0,0,0,.15); }
.gat:focus-visible, .knop:focus-visible { outline: 2px solid #e7dcc4; outline-offset: 2px; }


/* meldingen: fouten en 'geen microfoon' blijven nooit stil */
.melding {
  position: absolute; left: 5%; right: 5%; bottom: 4%;
  z-index: 10;
  padding: 12px 14px;
  background: rgba(10,11,12,.9);
  border: 0;
  border-radius: 10px;
  font: 400 15px/1.35 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: #eacea6; text-align: center;
}
.melding[hidden] { display: none; }
.melding.fout { border: 0; }
.melding p { margin: 0 0 10px; line-height: 1.4; }
.micknop { display: block; width: 100%; padding: 13px 16px; border: 0; border-radius: 8px;
  background: #eacea6; color: #15130f; font: 500 17px/1 'Oswald', 'Arial Narrow', sans-serif;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.micknop:disabled { opacity: .6; }

.regie {
  position: absolute; right: 8px; top: 8px; z-index: 11;
  display: flex; gap: 6px; align-items: center;
  padding: 6px 8px; font-size: 11px;
  background: rgba(10,11,12,.85); border-radius: 8px;
}
.regie[hidden] { display: none; }
.regie select, .regie button { font: inherit; }

/* De pick-up-pijl (pijl.js): dobbert, en draait om de Y-as naar de tekst. */
.pijl { position: absolute; aspect-ratio: 60 / 200; perspective: 600px; pointer-events: none; }
.pijl-voor { animation: dobber .9s ease-in-out infinite alternate; }
.pijl-kaart { position: absolute; inset: 0; transform-style: preserve-3d;
  animation: pijldraai 6s cubic-bezier(.6,0,.3,1) infinite; }
.pijl-kant { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pijl-kant svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.pijl-achter { transform: rotateY(180deg); }
/* na het gesprek (Dank u!) is opnemen niet de bedoeling: de pijl weg */
.pijl { transition: opacity .6s ease; }
.toestel[data-bedankt="ja"] .pijl { opacity: 0; }
@keyframes dobber { from { transform: translateY(8%); } to { transform: translateY(-12%); } }
@keyframes pijldraai { 0%, 42% { transform: rotateY(0); } 52%, 88% { transform: rotateY(180deg); } 98%, 100% { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .pijl-voor, .pijl-kaart { animation: none; } }

/* 12-10: de omgeving van de close-up, alleen op een breed kader (op mobiel valt hij weg) */
.kader .omgeving { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: none;
  transform-origin: 50% 40%; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.kader.opgenomen:not(.zichtbaar) .omgeving { transform: scale(.9); }
@media (min-width: 600px) and (min-height: 500px) { .kader .omgeving { display: block; } }