/* Karman Tech — Coming Soon */
:root {
  --ink: #071412;
  --ink-2: #0c1f1c;
  --fog: #d7e4df;
  --mint: #8ff0c0;
  --steel: #9bb0a8;
  --ember: #e85d2c;
  --font: "Syne", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--fog);
  overflow: hidden;
  cursor: default;
}

.stage {
  position: relative;
  min-height: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #0f2a26 0%, var(--ink) 70%),
    var(--ink);
  isolation: isolate;
}

.veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, transparent 0%, rgba(7, 20, 18, 0.55) 70%),
    linear-gradient(180deg, rgba(7, 20, 18, 0.2), rgba(7, 20, 18, 0.85));
  z-index: 1;
  pointer-events: none;
}

.grid {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background-image:
    linear-gradient(rgba(215, 228, 223, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 228, 223, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(58deg) translateY(-8%);
  transform-origin: center top;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  animation: gridPulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gridPulse {
  0%,
  100% {
    opacity: 0.55;
    background-position: 0 0;
  }
  50% {
    opacity: 0.9;
    background-position: 0 24px;
  }
}

.flare {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}

.flare-a {
  width: min(55vw, 480px);
  height: min(55vw, 480px);
  top: 8%;
  left: 12%;
  background: rgba(143, 240, 192, 0.14);
}

.flare-b {
  width: min(45vw, 380px);
  height: min(45vw, 380px);
  right: 8%;
  bottom: 12%;
  background: rgba(232, 93, 44, 0.1);
  animation-delay: -7s;
}

@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(4%, -5%) scale(1.12);
  }
}

.scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -30%;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(143, 240, 192, 0.05),
    transparent
  );
  animation: scan 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scan {
  0% {
    top: -30%;
  }
  100% {
    top: 110%;
  }
}

.center {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 1.5rem;
}

.brand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 0.35em;
  line-height: 0.88;
}

.word {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(3.2rem, 16vw, 9.5rem);
  letter-spacing: -0.06em;
  color: var(--fog);
  opacity: 0;
  transform: translateY(110%) rotate(-2deg);
  animation: rise 1.4s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.18s);
  text-shadow: 0 0 80px rgba(143, 240, 192, 0.08);
}

.word.tech {
  color: var(--mint);
  animation-delay: calc(0.15s + var(--i) * 0.18s);
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.soon {
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  animation: fadeIn 1.2s var(--ease) 1.1s forwards;
}

.soon-text {
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}

.soon-line {
  display: block;
  width: clamp(2.5rem, 8vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  transform: scaleX(0);
  animation: draw 1s var(--ease) 1.35s forwards;
}

@keyframes draw {
  to {
    transform: scaleX(1);
  }
}

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

/* Slow breathing on brand after entrance */
.brand {
  animation: breath 6s ease-in-out 2s infinite;
}

@keyframes breath {
  0%,
  100% {
    letter-spacing: 0;
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .word,
  .soon,
  .soon-line {
    opacity: 1;
    transform: none;
  }
}