/* ============================================================
   NTGRL — landing page (minimal fade logo)
   ============================================================ */

:root {
  /* Neon tint as an R,G,B triplet — change this one line to reskin
     the whole sign. Default is a clean white tube glow. */
  --neon: 255, 255, 255;
}

.landing {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.logo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  position: relative;
  display: flex;
  white-space: pre;
  font-family: var(--font-brand);
  font-size: clamp(48px, 11vw, 128px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  user-select: none;
}

.letter {
  position: relative;
  display: inline-block;
  opacity: 0;
  color: rgb(var(--neon));
  text-shadow:
    0 0 2px rgba(var(--neon), 0.9),
    0 0 6px rgba(var(--neon), 0.55),
    0 0 14px rgba(var(--neon), 0.32),
    0 0 28px rgba(var(--neon), 0.16);
  will-change: opacity, width, margin;
  transition: opacity 0.8s ease,
              width 0.5s ease,
              margin 0.5s ease;
}

.letter.visible {
  opacity: 1;
}

/* once the word has settled, the ghost letters collapse away and the
   kept letters (N T G R L) draw together into a clean, legible mark */
.letter.collapsed {
  overflow: hidden;
  width: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  /* fade out first, then collapse the box — collapsing width pulls the
     kept letters closer via the flex row, and if the ghost glyph is
     still visibly there when that happens, it visibly slides through
     its neighbors instead of just vanishing */
  transition: opacity 0.4s ease,
              width 0.5s ease 0.3s,
              margin 0.5s ease 0.3s;
}

.enter-btn {
  margin-top: 64px;
  padding: 14px 40px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.enter-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.enter-btn:hover {
  background: var(--fg);
  color: var(--bg);
}

@media (max-width: 480px) {
  .logo { letter-spacing: 0; }
}