:root{
  --ink: rgba(233,230,223,.76);
  --ink-bright: rgba(255,255,255,.92);
  --ink-faint: rgba(233,230,223,.42);
  --cyan: rgba(0,194,255,.30);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#02030a;
  overflow:hidden;
  color:var(--ink);
}

#scene{
  position:relative;
  width:100vw;
  height:100vh;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}


#stars{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 60% 20%, rgba(255,255,255,.06), transparent 65%),
    radial-gradient(900px 700px at 20% 10%, rgba(0,194,255,.05), transparent 60%),
    linear-gradient(180deg, #01020a, #030318 55%, #01010a);
  pointer-events:none;
  transition: filter 380ms ease, opacity 380ms ease;
}
#stars::before{
  content:"";
  position:absolute; inset:-35%;
  background-image:
    radial-gradient(2px 2px at 8% 18%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 14% 72%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(2px 2px at 34% 62%, rgba(255,255,255,.48), transparent 60%),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(1px 1px at 52% 80%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 62% 28%, rgba(255,255,255,.44), transparent 60%),
    radial-gradient(1px 1px at 70% 58%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(2px 2px at 86% 70%, rgba(255,255,255,.46), transparent 60%),
    radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(1px 1px at 10% 90%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,.18), transparent 60%);
  opacity:.78;
  filter: blur(.2px);
  animation: drift 48s linear infinite;
}
@keyframes drift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-2.4%, 1.2%, 0); }
}

#scene.sparkle #stars{
  filter: brightness(1.18) contrast(1.05) saturate(1.06);
}

#sparkles{
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 2;
}

#viewport{
  position:absolute; inset:0;
  overflow:hidden;
  z-index: 3;
  touch-action: none; /* we implement pan + pinch ourselves */
  cursor: grab;
}
#viewport:active{ cursor: grabbing; }

#world{
  position:absolute;
  width: 2000px;
  height: 2600px;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

#lyrics{
  position:absolute;
  inset:0;
}

.lyric{
  position:absolute;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0);

  background: transparent;
  border:none;
  padding: 6px 10px;
  margin:0;

  font: 540 16px/1.25 ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .02em;
  color: var(--ink);
  text-transform: lowercase;

  border-radius: 12px;
  cursor: default;
  user-select: none;

  transition:
    transform 900ms cubic-bezier(.18,.9,.16,1),
    color 260ms ease,
    text-shadow 260ms ease,
    background-color 260ms ease;
}

.lyric:hover{
  color: var(--ink-bright);
  text-shadow:
    0 0 16px rgba(255,255,255,.12),
    0 0 28px rgba(0,194,255,.14);
  background-color: rgba(255,255,255,.03);
}
.lyric.faint{ color: var(--ink-faint); }
.lyric.danger{ color: rgba(233,230,223,.64); }
.lyric.chorus{ font-weight: 680; letter-spacing:.07em; }
.lyric.spine{ font-weight: 730; }
.lyric.finale{ font-weight: 820; }


#veil{
  position:absolute; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(2px);
  z-index: 10;
  cursor:pointer;
}
#veil.visible{ display:flex; }

.veil-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  color: rgba(233,230,223,.84);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.06em;
  text-transform: lowercase;
}
.veil-dot{
  width:10px; height:10px;
  border-radius:50%;
  background: rgba(0,194,255,.62);
  box-shadow: 0 0 26px rgba(0,194,255,.42);
}
.veil-text{ font-size: 13px; opacity:.92; }


#edge-credit{
  position:absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: rgba(233,230,223,.38);

  z-index: 6;
  pointer-events:none;
}

/* mobile tweaks */
@media (max-width: 700px){
  .lyric{ font-size: 14px; padding: 6px 8px; }
  #edge-credit{ right: 6px; font-size: 11px; }
}