/* KLYVANTA – Coming soon
   Eigenständige Seite. Farben und Bewegung wie im ersten Abschnitt der Hauptwebsite. */

@font-face {
  font-family: 'JetBrains Mono';
  /* eingebettet, damit die Schrift auch beim Öffnen per Doppelklick lädt (Datei liegt zusätzlich in assets/fonts) */
  src: url('data:font/woff2;base64,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') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ink: #0b0b0c;
  --paper: #f6f3f1;
  --kobalt: #3463d6;
  --kobalt-light: #8ea8f5;
  --tilt: 30.96deg;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Raster im Winkel der Bildmarke, wie im Hero der Hauptwebsite */
body::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgb(246 243 241 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(246 243 241 / 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  transform: skewY(calc(var(--tilt) * -0.25));
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 15%, transparent 72%);
  pointer-events: none;
  animation: fade 2.4s ease-out both;
}

/* Kobaltblaues Licht hinter dem Logo */
body::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 48%;
  z-index: 0;
  width: min(1100px, 150vw);
  aspect-ratio: 1.6;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(52 99 214 / 0.26), rgb(52 99 214 / 0.08) 52%, transparent 100%);
  pointer-events: none;
  animation:
    fade 2.6s ease-out 0.2s both,
    breathe 9s ease-in-out 2.8s infinite alternate;
}

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.9rem, 1rem + 4vh, 3.6rem);
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
  translate: 0 -2vh;
}

.brand {
  margin: 0;
  line-height: 0;
}

.lockup {
  display: block;
  width: min(84vw, 1100px, max(760px, 48vw));
  height: auto;
  overflow: visible;
  color: var(--paper);
}

/* Einstieg: die vier Teile der Bildmarke gleiten an ihren Platz, dann folgt der Schriftzug */
.part {
  transform-box: fill-box;
  animation: part-in 1.25s var(--ease-out) both;
}
.part--left {
  --from: -34px 14px;
  animation-delay: 0.15s;
}
.part--top {
  --from: 22px -34px;
  animation-delay: 0.27s;
}
.part--base {
  --from: 32px 22px;
  animation-delay: 0.39s;
}
.part--bar {
  --from: -30px 20px;
  animation-delay: 0.55s;
}

.word {
  transform-box: fill-box;
  animation: word-in 1.15s var(--ease-out) 0.8s both;
}

/* einmaliger Lichtreflex über die Kacheln */
.sheen {
  translate: -260px 0;
  animation: sheen 1.7s cubic-bezier(0.45, 0, 0.25, 1) 1.55s both;
}

.soon {
  margin: 0;
  display: flex;
  align-items: center;
  font: 500 clamp(0.85rem, 0.68rem + 0.55vw, 1.45rem) / 1 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--kobalt-light);
  /* gleicht den Buchstabenabstand nach dem letzten Zeichen optisch aus */
  padding-left: 0.34em;
  animation: soon-in 1.1s var(--ease-out) 1.95s both;
}

.dots {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  margin-left: 0.12em;
  translate: 0 0.3em;
}

.dots i {
  display: block;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: dot 1.6s ease-in-out infinite both;
}
.dots i:nth-child(1) {
  animation-delay: 2.9s;
}
.dots i:nth-child(2) {
  animation-delay: 3.1s;
}
.dots i:nth-child(3) {
  animation-delay: 3.3s;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes breathe {
  from {
    opacity: 0.72;
    scale: 0.96;
  }
  to {
    opacity: 1;
    scale: 1.04;
  }
}

@keyframes part-in {
  from {
    opacity: 0;
    translate: var(--from);
  }
}

@keyframes word-in {
  from {
    opacity: 0;
    translate: -28px 0;
  }
}

@keyframes sheen {
  from {
    translate: -260px 0;
  }
  to {
    translate: 520px 0;
  }
}

@keyframes soon-in {
  from {
    opacity: 0;
    translate: 0 10px;
    letter-spacing: 0.46em;
  }
}

@keyframes dot {
  0%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

/* Bewegung reduzieren: nichts gleitet oder pulsiert, alles erscheint nur sanft */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .part,
  .word,
  .soon,
  .dots i {
    animation: none;
  }
  .sheen {
    display: none;
  }
  .dots i {
    opacity: 1;
  }
  .stage {
    animation: fade 0.6s ease-out both;
  }
}