/* Add-on layers: sit between the background log (z auto) and the brand (z 5). */
.crawl-stage {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
  perspective: 420px; perspective-origin: 50% 35%;
}
.crawl-stars {
  position: absolute; inset: 0; opacity: .75;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 72%, #dfffee 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 33%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, #b0d9d1 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 79% 47%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 76%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 22%, #dfffee 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 92%, #fff 50%, transparent 51%);
  background-size: 420px 420px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .8; } }
.crawl-plane {
  position: absolute; left: 50%; bottom: -10vh; width: min(900px, 92vw); height: 140vh;
  transform: translateX(-50%) rotateX(28deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 92%);
          mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 92%);
}
.crawl-track {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 3.2em;
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 5.6rem); letter-spacing: .18em;
  color: #f5c35b;
  text-shadow: 0 0 22px rgb(245 195 91 / .55), 0 0 60px rgb(245 195 91 / .25);
  animation: crawl 34s linear -6s infinite;
}
.crawl-name { margin: 0; white-space: nowrap; opacity: .9; }
@keyframes crawl { from { transform: translateY(0); } to { transform: translateY(-260%); } }

/* Sound button, styled like the HUD */
.sound-toggle {
  position: fixed; z-index: 7; left: 50%; bottom: 1.35rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .22em; color: #5f7c70;
  background: rgb(3 8 6 / .6); border: 1px solid rgb(47 209 127 / .35); border-radius: 999px;
  padding: .55rem 1rem; backdrop-filter: blur(4px); transition: color .2s, border-color .2s, box-shadow .2s;
}
.sound-toggle:hover, .sound-toggle:focus-visible { color: #e8f3ee; border-color: #2fd17f; outline: none; box-shadow: 0 0 18px rgb(47 209 127 / .3); }
.sound-toggle[aria-pressed="true"] { color: #2fd17f; border-color: #2fd17f; }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-bars i { display: block; width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: eq .9s ease-in-out infinite; }
.sound-bars i:nth-child(2) { animation-delay: -.3s !important; }
.sound-bars i:nth-child(3) { animation-delay: -.6s !important; }
.sound-bars i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* Required CC BY attribution for the background music */
.music-credit {
  position: fixed; z-index: 7; left: 50%; bottom: .45rem; transform: translateX(-50%);
  margin: 0; white-space: nowrap; font: 9px/1.4 'JetBrains Mono', monospace; letter-spacing: .08em; color: #3f5a4f;
}
.music-credit a { color: inherit; text-decoration: none; }
.music-credit a:hover { color: #b0d9d1; text-decoration: underline; }

@media (max-width: 640px) {
  .music-credit { font-size: 8px; white-space: normal; text-align: center; width: 92vw; bottom: .4rem; }
  .crawl-plane { width: 96vw; }
  .crawl-track { font-size: 9vw; letter-spacing: .12em; }
  .sound-toggle { bottom: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .crawl-track { animation: none; top: 30%; }
  .crawl-stars { animation: none; }
}

/* Link to the private /studio page, top center, styled like the HUD */
.studio-link {
  position: fixed; z-index: 7; top: 1.15rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .25em; color: #7f9a8e;
  background: rgb(3 8 6 / .6); border: 1px solid rgb(47 209 127 / .35); border-radius: 999px;
  padding: .55rem 1rem; backdrop-filter: blur(4px); transition: color .2s, border-color .2s, box-shadow .2s;
}
.studio-link:hover, .studio-link:focus-visible { color: #2fd17f; border-color: #2fd17f; outline: none; box-shadow: 0 0 18px rgb(47 209 127 / .3); }
.studio-link-dot { width: 6px; height: 6px; border-radius: 50%; background: #2fd17f; box-shadow: 0 0 8px #2fd17f; }
@media (max-width: 640px) { .studio-link { top: 3rem; font-size: 10px; } }