/* Singerhaus Startbildschirm. Solange html.intro gesetzt ist, bleibt die Seite darunter unsichtbar. */

html.intro body { background: #080706; }
html.intro .frame,
html.intro .dock,
html.intro .cord,
html.intro .skip { visibility: hidden; }

.intro {
  /* Platte und Schrift teilen sich die Breite: links "SINGER", rechts "HAUS" */
  --s0: min(50vh, 34vw);
  --f: min(calc((50vw - 64px - var(--s0) / 2) / 5.6), 11vh);
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #F1E8D6;
  cursor: pointer;
}
.intro-bg { position: absolute; inset: 0; background: #080706; }
.intro-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--s0) * 2.7);
  aspect-ratio: 1;
  margin: calc(var(--s0) * -1.35) 0 0 calc(var(--s0) * -1.35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 90, .2) 0%, rgba(161, 75, 53, .08) 36%, rgba(0, 0, 0, 0) 66%);
  pointer-events: none;
}
.intro-rec {
  position: relative;
  width: var(--s0);
  aspect-ratio: 1;
  will-change: transform;
}
.intro-tt { width: 100%; }
.intro .tt-arm, .intro .tt-hit { display: none; }

.intro-w {
  position: absolute;
  top: 50%;
  /* TAN Ashford sitzt hoch in der Zeile: .165em nach unten bringt die Buchstaben auf Plattenmitte */
  margin-top: calc(-.5em + .165em);
  font-family: var(--display);
  font-size: var(--f);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.intro-w1 { right: calc(50% + var(--s0) / 2 + 34px); }
.intro-w2 { left: calc(50% + var(--s0) / 2 + 34px); }
.intro-w0 { display: none; }

.intro-claim {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + var(--s0) / 2 + clamp(18px, 4vh, 44px));
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.2;
  color: #D9C08A;
}

/* Hochformat und schmale Fenster: Logo in einer Zeile über der Platte */
@media (max-width: 760px), (max-aspect-ratio: 1 / 1) {
  .intro { --s0: min(64vw, 42vh); }
  .intro-w1, .intro-w2 { display: none; }
  .intro-w0 {
    display: block;
    left: 0; right: 0;
    top: calc(50% - var(--s0) / 2 - 1.75em);
    margin-top: 0;
    text-align: center;
    font-size: min(10.4vw, 64px);
  }
}