:root {
  --audio-pad-x: 0.5rem;
  --audio-name-height: 35vh;
}

html.audio-was-started #startOverlay {
  display: none;
}

#stage.is-running #startOverlay,
html.audio-was-started #startOverlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.audio-was-started #startOverlay {
  display: none;
}

/* =========================
   AUDIO OVERLAY
========================= */

#stage {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}

/* weißer Verlauf unten */
#stage::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--audio-name-height);
  z-index: 0;

  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 20%,
    rgba(255, 255, 255, 0) 100%
  );

  pointer-events: none;
}

/* =========================
   START BUTTON
========================= */

#startBtn {
  position: static;

  transform: none;

  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 3rem;
  line-height: 1;

  padding: 0.35rem 1.4rem;

  background: #000;
  color: #fff;

  border: 0;
  border-radius: 999px;

  cursor: pointer;
  pointer-events: auto;

  transition: transform 0.25s ease;
}

#startBtn:hover {
  transform: scale(1.08);
}

#stage.is-running #startBtn {
  display: inline-flex;
}

/* =========================
   DEBUG
========================= */

#debug {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;

  z-index: 100000;

  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
 
  color: #e0e0e0;
  /* opacity: 0.2; */

  user-select: none;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* =========================
   NAME
========================= */

#nameWrap {
  position: fixed;
  left: var(--audio-pad-x);
  right: var(--audio-pad-x);
  bottom: 0;

  z-index: 1;

  overflow: visible;
  pointer-events: none;
}

#name {
  display: inline-flex;
  align-items: flex-end;

  width: max-content;
  max-width: none;

  white-space: nowrap;

  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 900;
  font-style: normal;

  font-size: 100px;
  line-height: 0.78;
  letter-spacing: -0.015em;

  color: #000;

  pointer-events: none;
}

/* Farben je Unterseite */

.page-info #name {
  color: var(--color-info);
}

.page-kalender #name {
  color: var(--color-calendar);
}

.page-medien #name {
  color: var(--color-media);
}

/* Einzelbuchstaben */

.letter,
.space {
  display: inline-block;
  flex: 0 0 auto;

  transform-origin: 50% 100%;
  will-change: transform;
}

.space {
  width: 0.2em;
}

/* =========================
   MOBILE
========================= */

@media screen and (max-width: 768px) {
  :root {
    --audio-pad-x: 0.5rem;
  }

  #name {
    line-height: 0.82;
  }

  #startBtn {
    font-size: 4rem;
    padding: 0.3rem 1.4rem;
    bottom: 1rem;
  }

  #debug {
    display: none;
  }
}

/* weißes Start-Overlay vor Mikrofonfreigabe */

#startOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000000000;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;

  /* background: rgba(255, 255, 255, 0.85); */

  pointer-events: auto;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

#stage.is-running #startOverlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#startText {
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;

  color: #000;
  text-align: center;

  max-width: 10rem;
}