/* De voordeur bij "Het werk" als 3D-scène (js/deur-3d.js).

   .deur-blok is het podium: een vast venster op de gevel met de deur, de stoep
   en de bel. Omdat de beeldverhouding vastligt, vallen de doorgang en de bel
   altijd op dezelfde plek. De procenten hieronder komen uit de scène; het
   script zet ze bij het laden opnieuw, en de stilstaande renders in img/ horen
   bij precies deze waarden.

   Lagen, van achter naar voor: de HTML achter de deur (.deur-achter), de
   stilstaande render (.deur, alleen zonder WebGL of met reduced motion, en
   tot de 3D-scène klaar is), het canvas, de bel. */

.deur-blok {
  --doorgang-l: 26.21%;
  --doorgang-t: 8.40%;
  --doorgang-b: 44.97%;
  --doorgang-h: 74.26%;
  --inhoud-l: 4.39%;
  --inhoud-r: 1.27%;
  --inhoud-t: 1.78%;
  --inhoud-o: 3.31%;
  --bel-x: 86.79%;
  --bel-y: 43.42%;

  position: relative;
  width: clamp(18rem, 27vw, 24rem);
  aspect-ratio: 212 / 304;
  margin: 0;
  container-type: inline-size;
}

.deur-blok .deur-kozijn {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  perspective: none;
}

/* Achter de deur: de gang, in licht. Echte HTML, gewoon leesbaar en
   selecteerbaar; het canvas erboven laat de muis door. */
.deur-blok .deur-achter {
  position: absolute;
  inset: auto;
  left: var(--doorgang-l);
  top: var(--doorgang-t);
  width: var(--doorgang-b);
  height: var(--doorgang-h);
  z-index: 0;
  display: grid;
  align-content: start;
  gap: 0.8em;
  padding:
    calc(var(--inhoud-t) + 1em)
    calc(var(--inhoud-r) + 0.8em)
    calc(var(--inhoud-o) + 0.6em)
    calc(var(--inhoud-l) + 0.8em);
  background: var(--wit);
  color: var(--navy);
  font-size: clamp(0.72rem, 3.6cqi, 0.86rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Dicht is de doorgang ook een bel (script.js). De tekst erachter is dan nog
   onzichtbaar en niet te selecteren, ook niet met dubbelklikken of lang
   drukken; dat hangt aan is-open, omdat aria-expanded al tijdens de wachttijd
   omslaat. */
.deur-blok:has(.deurbel[aria-expanded="false"]) .deur-achter { cursor: pointer; }
.deur-kozijn:has(> .deur:not(.is-open)) > .deur-achter {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.deur-blok .deur-welkom {
  font-family: var(--kopletter);
  font-weight: 900;
  font-size: 1.85em;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--blauw);
}
.deur-blok .deur-lijst {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--navy);
}
.deur-blok .deur-lijst li {
  display: grid;
  gap: 0.2em;
  padding: 0.65em 0 0.7em;
  border-left: 0;
  border-bottom: 1px solid var(--papier-rand);
  color: var(--inkt-zacht);
  font-size: 1em;
  line-height: 1.38;
}
.deur-blok .deur-lijst li:last-child { border-bottom: 0; }
.deur-blok .deur-lijst strong {
  font-family: var(--kopletter);
  font-weight: 800;
  font-size: 1.24em;
  letter-spacing: 0.02em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--navy);
}

/* De stilstaande deur: een render van dezelfde scène, dicht en open. De oude
   platte deur binnen .deur doet niet meer mee; .deur blijft alleen bestaan
   omdat script.js er de toestand op zet. */
.deur-blok .deur {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
  pointer-events: none;
}
.deur-blok .deur::before,
.deur-blok .deur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/deur-dicht.webp?v=2") center / 100% 100% no-repeat;
  transition: opacity 0.3s var(--uit);
}
.deur-blok .deur::after {
  background-image: url("img/deur-open.webp?v=2");
  opacity: 0;
}
.deur-blok .deur.is-open::before { opacity: 0; }
.deur-blok .deur.is-open::after { opacity: 1; }

.deur-3d-doek {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.deur-3d-actief .deur-3d-doek { opacity: 1; }
.deur-3d-actief .deur { visibility: hidden; }

/* De bel: een rvs-plaat op de gevel met een koningsblauwe drukknop. Het licht
   komt in de scène van rechtsboven, dus de schaduwen vallen naar linksonder. */
.deur-blok .deurbel {
  position: absolute;
  z-index: 3;
  left: var(--bel-x);
  top: var(--bel-y);
  right: auto;
  translate: -50% -1.625rem;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.3rem 0.3rem;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.deur-blok .deurbel .deurbel-knop {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(215deg, #f8f9fb 0%, #e1e6ec 40%, #b5bfca 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px rgba(0, 0, 0, 0.14),
    -1px 1.5px 1.5px rgba(0, 0, 0, 0.16),
    -4px 6px 10px -4px rgba(0, 0, 0, 0.36);
  transform: none;
  transition: none;
  animation: none;
}
/* De ring om de knop, een tint donkerder rvs */
.deur-blok .deurbel .deurbel-knop::before {
  content: "";
  grid-area: 1 / 1;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: linear-gradient(35deg, #f2f4f7 0%, #c5cdd6 45%, #8e9aa8 100%);
}
.deur-blok .deurbel .deurbel-knop::after {
  content: "";
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 64% 30%, #4a8edb 0%, var(--blauw) 48%, #003c80 100%);
  box-shadow:
    -1.5px 2.5px 3px rgba(0, 0, 0, 0.42),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.45);
  animation: none;
  transition: transform 0.18s var(--uit), box-shadow 0.18s var(--uit), filter 0.18s var(--uit);
}
.deur-blok .deurbel:active .deurbel-knop::after,
.deur-blok .deurbel.is-ingedrukt .deurbel-knop::after {
  transform: scale(0.88);
  box-shadow:
    -0.5px 0.75px 1px rgba(0, 0, 0, 0.48),
    inset 0 1px 2px rgba(0, 0, 0, 0.45);
  filter: brightness(0.88);
  transition-duration: 0.06s;
}
@media (hover: hover) {
  .deur-blok .deurbel:hover .deurbel-knop::after { filter: brightness(1.12); }
}
.deur-blok .deurbel-tekst {
  font-family: var(--kopletter);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}

/* Smaller dan de desktop: de breedte hangt aan het scherm, niet aan een
   procent. In een auto-kolom van het raster valt een procent naar nul, omdat
   het podium zelf geen inhoudsbreedte heeft. */
@media (max-width: 56rem) {
  .deur-blok {
    width: min(24rem, calc(100vw - 2 * var(--rand)));
    margin-top: 1.5rem;
  }
}
@media (max-width: 40rem) {
  .deur-blok {
    width: min(23rem, calc(100vw - 2 * var(--rand)));
    justify-self: center;
    margin: 0.5rem 0 0;
  }
}