/* 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: 26px; 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; }

/* Lämna planeten (Robin 11-08, iPhone): liten knapp nere i mitten när man är framme vid en planet. Spaken ner gör samma sak (längst ut). */
.leave {
  position: fixed; z-index: 4; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 2px); transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px 0 12px; margin: 0; cursor: pointer;
  font: 400 11px/1 "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .22em; text-transform: lowercase;
  color: rgba(245, 242, 236, .78); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 106, 19, .45); border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .7s ease, transform .7s ease, color .3s, border-color .3s, box-shadow .3s;
}
.leave svg { fill: none; stroke: #ff6a13; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
body.orbit .leave { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); transition-delay: .6s, .6s, 0s, 0s, 0s; }
.leave:hover, .leave:focus-visible { color: #fff; border-color: rgba(255, 106, 19, .8); box-shadow: 0 0 1em rgba(255, 106, 19, .25); outline: none; }
/* på mobil: hem-knappen tydligare när man är borta (Robin såg den inte) */
@media (pointer: coarse) {
  body.away .home { color: rgba(245, 242, 236, .9); border-color: rgba(255, 106, 19, .7); background: rgba(0, 0, 0, .55); box-shadow: 0 0 14px rgba(255, 106, 19, .25); width: 44px; height: 44px; right: calc(max(16px, env(safe-area-inset-right)) + 50px); }
  .leave { height: 38px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 3px); }
}
@media (prefers-reduced-motion: reduce) { .leave { transition-duration: .01s; } }

/* Flyga runt: svagt tips "WASD / ← ↑ → ↓" (bara dator) och en spak nere till vänster (bara touch). Tonar in när "click a planet to start" har försvunnit (main.js: updateFlyHint). */
.keys {
  position: fixed; z-index: 3; pointer-events: none; margin: 0; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  font-size: 11px; letter-spacing: .32em; text-indent: .32em; white-space: nowrap; color: rgba(245, 242, 236, .75); text-shadow: 0 0 1em rgba(255, 106, 19, .35);
  opacity: 0; transition: opacity 1.6s ease; display: none;
}
.keys.show { opacity: .42; }
@media (pointer: fine) { .keys { display: block; } }
.stick {
  position: fixed; z-index: 4; display: none; touch-action: none;
  left: max(20px, calc(env(safe-area-inset-left) + 12px)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 46px);
  width: 96px; height: 96px; border-radius: 50%;
  border: 1.5px solid rgba(245, 242, 236, .7); background: radial-gradient(circle, rgba(255, 106, 19, .08), rgba(0, 0, 0, .25) 70%);
  opacity: 0; pointer-events: none; transition: opacity 1.2s ease;
}
.stick .knob { pointer-events: none; will-change: transform;
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ff9a55, #ff6a13 60%, #d9520a); box-shadow: 0 0 14px rgba(255, 106, 19, .55);
}
.stick.show { opacity: .35; pointer-events: auto; }
.stick.show.active { opacity: .85; transition: opacity .15s ease; }
@media (pointer: coarse) { .stick { display: block; } }

/* "click to start": svag text mitt på (under den stora loggan) som andas in; vid första klick/tryck/tangent (body.entered, audio.js) glider den isär och löses upp bland stjärnorna. */
.start {
  position: fixed; z-index: 3; pointer-events: none; margin: 0;
  left: 50%; top: 56.5%; transform: translate(-50%, -50%);
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .55em; text-indent: .55em; text-transform: lowercase; white-space: nowrap;
  color: rgba(245, 242, 236, .62); text-shadow: 0 0 1.2em rgba(255, 106, 19, .4);
  opacity: 0; animation: startIn 2.4s ease 1.2s forwards, startBreath 4.8s ease-in-out 3.6s infinite;
}
@keyframes startIn { to { opacity: .55; } }
@keyframes startBreath { 0%, 100% { opacity: .55; } 50% { opacity: .3; } }
body.entered .start {
  animation: startOut 2.6s cubic-bezier(.2, .6, .2, 1) forwards;
}
@keyframes startOut {
  from { opacity: .55; letter-spacing: .55em; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; letter-spacing: 1.6em; filter: blur(6px); transform: translate(-50%, -50%) scale(1.25); visibility: hidden; }
}
html.nogl .start { display: none; }
/* smala skärmar: "click a planet to start" får plats (tätare bokstäver, lite mindre) */
@media (max-width: 480px) { .start { font-size: 15px; letter-spacing: .32em; text-indent: .32em; } }
@media (max-width: 340px) { .start { font-size: 13px; letter-spacing: .24em; text-indent: .24em; } }

/* Tips: svag pekare som glider fram till månen, trycker (ringen vidgas) och tonar bort. Läget sätts från main.js (transform + --r = planetens radie i px). */
.hint { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .8s ease; }
.hint.show { opacity: 1; }
.hint .ring {
  position: absolute; left: 0; top: 0; width: calc(var(--r, 40px) * 2.4); height: calc(var(--r, 40px) * 2.4);
  border-radius: 50%; border: 1.5px solid rgba(255, 140, 60, .8); box-shadow: 0 0 1.4em rgba(255, 106, 19, .45), inset 0 0 1.2em rgba(255, 106, 19, .2);
  transform: translate(-50%, -50%) scale(.8); opacity: 0;
}
.hint .hand {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; fill: rgba(245, 242, 236, .92); stroke: rgba(255, 106, 19, .8); stroke-width: 1; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255, 106, 19, .7)); opacity: 0;
  transform: translate(calc(var(--r, 40px) * 2.6), calc(var(--r, 40px) * 2.1));
}
.hint.show .hand { animation: hintHand 7s cubic-bezier(.45, 0, .2, 1) forwards; }
.hint.show .ring { animation: hintRing 7s ease-out forwards; }
/* pekaren glider in, trycker två gånger (ringen pulserar vid varje tryck) och tonar bort */
@keyframes hintHand {
  0% { opacity: 0; transform: translate(calc(var(--r, 40px) * 2.6), calc(var(--r, 40px) * 2.1)) scale(1); }
  10% { opacity: 1; }
  30%, 36%, 54%, 60% { transform: translate(calc(var(--r, 40px) * .25), calc(var(--r, 40px) * .2)) scale(1); }
  33%, 57% { transform: translate(calc(var(--r, 40px) * .25), calc(var(--r, 40px) * .2)) scale(.78); }
  80% { opacity: 1; transform: translate(calc(var(--r, 40px) * .3), calc(var(--r, 40px) * .25)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--r, 40px) * .4), calc(var(--r, 40px) * .35)) scale(1); }
}
@keyframes hintRing {
  0%, 32% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  36% { opacity: 1; transform: translate(-50%, -50%) scale(.95); }
  52% { opacity: .35; transform: translate(-50%, -50%) scale(1.12); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

.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; }
  .start { animation: startIn .01s linear 0s forwards; }
  .hint.show .hand { animation: none; opacity: .8; transform: translate(calc(var(--r, 40px) * .25), calc(var(--r, 40px) * .2)); }
  .hint.show .ring { animation: none; opacity: .7; transform: translate(-50%, -50%); }
  body.entered .start { animation: none; opacity: 0; transition: opacity 1.2s ease; }
}

/* Planetens namn och en rad om den: tonar in under planeten när man har flugit dit (main.js: updateLabel, läget via transform). */
.plabel {
  position: fixed; z-index: 3; left: 0; top: 0; margin: 0; pointer-events: none; text-align: center; width: min(320px, 80vw);
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: rgba(245, 242, 236, .6);
  text-shadow: 0 0 1em rgba(0, 0, 0, .8), 0 0 1.4em rgba(255, 106, 19, .25); opacity: 0; transition: opacity 1.4s ease;
}
.plabel.show { opacity: 1; }
.plabel b { display: block; font-weight: 400; font-size: 13px; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: rgba(255, 196, 150, .75); }
.plabel span { display: block; margin-top: .55em; font-weight: 300; font-size: 13px; line-height: 1.5; letter-spacing: .04em; }
html.nogl .plabel { display: none; }
@media (prefers-reduced-motion: reduce) { .plabel { transition: opacity .6s ease; } }