/* RS Labs – publik startsida. Hela bilden är världen (main.js); bara en liten logga nere till vänster, en ljudknapp nere till höger och en liten hem-knapp när man flugit iväg. */
:root {
  --bg: #000;
  --fg: #f5f2ec;
  --ember: #ff6a13;
  --dim: rgba(245, 242, 236, .55);
  --line: rgba(255, 106, 19, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: none; /* egen glödande pekare ritas i scenen */
}
body { background: var(--bg); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.noise {
  position: fixed; inset: -50%; pointer-events: none; z-index: 2;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Liten, diskret logga nere till vänster (rs.labs som konturer i logo.svg) */
.brand {
  position: fixed; z-index: 3; pointer-events: none;
  left: max(18px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  height: 24px; width: auto; opacity: .26;
  animation: glimmer 7s ease-in-out infinite;
}
body.nobrand .brand { display: none; }
@keyframes glimmer { 0%, 100% { opacity: .22; } 50% { opacity: .32; } }

/* Liten, diskret högtalarsymbol nere till höger: ljud av/på. Musiken startar vid första klick/tryck/tangent var som helst. */
.sound {
  position: fixed; z-index: 4; cursor: pointer;
  right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  width: 38px; height: 38px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(245, 242, 236, .38); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 106, 19, .22); border-radius: 50%;
  opacity: 0; animation: fade 1.2s ease 1s forwards;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.sound:hover, .sound:focus-visible { color: var(--fg); border-color: rgba(255, 106, 19, .6); box-shadow: 0 0 1em rgba(255, 106, 19, .2); outline: none; }
.sound svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound .spk { fill: currentColor; stroke: none; }
.sound .x { display: none; }
.sound[aria-pressed="false"] .w1, .sound[aria-pressed="false"] .w2 { display: none; }
.sound[aria-pressed="false"] .x { display: block; }
.sound[aria-pressed="true"] { color: var(--ember); border-color: rgba(255, 106, 19, .5); }
@keyframes fade { to { opacity: 1; } }

/* Liten hem-knapp (till vänster om högtalaren): syns bara när man flugit till en planet. Dubbeltryck/Esc gör samma sak. */
.home {
  position: fixed; z-index: 4; cursor: pointer;
  right: calc(max(16px, env(safe-area-inset-right)) + 48px); bottom: max(14px, env(safe-area-inset-bottom));
  width: 38px; height: 38px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(245, 242, 236, .38); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 106, 19, .22); border-radius: 50%;
  opacity: 0; pointer-events: none; transform: translateX(6px);
  transition: opacity .7s ease, transform .7s ease, color .3s, border-color .3s, box-shadow .3s;
}
body.away .home { opacity: 1; pointer-events: auto; transform: none; }
.home:hover, .home:focus-visible { color: var(--ember); border-color: rgba(255, 106, 19, .6); box-shadow: 0 0 1em rgba(255, 106, 19, .2); outline: none; }
.home svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.home .dot { fill: currentColor; stroke: none; }

.nojs { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; font-size: 2rem; letter-spacing: .3em; color: var(--dim); }

/* Utan WebGL: lugn gradient i stället för 3D, vanlig muspekare. */
html.nogl body { background: radial-gradient(60% 50% at 50% 50%, #1a0d04 0%, #0a0502 45%, var(--bg) 100%); cursor: auto; }

@media (prefers-reduced-motion: reduce) {
  .brand { animation: none; }
  .sound { animation-duration: .01s; animation-delay: 0s; }
  .home { transition-duration: .01s; }
}