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

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #05070b;
  color: #e6f4ee;
  font-family: ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

.stage {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  padding: 24px;
}

.aura {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 48% at 50% 46%, rgba(52, 211, 153, 0.16), transparent 70%),
    radial-gradient(60% 60% at 50% 110%, rgba(34, 224, 255, 0.10), transparent 72%);
  animation: breathe 9s ease-in-out infinite;
  pointer-events: none;
}

.word {
  position: relative;
  margin: 0;
  font-size: clamp(2.6rem, 13vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: clamp(0.08em, 0.22em, 0.26em);
  text-indent: clamp(0.08em, 0.22em, 0.26em);
  color: #eafff6;
  text-shadow:
    0 0 26px rgba(52, 211, 153, 0.35),
    0 0 70px rgba(52, 211, 153, 0.18);
  animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  user-select: none;
}

.rule {
  position: relative;
  width: clamp(120px, 26vw, 300px);
  height: 1px;
  background: rgba(52, 211, 153, 0.16);
  overflow: hidden;
  animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.rule i {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #34d399, transparent);
  animation: sweep 4.5s ease-in-out infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

@keyframes sweep {
  0%   { left: -40%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aura, .word, .rule, .rule i { animation: none; }
  .rule i { left: 30%; }
}