/* Het shirt als 3D-scène (js/shirt-3d.js), op drie podia: de opening, het
   aanmeldblok en de transfer.

   .shirt-3d is het podium: het shirt (viewBox 400 bij 440) met erboven
   ruimte voor het hangertje en de knop, en rondom ruimte voor de schaduw en
   het zwaaien. In viewBox-maten loopt het podium van x -20 tot 420 en van
   y -54 tot 463, dus 440 bij 517 (gelijk aan 400 / 470). De breedte van het
   podium in de opening zet style.css per scherm; in het aanmeldblok en de
   transfer is het podium 110 procent van zijn blok, zodat het shirt zelf even
   breed blijft als het platte shirt daar was.

   Het platte shirt (het SVG) blijft voor de schermlezer in de pagina
   (opacity, geen visibility); het canvas is aria-hidden. Zet het script in de
   kop van index.html shirt-3d-wacht op html, dan is het SVG onzichtbaar tot
   het 3D-shirt zijn eerste beeld heeft. Dan krijgt het podium shirt-3d-actief
   en neemt het canvas het over. Zonder script, zonder WebGL2 of bij een fout
   ontbreekt die klasse en staat het SVG er gewoon.

   Het canvas steekt boven het podium uit, zodat het shirt bij de opening van
   boven in beeld kan vallen zonder tegen een rand af te knippen. Het script
   legt het 3D-shirt op de plek van het SVG, wat de maat ook is. */

.shirt-3d {
  --shirt-3d-verhouding: 440 / 517;
  position: relative;
  aspect-ratio: var(--shirt-3d-verhouding);
}

.aanmelden-shirt > .shirt-3d,
.transfer-podium > .shirt-3d {
  width: 110%;
  margin-inline: -5%;
  /* De ruimte onder de zoom (voor schaduw en zwaai) valt over wat eronder
     staat heen, zoals bij het platte shirt. */
  margin-bottom: -5.75%;
}

.shirt-3d > .shirt {
  position: absolute;
  left: 4.5455%;
  top: 10.4449%;
  width: 90.9091%;
  height: auto;
  transition: opacity 0.3s var(--uit, cubic-bezier(0.16, 1, 0.3, 1));
}
.shirt-3d-wacht .shirt-3d > .shirt { opacity: 0; transition: none; }
/* Kwam het 3D-shirt in de opening pas na het opgeven, dan gaat het platte
   shirt meteen zacht weg terwijl het 3D-shirt binnenvalt. */
.shirt-3d-actief.shirt-3d-laat > .shirt { transition: opacity 0.2s ease-out; }

.shirt-3d-doek {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 118%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--uit, cubic-bezier(0.16, 1, 0.3, 1));
}
.shirt-3d-actief > .shirt-3d-doek { opacity: 1; }
/* Het WebGL-canvas staat boven de stilstaande kopie en zet zijn eigen
   dekking tijdens de val bij de opening. */
.shirt-3d-levend { transition: none; }
.shirt-3d-actief > .shirt {
  opacity: 0;
  transition: opacity 0s 0.25s;
}

/* Aan het shirt zitten: horizontaal slepen draait het, verticaal vegen
   blijft de pagina scrollen. */
.shirt-3d-actief {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.shirt-3d-actief.shirt-3d-sleept { cursor: grabbing; }