/*
 * Hero-Layout (Login).
 *
 * Mobile-first, alles zentriert auf der Wordmark-Achse. Die zwei
 * Choices („Ich bin neu" + „Ich kenne meine Phrase") und das
 * Phrase-Formular werden progressiv getauscht (siehe scripts/login.mjs).
 */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s2);
  padding-inline: var(--s1);
}

.hero .wordmark-link--hero {
  display: inline-block;
}

.hero__tagline {
  /* Bug 110: --s0 → --s1, gleicht der Onboarding-Intro
     (.onboarding__welcome-intro) an. Vorher 25-40 % kleiner →
     spürbarer Sprung in der Body-Größe beim Klick „Ich bin neu".
     max-inline-size 30ch bleibt, Tagline bricht weiterhin in
     zwei Zeilen. */
  font-size: var(--s1);
  color: var(--color-darkish);
  margin: 0;
  max-inline-size: 30ch;
}

/* ----- Initial-Buttons + Phrase-Formular Sichtbarkeit ----- */

/* Ohne JS-Flag: beide Bereiche sichtbar (Fallback). */
.hero__choice,
.hero__phrase-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s0);
  inline-size: 100%;
  max-inline-size: 26rem;
}

/* Mit JS aktiviert: nur der State-passende Bereich sichtbar. */
.hero[data-hero-js="1"][data-hero-state="initial"] .hero__phrase-form {
  display: none;
}
.hero[data-hero-js="1"][data-hero-state="phrase"] .hero__choice {
  display: none;
}

/* Smooth fade-in des erscheinenden Bereichs. */
.hero[data-hero-js="1"] .hero__choice,
.hero[data-hero-js="1"] .hero__phrase-form {
  animation: hero-fade-in 200ms ease-out;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ----- Buttons: kompakt + Touch-Target ≥ 48px ----- */

.btn--large {
  font-size: var(--s0);
  padding-inline: var(--s2);
  padding-block: var(--s-1);
  min-block-size: 3rem;          /* 48px Touch-Target */
  inline-size: 100%;
  max-inline-size: 22rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero__phrase-label {
  margin: 0;
  text-align: center;
}

/* Bug 38: Login-Fehlermeldung. Dezent rot, nicht aufdringlich, lehnt
   sich an den Stil der Hint-Texte an. Kein Token im Theme — wir
   nutzen nur hier eine Akzentfarbe und halten sie an einer Stelle. */
.hero__error {
  margin: 0;
  text-align: center;
  font-size: var(--s-1);
  color: #a13728;
  max-inline-size: 22rem;
  line-height: var(--ratio);
}

.hero__phrase-form .input--phrase {
  inline-size: 100%;
  max-inline-size: 22rem;
  text-align: center;
  min-block-size: 3rem;
}

.hero__back-link {
  margin-block-start: var(--s0);
  font-size: var(--s-1);
  color: var(--color-mid);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hero__back-link:hover,
.hero__back-link:focus-visible {
  color: var(--color-darkish);
}