/* =========================================================================
   Eingangsseite: Auftakt-Animation und die Frage nach der Stimmung

   Der Ablauf dauert rund 3,8 Sekunden:
     0,0 s   alles schwarz
     0,3 s   der Vorhang geht auf, der Nebel wird sichtbar
     1,6 s   das Auge kommt von rechts oben herein
     2,3 s   der Schriftzug schiebt sich von links in die Mitte
     2,8 s   die Frage
     3,2 s   die beiden Hälften fahren aus der Mitte auseinander

   ---> Schneller oder langsamer: unten bei den animation-delay-Werten
        alles gleichmäßig hoch- oder runterrechnen.
   ========================================================================= */

.tor-seite {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ------------------------------------------------------------- Vorhang */

.vorhang {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #000;
  pointer-events: none;
  animation: aufgehen 2.2s cubic-bezier(.4, 0, .2, 1) 0.3s forwards;
}

@keyframes aufgehen {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ------------------------------------------------------------- Auge */

.auge--tor {
  --auge-groesse: 17vmin;
  --auge-oben: 8vh;
  --auge-rechts: 8vw;
  opacity: 0;
  animation: auge-rein 1.1s cubic-bezier(.2, .9, .3, 1) 1.6s forwards;
}

@keyframes auge-rein {
  from { opacity: 0; scale: 0.4; translate: 4vw -3vh; }
  to   { opacity: 1; scale: 1;   translate: 0 0; }
}

/* ------------------------------------------------------------- Inhalt */

.tor-inhalt {
  position: relative;
  z-index: 10;
  width: min(100% - 2.5rem, 64rem);
  text-align: center;
  padding-block: 3rem;
}

.tor-marke {
  margin: 0 auto 2.5rem;
  max-width: min(36rem, 82%);
  opacity: 0;
  animation: von-links 1s cubic-bezier(.2, .9, .3, 1) 2.3s forwards;
}
.tor-marke img {
  width: 100%;
  filter: drop-shadow(0 0 2.5rem rgb(255 47 160 / 0.35));
}

@keyframes von-links {
  from { opacity: 0; translate: -14vw 0; }
  to   { opacity: 1; translate: 0 0; }
}

.tor-frage {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
  color: var(--bone);
  opacity: 0;
  animation: von-links 1s cubic-bezier(.2, .9, .3, 1) 2.8s forwards;
}

/* ---------------------------------------------------------- Die Waage */

.waage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Die Formen füllen ihre Fläche nur zur Hälfte, deshalb rücken sie
     hier zusammen — sonst klafft in der Mitte ein Loch. */
  gap: 0;
  align-items: start;
}

.halb {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-decoration: none;
  padding: 1rem 0.5rem;
  opacity: 0;
  border-radius: 2px;
}
.halb--hell   { animation: aus-mitte-links  0.9s cubic-bezier(.2, .9, .3, 1) 3.2s forwards; }
.halb--dunkel { animation: aus-mitte-rechts 0.9s cubic-bezier(.2, .9, .3, 1) 3.2s forwards; }

@keyframes aus-mitte-links {
  from { opacity: 0; translate: 30% 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes aus-mitte-rechts {
  from { opacity: 0; translate: -30% 0; }
  to   { opacity: 1; translate: 0 0; }
}

.halb__zeichen {
  display: block;
  width: clamp(7rem, 24vw, 13rem);
  aspect-ratio: 1;
  transition: translate 400ms cubic-bezier(.2,.8,.3,1), filter 400ms;
}
/* Beim Überfahren rücken die beiden Hälften zusammen */
.halb--hell:hover .halb__zeichen,
.halb--hell:focus-visible .halb__zeichen {
  translate: 1.1rem 0;
  filter: drop-shadow(0 0 1.5rem rgb(239 230 221 / 0.5));
}
.halb--dunkel:hover .halb__zeichen,
.halb--dunkel:focus-visible .halb__zeichen {
  translate: -1.1rem 0;
  filter: drop-shadow(0 0 1.5rem rgb(229 20 63 / 0.6));
}

.halb__wort {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1;
  color: var(--bone);
  transition: color 240ms;
}
.halb--hell:hover .halb__wort   { color: #fff; }
.halb--dunkel:hover .halb__wort { color: var(--iris); }

.halb__zeile {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- Fußzeile */

.tor-fuss {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  opacity: 0;
  animation: aufblenden 1s ease 3.9s forwards;
}
.tor-fuss a {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
  transition: color 200ms, border-color 200ms;
}
.tor-fuss a:hover { color: var(--bone); border-bottom-color: var(--filament); }

@keyframes aufblenden { to { opacity: 1; } }

/* -------------------------------------------------------- Überspringen */

.ueberspringen {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 40;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgb(7 5 16 / 0.6);
  border: var(--rand);
  color: var(--muted);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 200ms, border-color 200ms, opacity 400ms;
}
.ueberspringen:hover { color: var(--bone); border-color: var(--bone); }
/* Wenn die Animation durch ist, wird der Knopf nicht mehr gebraucht */
.tor-seite[data-fertig="true"] .ueberspringen { opacity: 0; pointer-events: none; }

/* ------------------------------------------- Ohne Auftakt (Wiederbesuch) */

.tor-seite[data-sofort="true"] .vorhang { display: none; }
.tor-seite[data-sofort="true"] .auge--tor,
.tor-seite[data-sofort="true"] .tor-marke,
.tor-seite[data-sofort="true"] .tor-frage,
.tor-seite[data-sofort="true"] .halb,
.tor-seite[data-sofort="true"] .tor-fuss {
  animation: none;
  opacity: 1;
  translate: none;
  scale: 1;
}

/* -------------------------------------------------------------- Schmal */

@media (max-width: 30rem) {
  .halb__zeichen { width: min(44vw, 10rem); }
}

/* -------------------------------------------------- Bewegung abschalten */

@media (prefers-reduced-motion: reduce) {
  .vorhang { display: none; }
  .auge--tor, .tor-marke, .tor-frage, .halb, .tor-fuss {
    animation: none !important;
    opacity: 1;
    translate: none;
    scale: 1;
  }
  .ueberspringen { display: none; }
}