/* =============================================================
   10 — Begrüßungsbühne des Projektraums (Variante A, Testlauf)
   "Der Vorhang": warmer Marken-Fond über der geladenen Seite,
   Anrede blendet ein, roter Lichtstreifen zeichnet sich, dann der
   Projekttitel; danach gleitet die Bühne von selbst nach oben weg
   (reine CSS-Animation, läuft auch ohne JavaScript). app.js
   ergänzt Überspringen per Klick und "nur beim ersten Besuch".
   Bewusst OHNE Wortmarke (Entscheidung 2026-08-20); das
   Cover-Kino (Variante C) wurde getestet und verworfen.
   Wird als letzte Sektion geladen (Kaskade).
   ============================================================= */

.cl-entrance {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%,
      rgba(178, 58, 46, .10), rgba(178, 58, 46, 0) 55%),
    var(--surface, #F4EFE9);
  /* Fallback-Abgang: der Kunde betritt den Raum normalerweise
     bewusst über den Knopf; der Countdown beginnt erst nach dem
     vollständigen Aufbau (Sekunde 3) und zählt 6 Sekunden, dann
     gleitet die Bühne von selbst weg (Sekunde 9; deckt auch den
     Fall ohne JavaScript ab). */
  animation: clEntranceAway 1s cubic-bezier(.65, 0, .35, 1) 9s forwards;
}
/* Klick/Knopf: dieselbe Aufwärts-Bewegung, nur sofort. Bewusst
   eigene Keyframes: nur ein geänderter animation-name startet die
   Animation sicher neu (ein blosses Nullsetzen der Verzögerung
   liesse die längst "abgelaufene" Animation ans Ende springen =
   hartes Verschwinden). */
.cl-entrance.is-leaving {
  animation: clEntranceLeave .9s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes clEntranceLeave {
  to { transform: translateY(-102%); visibility: hidden; }
}
.cl-entrance.is-leaving .cl-entrance-count { display: none; }
.cl-entrance.is-gone {
  display: none;
  animation: none;
}
@keyframes clEntranceAway {
  to { transform: translateY(-102%); visibility: hidden; }
}

/* -- Countdown: grosse, dezente Ziffer hinter dem Inhalt -- */
.cl-entrance-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cl-entrance-count span {
  position: absolute;
  font-family: var(--font-serif);
  font-size: clamp(220px, 44vw, 480px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  animation: clEntranceCount 1s linear forwards;
}
@keyframes clEntranceCount {
  0%   { opacity: 0;   transform: scale(1.06); }
  20%  { opacity: .06; transform: scale(1.02); }
  80%  { opacity: .06; transform: scale(.99); }
  100% { opacity: 0;   transform: scale(.94); }
}

.cl-entrance-inner {
  position: relative;
  max-width: 680px;
}

.cl-entrance-greet {
  font-size: 16px;
  color: var(--text-2);
  opacity: 0;
  animation: clEntranceRise .8s ease .25s forwards;
}

/* Roter Lichtstreifen: zeichnet sich von der Mitte aus */
.cl-entrance-line {
  display: block;
  height: 2px;
  width: 180px;
  margin: 20px auto 24px;
  background: linear-gradient(90deg,
    rgba(178, 58, 46, 0), var(--accent), rgba(178, 58, 46, 0));
  box-shadow: 0 0 14px rgba(178, 58, 46, .55);
  transform: scaleX(0);
  animation: clEntranceLine .9s cubic-bezier(.2, .7, .3, 1) .6s forwards;
}
@keyframes clEntranceLine { to { transform: scaleX(1); } }

.cl-entrance-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  opacity: 0;
  animation: clEntranceRise .9s ease .95s forwards;
}
.cl-entrance-intro {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 560px;
  margin: 18px auto 0;
  opacity: 0;
  animation: clEntranceRise .9s ease 1.35s forwards;
}

/* Ansprechpartner: Avatar + Zeile */
.cl-entrance-presenter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-2);
  opacity: 0;
  animation: clEntranceRise .8s ease 1.7s forwards;
}
.cl-entrance-presenter img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(42, 36, 32, .18);
}

/* Betreten-Knopf: der bewusste Schritt in den Raum. Daneben
   erscheint bei offenen Punkten der "Wartet auf Sie"-Knopf. */
.cl-entrance-enter {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: clEntranceRise .8s ease 2s forwards;
}
.cl-entrance-waiting {
  color: var(--accent);
  border-color: rgba(178, 58, 46, .35);
}

@keyframes clEntranceRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduzierte Bewegung: Bühne komplett aus (zusätzlich zum JS). */
@media (prefers-reduced-motion: reduce) {
  .cl-entrance { display: none; }
}

/* -- Sanfter Auftritt der Gate-Karte (PIN- und Fehlerseiten) -- */
.gate-card {
  animation: clEntranceRise .7s cubic-bezier(.2, .7, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .gate-card { animation: none; }
}