/* Die Insel (insel.js): schwarze Form, die aus der Dynamic Island waechst.
   Zu: exakt die Masse der Insel, unsichtbar davor. Offen: breite Karte mit
   den Augen. Die Masse setzt insel.js als Variablen, gemessen am Geraet. */
.insel {
  position: fixed;
  left: 50%;
  top: var(--insel-top, 11px);
  width: var(--insel-w, 126px);
  height: var(--insel-h, 37px);
  transform: translateX(-50%);
  border-radius: calc(var(--insel-h, 37px) / 2);
  background: #000;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  /* Erst die Breite, dann die Hoehe: so wirkt es wie Siri, nicht wie ein Fenster. */
  transition:
    width .42s cubic-bezier(.2, .9, .2, 1.05),
    height .46s cubic-bezier(.2, .9, .2, 1.05) .04s,
    border-radius .4s ease,
    opacity .18s ease;
}
/* Ohne Insel ist die zugeklappte Form nicht zu sehen; mit Insel deckt sie die echte Insel exakt und ist dadurch ebenfalls unsichtbar. */
.insel[data-insel="ja"] { opacity: 1; }
.insel.insel--offen,
.insel.insel--geht { opacity: 1; }
.insel.insel--offen {
  width: var(--offen-w, 340px);
  height: var(--offen-h, 150px);
  border-radius: 34px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.insel canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease .12s;
}
.insel.insel--offen canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .insel { transition: none; }
}