@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0618;       /* deep space — dark ultraviolet base */
  --stroke: #ffffff;   /* solid white outlines */
  --accent: #ffffff;   /* white fill on hover */
  --stroke-width: 1px;
  --letter-size: 31vw;
}

/* Per-letter color identity */
.letter-link:nth-child(1) {
  --glow-strong:      #6A0DAD;
  --glow-fill:        rgba(106, 13, 173, 0.25);
  --glow-shadow-near: rgba(106, 13, 173, 0.70);
  --glow-shadow-far:  rgba(106, 13, 173, 0.30);
}
.letter-link:nth-child(2) {
  --glow-strong:      #D9534F;
  --glow-fill:        rgba(217, 83, 79, 0.25);
  --glow-shadow-near: rgba(217, 83, 79, 0.70);
  --glow-shadow-far:  rgba(217, 83, 79, 0.30);
}
.letter-link:nth-child(3) {
  --glow-strong:      #0e76a8;
  --glow-fill:        rgba(14, 118, 168, 0.25);
  --glow-shadow-near: rgba(14, 118, 168, 0.70);
  --glow-shadow-far:  rgba(14, 118, 168, 0.30);
}

/* Optical balance: J's hook carves out empty space at its bottom-right,
   making J→A appear wider than A→N. Pull J slightly toward A. */
.letter-link:nth-child(1) {
  margin-right: -1.5vw;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, var(--bg) 0%, #000000 100%);
  font-family: 'Inter', sans-serif;
  letter-spacing: 1.6px;
}

/* Layer 0 — nebula: soft asymmetric violet/indigo clouds, breathing slowly.
   Oversized inset so the slow drift never exposes an edge. */
@keyframes nebulaBreathe {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-1.5%, 1%) scale(1.05); }
  100% { transform: translate(1%, -1.5%) scale(1.02); }
}

body::before {
  content: '';
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 22% 32%, rgba(60, 12, 115, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 72% at 80% 68%, rgba(25,  5,  82, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 42% 42% at 58% 14%, rgba(88, 22, 130, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 60% 38% at 38% 85%, rgba(15,  5,  58, 0.14) 0%, transparent 55%);
  animation: nebulaBreathe 50s ease-in-out infinite alternate;
  will-change: transform;
}

/* Layer 2 — vignette: corners and edges darken, eye drawn inward */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.6) 100%);
}

/* Layer 1 — star-field canvas is injected by JS between grain and vignette */

/* Layer 3 — letters sit above all overlays */
.stage {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Entrance: stagger + rise ----------------------------------------- */
@keyframes letterEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.letter-link:nth-child(1) { animation: letterEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.10s backwards; }
.letter-link:nth-child(2) { animation: letterEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s backwards; }
.letter-link:nth-child(3) { animation: letterEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.46s backwards; }

/* Nav layout -------------------------------------------------------- */
.letter-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6vw;
}

.letter-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: filter 650ms ease;
  outline: none;
}

/* Keyboard focus mirrors the hover treatment (classes set in JS);
   the ring below is a safety net for when JS fails to run. */
.letter-link:focus-visible {
  outline: 2px solid var(--glow-strong);
  outline-offset: 8px;
  border-radius: 4px;
}

/* Hovered letter promotes above siblings (flex items respect z-index) */
.letter-link.is-hovered {
  z-index: 1;
  filter:
    drop-shadow(0 0 4px var(--glow-strong))
    drop-shadow(0 0 35px var(--glow-shadow-near))
    drop-shadow(0 0 90px var(--glow-shadow-far));
  transition: filter 150ms ease;
}

/* Letter glyph ------------------------------------------------------ */
.letter {
  display: block;
  height: calc(var(--letter-size) * 0.82);
  width: auto;
  color: white;
  stroke-width: var(--stroke-width);
  overflow: visible;
  transform: scale(1);
  transform-origin: center center;
  /* Slow out — governs return to rest */
  transition:
    opacity   500ms ease,
    transform 500ms ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Window into deep space inside the letterform — hidden at rest.
   (Don't style `.letter path` broadly: the mask path must stay white.) */
.letter .window {
  opacity: 0;
  transition: opacity 650ms ease;
}

/* Hovered: fast in */
.letter-link.is-hovered .letter {
  transition:
    opacity   150ms ease,
    transform 150ms ease;
  color: var(--glow-strong);
  transform: scale(1.06);
}

/* Window fast-in on hover */
.letter-link.is-hovered .letter .window {
  opacity: 1;
  transition: opacity 200ms ease;
}

/* Siblings: fast dim */
.letter-link.is-sibling .letter {
  transition:
    opacity   200ms ease,
    transform 200ms ease;
  opacity: 0.12;
  transform: scale(0.93);
}

/* Sub-labels -------------------------------------------------------- */
.label {
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 1.1vw;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;          /* hidden by default, only appears on hover */
  transform: translateY(-14px); /* rests just above, near letter base */
  margin-top: 1.8vw;
  /* Slow out */
  transition:
    opacity   650ms ease,
    transform 650ms ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Label: fast in on hover — falls from letter into place */
.letter-link.is-hovered .label {
  transition:
    opacity   150ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.85;
  transform: translateY(0);
  color: var(--glow-strong);
}

/* Label: stays hidden on siblings */
.letter-link.is-sibling .label {
  transition:
    opacity   200ms ease,
    transform 200ms ease;
  opacity: 0;
  transform: translateY(-14px);
}

/* Quote ------------------------------------------------------------ */
@keyframes quoteEnter {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 0.45; transform: translateY(0); }
}

.quote {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 1vw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-top: 2.5vw;
  opacity: 0;
  animation: quoteEnter 1.0s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
  user-select: none;
  -webkit-user-select: none;
}

/* Color-wash: full-screen tint layer driven by JS */
.color-wash {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
}

/* Reduced motion: drop movement (entrance rise, scaling, label drop),
   keep non-motion hover feedback (color, glow, opacity) intact. */
@media (prefers-reduced-motion: reduce) {
  .letter-link,
  .quote {
    animation: none;
  }
  .quote {
    opacity: 0.45;
  }
  .letter,
  .letter-link.is-hovered .letter,
  .letter-link.is-sibling .letter {
    transform: none;
    transition: opacity 150ms ease;
  }
  .label,
  .letter-link.is-hovered .label,
  .letter-link.is-sibling .label {
    transform: none;
    transition: opacity 150ms ease;
  }
}

@media (max-width: 768px) {

  /* Larger letters feel more impactful stacked vertically */
  :root {
    --letter-size: 34vw;
  }

  /* Stack letters in a column, centered */
  .letter-nav {
    flex-direction: column;
    align-items: center;
    gap: 5vw;
  }

  /* Label must be readable and tappable on mobile */
  .label {
    font-size: 4vw;
    margin-top: 4vw;
  }

  /* Once revealed, the label is the tap target to navigate */
  .letter-link.is-hovered .label {
    pointer-events: auto;
  }

  .quote {
    font-size: 3.5vw;
    margin-top: 5vw;
  }
}