/** { outline: 1px solid red; }+/

/* ====== Base / helpers ====== */
:root{
  --gate-radius: 12px;
  --gate-red: #FF1E22;
  --gate-black: #000;
  --gate-white: #fff;

  --gate-text-size: 20px;     /* Headline-Zeile */
  --gate-text-line: 24px;

  --field-height: 48px;       /* Input + Button */
  --field-gap: 8px;
  --field-pad-x: 14px;

  --status-size: 20px;        /* ACCESS DENIED / GRANTED */
  --status-line: 24px;

  --wrap-pad: 24px;           /* inner padding des roten Layers */
  --wrap-pad-top: 32px;
}

.lang-de, .lang-en{ display:none; }
html[lang="de"] .lang-de{ display:inline; }
html[lang="en"] .lang-en{ display:inline; }



/* ===== OVERRIDES: Gate-Layer soll sich der Inhaltshöhe anpassen ===== */

/* unten andocken bleibt */
.gate-wrap{
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  z-index: 2;
  pointer-events: none;
  animation: glitchBot 2.4s infinite linear alternate;
}

@keyframes glitchBot {
  0% { transform: translate(0, 0); }
  20% { transform: translate(2px, 1px); }
  40% { transform: translate(4px, -1px); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(-2px, 2px); }
  100% { transform: translate(0, -1px); }
}


/* Layer: zentriert, 20px Rand je Seite, Höhe = auto */
.gate-layer{
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0 auto;
  width: min(500px, calc(100vw - 40px)); /* 20px links/rechts */
  background: var(--gate-red);
  border-radius: var(--gate-radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);

  /* WICHTIG: keine Höhenbegrenzung */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  /* Padding wie gewünscht; Animation nur auf Padding wenn nötig */
  padding: var(--wrap-pad-top) var(--wrap-pad);
  transition: padding .25s ease, box-shadow .25s ease;
}

/* Falls du einen Expanded-State nutzt: nur Optik, KEINE Höhe setzen */
body.gate-expanded .gate-layer{
  /* KEIN max-height hier! */
  padding: calc(var(--wrap-pad-top) + 4px) var(--wrap-pad) 28px;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}

/* kompakter Default: unten weniger Padding, kleines Feld‑Spacing */
.gate-layer{
  padding: var(--wrap-pad-top) var(--wrap-pad) 14px; /* TOP 32, SIDES 24, BOTTOM 14 */
}

.gate-field{
  margin-bottom: 8px; /* statt bisher 24px */
}

/* wenn Status/Poetry eingeblendet werden, geben wir wieder mehr Luft */
body.gate-expanded .gate-layer{
  padding: calc(var(--wrap-pad-top) + 4px) var(--wrap-pad) 28px;
}
body.gate-expanded .gate-field{
  margin-bottom: 24px;
}





/* === Formular === */
.gate-form{
  width: 100%;
  display: grid;
  gap: 16px;                        /* Abstand Text -> Feld -> Status */
}

/* Headline-Zeile */
.gate-text{
  margin: 0;
  color: var(--gate-black);
  font-family: "PT Mono", monospace;
  font-weight: 400;
  font-size: var(--gate-text-size);
  line-height: var(--gate-text-line);
}

/* Form Field ohne Gap */
.gate-field {
  display: flex;
  align-items: center;
  height: var(--field-height);
  margin-top: 16px; /* bleibt */
  margin-bottom: 24px; /* Abstand nach unten vergrößert */
}

/* Input links mit gerundeten linken Ecken */
.gate-input {
  flex: 1;
  height: var(--field-height);
  padding: 0 var(--field-pad-x);
  background: var(--gate-white);
  color: var(--gate-black);
  font-family: "PT Mono", monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--field-height);
  border: none;
  border-radius: 8px 0 0 8px;
  outline: none;            /* entfernt grauen Outline-Rahmen */
  box-shadow: none !important; /* entfernt grauen inneren Schatten */
  transition: background-color 0.6s ease, color 0.6s ease; /* Smooth fading */
}
.gate-input:focus {
  outline: none;
  box-shadow: none;         /* auch im Fokus keine graue Outline */
}

/* Lockout-Zustand: schwarz mit weißer Schrift */
.gate-input.locked {
  background: #000;
  color: #fff;
}

.gate-input::placeholder{ color: rgba(0,0,0,.45); }
.gate-input:focus{ box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset; }

/* Button rechts mit gerundeten rechten Ecken */
.gate-btn {
  width: var(--field-height);
  height: var(--field-height);
  background: var(--gate-black);
  border: none;
  border-radius: 0 8px 8px 0;   /* nur rechts rund */
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.gate-btn > img {
  width: 16px;
  height: 19px;
  display: block;
  pointer-events: none;
  user-select: none;
}

#soulHint { 
  display: none; 
}

/* === Status & Poetry (zentriert, wie Design) === */
.gate-status,
.gate-poetry{
  margin: 0;
  text-align: center;
  color: var(--gate-black);
  font-family: "PT Mono", monospace;
}
.gate-status{
  font-size: var(--status-size);
  line-height: var(--status-line);
}
.gate-poetry{
  font-size: 18px;
  line-height: 22px;
  opacity: 0.9;
}

/* Optional: Fokus für Tastatur-Nutzer klarer machen */
.gate-btn:focus-visible,
.gate-input:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}





/* --- Page background --- */
html, body { height: 100%; }
body { margin: 0; background:#000; color:#fff; }

/* --- Layer order: Video (0) → Matrix (1) → Content (2) --- */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .95;           /* adjust taste */
  z-index: 0;
  transition: opacity 4.8s ease; /* Neu: weiches Ausblenden */
}

.bg-video.is-fading{ opacity: 0; } /* Neu: Klasse für Fade-Out */


#matrix.matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .55;           /* adjust taste */
  z-index: 1;
  background: transparent; /* important: no white canvas fill */
}

/* Dein Content oben drauf */
.wrap { position: relative; z-index: 2; }





/* Startzustand: leicht abgesenkt + minimal transparenter */
.gate-layer{
  transform: translateY(8px);
  opacity: .98;
  transition:
    transform .35s ease,
    opacity   .35s ease,
    padding   .25s ease,
    box-shadow .35s ease;
}

/* Aufklappen: hochsliden + voll sichtbar */
body.gate-expanded .gate-layer{
  transform: translateY(0);
  opacity: 1;
}

/* Status/Poetry: weich einfaden/hochsliden, erst sichtbar im expanded */
.gate-status,
.gate-poetry{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease .05s, transform .3s ease .05s;
}

body.gate-expanded .gate-status,
body.gate-expanded .gate-poetry{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: dezenter Fokus-Glow während granted-sequence */
body.granted-sequence .gate-input,
body.granted-sequence .gate-btn{
  box-shadow: 0 0 0 2px rgba(0,255,160,.25) inset;
  transition: box-shadow .35s ease;
}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce){
  .gate-layer,
  .gate-status,
  .gate-poetry{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}





/* === Matrix fade control === */
#matrix.matrix {
  transition: opacity .6s ease; /* ermöglicht weiches Ausfaden */
}

/* === Gate hide === */
.gate-wrap.is-hiding {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}



/* === Loader Stage (fixed, top offset 120px, centered) === */
#loadingStage {
  position: fixed;         /* über allem */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;           /* Flexbox */
  align-items: center;     /* vertikal mittig */
  justify-content: center; /* horizontal mittig */
  background: rgba(0,0,0,0.9); /* falls Abdunklung gewünscht */
  z-index: 9999;           /* sicher über allen Elementen */
  visibility: hidden;      /* wird erst per JS gezeigt */
  opacity: 0;
  transition: opacity 0.3s ease;
}

#loadingStage.show {
  visibility: visible;
  opacity: 1;
}

#loadingLabel {
  font-family: "PT Mono", monospace;
  font-size: 1.5rem;
  color: #FF1E22;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: flicker 1.5s infinite;
}

/* Keyframes für Flacker-Effekt */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 4px #FF1E22,
      0 0 10px #FF1E22,
      0 0 20px #FF1E22;
  }
  20%, 24%, 55% {
    opacity: 0.3;
    text-shadow: none;
  }
}



.binary-out{
  margin-top: 12px;                 /* direkt unter LOADING */
  font-family: "PT Mono", monospace;
  font-size: 18px;                  /* gleiche Größe wie LOADING */
  line-height: 1.4;
  color: #0047D9;
  white-space: pre;
  text-align: center;

  /* skaliert nach unten (sanftes „runterlaufen“) */
  transform-origin: top center;
  animation: binary-scale 0.8s ease-out forwards;
}

@keyframes binary-scale {
  from { transform: scaleY(0.9); opacity: 0; }
  to   { transform: scaleY(1);   opacity: 1; }
}



/* Content im Hero */
.hero-content {
  font-family: PTMono, monospace;
  font-weight: 300;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 2;
  transform: translateY(-10%); /* ca. 10% höher als Mitte */
}

.hero-content-inner {
  width: 75%;
  display: grid;
  gap: 32px;
  color: #fff;
}

.dwtd-logo {
  width: 305px;
  height: auto;
  display: block;
}

.intro-text {
  width: 305px;
  color: white;
  font-weight: 200;
  font-size: 24px;
  line-height: 120%;
  padding-left: 24px;
  margin: 0 0 12px 0;
  max-width: 40ch;
}


@media (max-width: 810px) {
  .hero-content {
    position: absolute;
    inset: 0;
    transform: translateY(+10%); /* ca. 10% höher als Mitte */
    left: 0;
    width: 100%;
    display: flex;          /* flex statt grid */
    justify-content: left;
    align-items: flex-start; /* nach oben ausrichten */
    z-index: 2;
  }

  .hero-content-inner {
    width: 240px;
    margin: 0 8%;
    text-align: left;
    display: grid;
    gap: 24px;
    justify-items: start;
  }

  .dwtd-logo { 
    width: 240px; 
    height: auto; 
    margin: 0 auto;
  }

  .intro-text {
    padding-left: 48px;
    width: 192px;
    font-size: 20px;
    line-height: 130%;
  }
}