* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: #f0c8bc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 72% 74%, rgba(112, 12, 18, 0.22), transparent 22rem),
    linear-gradient(180deg, #438fc0 0%, #6bb3d5 44%, #9fd2e6 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 9, 16, 0.04), rgba(58, 8, 12, 0.08));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 78%, rgba(255, 28, 24, 0.44), transparent 24rem),
    radial-gradient(circle at 18% 18%, rgba(178, 10, 12, 0.26), transparent 18rem);
  opacity: 0;
  transition: opacity 900ms ease;
}

body.is-night::after {
  opacity: 1;
}

body.coil-mode::after {
  opacity: 1;
}

#sky,
#letter-noise {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#sky {
  z-index: 0;
}

#rocket-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

#letter-noise {
  z-index: 5;
}

.ascii-rocket {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 72, 52, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(10px, 1.5vw, 17px);
  font-weight: 800;
  line-height: 0.86;
  white-space: pre;
  text-shadow:
    0 0 10px rgba(255, 45, 34, 0.8),
    0 0 24px rgba(255, 45, 34, 0.38);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

.rocket-propulsion-segment,
.payload-bit {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 118, 54, 0.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  line-height: 1;
  white-space: pre;
  opacity: 0;
  transform-origin: center;
  text-shadow:
    0 0 8px rgba(255, 74, 34, 0.78),
    0 0 18px rgba(255, 74, 34, 0.3);
  will-change: transform, opacity;
}

.rocket-propulsion-segment {
  font-size: clamp(10px, 1.25vw, 16px);
}

.payload-bit {
  color: rgba(255, 188, 118, 0.94);
  font-size: clamp(10px, 1.1vw, 15px);
}

.coil-gun,
.coil-beam {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: left center;
  will-change: transform, opacity;
}

.coil-gun {
  color: rgba(255, 76, 48, 0.94);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(12px, 1.8vw, 22px);
  font-weight: 900;
  white-space: pre;
  text-shadow:
    0 0 12px rgba(255, 40, 24, 0.86),
    0 0 30px rgba(255, 40, 24, 0.42);
}

.coil-gun.charging {
  animation: coil-charge 220ms steps(2, end) infinite;
}

.coil-beam {
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 225, 205, 0.95), rgba(255, 48, 24, 0.88), rgba(78, 0, 0, 0));
  box-shadow:
    0 0 12px rgba(255, 54, 30, 0.9),
    0 0 42px rgba(255, 18, 10, 0.56);
  opacity: 0;
}

h1.text-impact {
  animation: text-impact 520ms steps(2, end) 1;
}

.center-stage {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
  padding: 32px;
  text-align: center;
  pointer-events: auto;
  user-select: text;
}

h1,
p {
  margin: 0;
}

@keyframes coil-charge {
  0% {
    filter: brightness(0.78) contrast(1.1);
  }
  100% {
    filter: brightness(1.55) contrast(1.45);
  }
}

@keyframes text-impact {
  0% {
    transform: translate(0, 0);
  }
  18% {
    transform: translate(-8px, 3px);
  }
  36% {
    transform: translate(7px, -4px);
  }
  54% {
    transform: translate(-5px, -2px);
  }
  72% {
    transform: translate(4px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

h1 {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(0.06em, 1vw, 0.13em);
  color: rgba(255, 138, 112, 0.9);
  font-size: clamp(3.4rem, 13vw, 11rem);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 14px rgba(255, 42, 32, 0.22),
    0 22px 62px rgba(0, 0, 0, 0.62);
}

.letter {
  position: relative;
  display: inline-block;
  isolation: isolate;
  cursor: text;
}

.letter::selection,
p::selection {
  color: #ffddd2;
  background: rgba(116, 8, 14, 0.82);
  text-shadow: none;
}

p {
  margin-top: clamp(18px, 3vw, 32px);
  color: rgba(255, 154, 128, 0.72);
  font-size: clamp(0.95rem, 2vw, 1.34rem);
  font-weight: 750;
  letter-spacing: 0;
}

@media (max-width: 620px) {
  .center-stage {
    padding: 20px;
  }

  h1 {
    font-size: clamp(3rem, 17vw, 5.6rem);
    gap: clamp(0.035em, 0.8vw, 0.08em);
  }
}