/* ===========================================================================
   JoeD Landing — Seiten-Layer über den NEON//DUSK Tokens.
   Baut die Komponenten-Idiome des Design Systems in statischem CSS nach:
   geschnittene Ecken, Glow statt Schatten, ein einziges ember-Fill pro View.
   =========================================================================== */

/* ------------------------------------------------------------- primitives -- */

.sep { color: var(--steel-600); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-3);
  z-index: 99;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ember-500);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border: 0;
}
.skip-link:focus { left: var(--sp-3); }

.shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-11) var(--gutter) var(--sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--sp-11);
  min-height: 100vh;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__kicker {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__title {
  --glitch-size: clamp(72px, 17vw, 176px);
  font-size: var(--glitch-size);
  font-weight: var(--fw-black);
  margin: 0;
  /* tokens/base.css setzt h1–h4 auf uppercase. Der Schriftzug ist aber ein
     Eigenname und behält seine exakte Schreibweise: JoeD, nicht JOED. */
  text-transform: none;
  /* Orbitron trägt --ls-display auch HINTER der letzten Glyphe. Der Überhang
     zählt zur Breite und zöge den Schriftzug optisch nach links — hier
     wieder abgezogen, damit "JoeD" wirklich mittig im Casing sitzt. */
  margin-right: -0.06em;
}

.hero__lead {
  margin: var(--sp-7) auto 0;
  max-width: 46ch;
  font-size: var(--fs-body-l);
  color: var(--text-body);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-8);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.hero__meta li { display: flex; gap: var(--sp-3); align-items: baseline; }
.hero__meta .k { color: var(--steel-600); }
.hero__meta .v { color: var(--text-body); }
.hero__meta .v--ok { color: var(--sig-ok); }
.hero__meta .v--warn { color: var(--sig-warn); }

/* ---- Glitch: Nachbau von GlitchText intensity="high" ---- */

/* Orbitron hat keinen Italic-Schnitt (Variable-Achse ist nur wght 400–900).
   Die Neigung kommt daher als skewX — und zwar auf den Container: die
   Glitch-Ebenen animieren ihr eigenes transform (cp-glitch-x) und würden
   eine Neigung auf sich selbst überschreiben. So komponiert sie sauber. */
.glitch {
  position: relative;
  display: inline-block;
  isolation: isolate;
  transform: skewX(-18deg);
}

.glitch__base {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--ember-600);
  text-shadow:
    0 0 8px rgba(255, 106, 0, 0.55),
    0 0 26px rgba(255, 106, 0, 0.34),
    0 0 68px rgba(255, 106, 0, 0.2);
  animation: cp-flicker var(--dur-flicker) var(--ease-snap) infinite;
}

.glitch__layer {
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  user-select: none;
}
.glitch__layer::before { content: attr(data-text); display: block; }

.glitch__layer:nth-child(1) {
  left: -2px;
  color: var(--sig-danger);
  opacity: 0.72;
  animation: cp-glitch-x 4.2s var(--ease-snap) infinite;
}
.glitch__layer:nth-child(2) {
  left: 2px;
  color: var(--ice-500);
  opacity: 0.72;
  animation: cp-glitch-x 5.1s var(--ease-snap) -1.7s infinite;
}

/* Scramble-Decode beim Mount — heller als der Ruhezustand, damit sich das
   Auflösen vom fertigen Schriftzug abhebt. */
.glitch.is-scrambling .glitch__base { color: var(--ember-400); }

/* ----------------------------------------------------------------- panel -- */
/* Hairline auf ALLEN Kanten inkl. der Schnittecken: Elternfläche trägt die
   Linienfarbe, ::before legt die Oberfläche 1px eingerückt darüber. */

/* Der Wrapper trägt den Schlagschatten: clip-path auf .panel würde einen
   box-shadow mit wegschneiden, filter hier folgt dagegen der geschnittenen
   Kontur. Er ist zugleich der Bezug für die Legend. */
.panel-wrap {
  position: relative;
  filter: drop-shadow(0 24px 32px rgba(2, 4, 12, 0.9));
}

.panel {
  position: relative;
  isolation: isolate;
  padding: 1px;
  background: var(--line-hairline);
  clip-path: var(--clip-notch-l);
}
/* Oberfläche, 1px eingerückt → echte Hairline auf allen Kanten */
.panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--surface-card);
  box-shadow: var(--inset-well);
  clip-path: var(--clip-notch-l);
}

.panel__legend {
  position: absolute;
  top: -7px;
  left: var(--sp-8);
  z-index: 3;
  padding: 0 var(--sp-3);
  background: var(--void-950);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent);
  text-shadow: var(--tglow-ember);
}

/* ---- Scanlines: die einzige Scanline-Fläche der Seite ---- */

.scan {
  position: absolute;
  inset: 1px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  background: var(--scanlines);
  opacity: 0.55;
  clip-path: var(--clip-notch-l);
}
.scan__sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(to bottom, transparent, var(--ember-a08), transparent);
  animation: cp-scan var(--dur-scan) linear infinite;
}

/* -------------------------------------------------------------- terminal -- */

.term__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7);
  border-bottom: 1px solid var(--line-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.term__spacer { flex: 1; }
.term__id { color: var(--text-muted); }
.term__id--dim { color: var(--steel-600); }

.dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--sig-ok);
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.8);
  animation: cp-flicker var(--dur-flicker) var(--ease-snap) infinite;
}

.term__log {
  height: clamp(300px, 46vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono);
  line-height: 1.7;
  scrollbar-gutter: stable;
}

.ln { white-space: pre-wrap; word-break: break-word; margin: 0; }
.ln + .ln { margin-top: 1px; }
.ln--sys  { color: var(--text-muted); }
.ln--out  { color: var(--text-body); }
.ln--hot  { color: var(--ember-400); text-shadow: var(--tglow-ember); }
.ln--ice  { color: var(--ice-400); text-shadow: var(--tglow-ice); }
.ln--err  { color: var(--sig-danger); }
.ln--warn { color: var(--sig-warn); }
.ln--dim  { color: var(--steel-600); }
.ln--echo { color: var(--text-primary); }
.ln--gap  { height: var(--sp-4); }

.ln--link a {
  color: var(--text-link);
  border-bottom-color: var(--ember-a32);
}
.ln--link a::before { content: '  ↗ '; color: var(--steel-600); }

.term__form {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--line-hairline);
  background: var(--surface-inset);
}

.term__prompt {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--ember-500);
  text-shadow: var(--tglow-ember);
  cursor: text;
}

.term__input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-mono);
  caret-color: var(--ember-500);
  outline: none;
}
.term__input::placeholder { color: var(--steel-600); }

.term__caret {
  width: 8px;
  height: 16px;
  flex: none;
  background: var(--ember-500);
  box-shadow: var(--glow-ember-s);
  animation: cp-caret 1s var(--ease-step) infinite;
}
.term__form:focus-within { box-shadow: var(--ring-focus); }
.term__form:focus-within .term__caret { display: none; }

/* --------------------------------------------------------------- buttons -- */

.cmds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.btn {
  position: relative;
  isolation: isolate;
  appearance: none;
  padding: 1px;                      /* trägt die Randfarbe */
  border: 0;
  background: var(--line-strong);
  clip-path: var(--clip-notch-s);
  font: inherit;
  color: var(--text-body);
  cursor: pointer;
  transition:
    box-shadow var(--dur-fast) var(--ease-snap),
    color var(--dur-fast) var(--ease-snap),
    background var(--dur-fast) var(--ease-snap),
    transform var(--dur-instant) var(--ease-snap);
}
.btn > span {
  display: block;
  padding: var(--sp-4) var(--sp-7);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--surface-raised);
  clip-path: var(--clip-notch-s);
  transition: background var(--dur-fast) var(--ease-snap);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* primary — das einzige ember-Fill der Seite */
.btn--primary { background: var(--ember-500); color: var(--text-on-accent); box-shadow: var(--glow-ember-m); }
.btn--primary::before { background: var(--ember-500); }
.btn--primary:hover { background: var(--ember-400); box-shadow: var(--glow-ember-l); }
.btn--primary:hover::before { background: var(--ember-400); }

/* secondary — ember-Outline */
.btn--secondary { background: var(--ember-600); color: var(--ember-300); }
.btn--secondary:hover { background: var(--ember-500); color: var(--ember-200); box-shadow: var(--glow-ember-s); }
.btn--secondary:hover::before { background: var(--ember-a08); }

/* ghost — steel-Hairline, tertiär */
.btn--ghost { background: var(--line-hairline); color: var(--text-muted); }
.btn--ghost:hover { background: var(--line-strong); color: var(--text-body); }
.btn--ghost:hover::before { background: var(--surface-hover); }

/* ice — Systemdiagnostik, nie als zweite Markenfarbe */
.btn--ice { background: var(--ice-600); color: var(--ice-400); }
.btn--ice:hover { background: var(--ice-500); color: var(--ice-300); box-shadow: var(--glow-ice-m); }
.btn--ice:hover::before { background: var(--ice-a16); }

/* danger */
.btn--danger { background: rgba(255, 34, 71, 0.5); color: var(--sig-danger); }
.btn--danger:hover { background: var(--sig-danger); box-shadow: var(--glow-danger-m); }
.btn--danger:hover::before { background: rgba(255, 34, 71, 0.12); }

/* ---------------------------------------------------------------- footer -- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--steel-600);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 720px) {
  .shell { padding: var(--sp-9) var(--sp-5) var(--sp-8); gap: var(--sp-9); }
  .panel__legend { left: var(--sp-5); }
  .term__bar,
  .term__form { padding-inline: var(--sp-5); }
  .term__log { padding: var(--sp-5); }
  .cmds { gap: var(--sp-3); }
  .btn > span { padding: var(--sp-4) var(--sp-5); }
  .hero__meta { gap: var(--sp-3) var(--sp-6); }
}

@media (prefers-reduced-motion: reduce) {
  .scan__sweep { display: none; }
  .term__caret { animation: none; }
}