/* Der Eintritt: eine schwarze Fläche, die beim Scrollen in Keile zerspringt.
   Umkehrbar — scrollt man zurück, setzt sie sich wieder zusammen. */

.tor-grund{
  position:fixed;inset:0;z-index:39;
  background:var(--tinte);
  will-change:opacity;
}

.tor{position:fixed;inset:0;z-index:40}

/* Eine Scherbe. Form kommt per clip-path aus dem Skript. */
.tor i{
  position:absolute;inset:0;display:block;
  background:var(--tinte);
  will-change:transform,opacity;
}

.tor-wort{
  position:fixed;inset:0;z-index:41;
  display:grid;place-items:center;
  will-change:opacity,transform;
}
.tor-wort span{
  font-family:'Noto Sans JP',sans-serif;font-weight:200;
  font-size:clamp(40px,9vw,120px);letter-spacing:.34em;
  color:var(--saeure);padding-left:.34em;   /* gleicht die Sperrung rechts aus */
}

.tor-hinweis{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:42;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--saeure);will-change:opacity;
}

/* Nie klickbar: der Eintritt liegt über der Seite, darf sie aber nicht blockieren */
.tor-grund,.tor,.tor-wort,.tor-hinweis{pointer-events:none}

/* Versteckt, sobald der Eintritt durch ist — per visibility, damit er
   beim Zurückscrollen sofort wieder da sein kann. */
.tor-weg{visibility:hidden}

/* Scrollstrecke, die allein der Eintritt verbraucht. Ohne sie wäre der Kopf
   schon vorbeigescrollt, bevor die Scherben fertig geflogen sind. */
.vorlauf{height:70svh}