/* ============================================================================
   tc-entrance — die Schwelle zu einem Ort (05.09.2026, Taskwerk #435)
   ----------------------------------------------------------------------------
   Aus `.ug-eingang` in css/untergrund.css herausgeloest. Ein Vollbild-Moment
   beim ersten Betreten: ein grosses Zeichen faellt herab, ein Satz steigt auf,
   nach knapp zwei Sekunden blendet alles aus.

   Briefing Par. 7.3: „Eintritts-Moment beim ersten Betreten pro Session
   (danach direkt laden — Inszenierung darf nie zur Wartezeit-Strafe werden)."

   ⚠️ DIE SITZUNGSPRUEFUNG STEHT IM JS, NICHT HIER. Sie ist die eigentliche
   Regel: Ein Effekt, der bei jedem Klick wiederkommt, ist beim dritten Mal
   eine Wartezeit. Der Merker liegt in `sessionStorage`
   (js/ui/untergrund-eintritt.js).

   VERWENDUNG
     <div class="tc-entrance" aria-hidden="true">
       <div class="tc-entrance__zeichen">🕯️</div>
       <p class="tc-entrance__text">Die Stufen hinab.</p>
     </div>

   Das Element wird vom JS erzeugt und nach 2200 ms wieder entfernt. Der Text
   gehoert dem Ort, nicht der Komponente — der Untergrund riecht nach Wachs,
   die Zitadelle nach etwas anderem.

   PARAMETER
     --tc-entrance-oben / --tc-entrance-unten   der Grund, auf dem es passiert
     --tc-entrance-dauer                        wie lange der Moment steht

   ⚠️ DER REDUCED-MOTION-BLOCK STAND 850 ZEILEN WEITER UNTEN — und genau das
   ist der Grund, warum er hier mitkommen musste. In css/untergrund.css lag er
   zentral am Dateiende (Abschnitt 6), zusammen mit den Muenzen und den
   Raeumen; beim Herausheben faellt so etwas leicht durchs Raster. Der erste
   Entwurf dieses Kommentars behauptete deshalb, es gebe gar keinen — falsch,
   und die Sorte Fehler, gegen die CLAUDE.md Par. 13/3 warnt.
   Eine Komponente traegt ihre Bewegungsregel selbst, direkt unter den
   Animationen, die sie betrifft.

   ⚠️ UND `animation: none` WAERE DER SCHLIMMERE FEHLER. `tc-entrance-aus`
   ist die Animation, die das Overlay WEGNIMMT (`opacity: 0`,
   `visibility: hidden`, `forwards`). Wer sie abschaltet, bekommt ein
   Vollbild-Overlay, das ueber der ganzen Seite stehen bleibt — bei
   `z-index: 9000` ueber allem. Das JS raeumt es zwar nach 2200 ms weg, aber
   bis dahin ist die Seite unbedienbar.
   Deshalb das Muster aus Par. 9: Dauer auf 0,01 ms, ein Durchlauf, negative
   Verzoegerung. Ergebnis bei reduzierter Bewegung: Die Schwelle wird
   uebersprungen statt vorgefuehrt — genau das, was jemand mit dieser
   Einstellung will.
   ========================================================================== */

.tc-entrance {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Die Safe-Area gehoert dazu: Der Moment ist Vollbild, und auf einem
     Geraet mit Ausschnitt laege der Text sonst darunter. */
  padding: calc(var(--tc-safe-top, 0px) + 24px) 24px
           calc(var(--tc-safe-bottom, 0px) + 24px);
  background: linear-gradient(180deg,
    var(--tc-entrance-oben, #0d0a07) 0%,
    var(--tc-entrance-unten, #14100c) 100%);
  text-align: center;
  animation: tc-entrance-aus 620ms ease-in var(--tc-entrance-dauer, 1100ms) forwards;
}

.tc-entrance__zeichen {
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  line-height: 1;
  filter: drop-shadow(0 0 18px var(--tc-accent-glow));
  animation: tc-entrance-hinab 900ms cubic-bezier(0.35, 0, 0.2, 1) both;
}

.tc-entrance__text {
  font-family: Cinzel, serif;
  font-size: clamp(1rem, 4.4vw, 1.35rem);
  color: var(--tc-highlight);
  letter-spacing: 0.06em;
  /* 26 Zeichen je Zeile — ein Satz, den man im Vorbeigehen liest, darf nicht
     ueber die ganze Breite laufen. */
  max-width: 26ch;
  animation: tc-entrance-auf 700ms ease-out 260ms both;
}

@keyframes tc-entrance-hinab {
  from { opacity: 0; transform: translateY(-26px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tc-entrance-auf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tc-entrance-aus {
  to { opacity: 0; visibility: hidden; }
}

/* ⚠️ NICHT `animation: none` — siehe den Kasten oben. Die Ausblendung ist
   die Animation, die das Overlay wegnimmt; ohne Endzustand bliebe es
   stehen. Vorlage: das Ende von css/dashboard.css. */
@media (prefers-reduced-motion: reduce) {
  .tc-entrance,
  .tc-entrance__zeichen,
  .tc-entrance__text {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    animation-delay: -1ms;
  }
}