/* ------------------------------------------------------------------
   Frostholm splash — layout, fallback, reduced-motion.
   The visual itself is generated in app.js (WebGL). This file only
   handles page chrome and the CSS-only fallback.
   ------------------------------------------------------------------ */

:root {
  --bg: #05060f;
  --ink: #eaf0ff;
  --muted: rgba(234, 240, 255, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Full-viewport canvas. Sits above the fallback, below the overlay text. */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* ------------------------------------------------------------------
   CSS-only fallback (no WebGL / no JS / reduced motion safety net).
   A layered radial "nebula" over deep space. Drifts very slowly.
   ------------------------------------------------------------------ */
.fallback {
  position: fixed;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(40% 55% at 25% 30%, rgba(96, 52, 168, 0.45), transparent 60%),
    radial-gradient(45% 50% at 78% 70%, rgba(22, 120, 138, 0.40), transparent 62%),
    radial-gradient(70% 70% at 50% 50%, rgba(14, 18, 48, 0.90), transparent 70%),
    radial-gradient(circle at 50% 50%, #0a0c1d 0%, #05060f 70%, #02030a 100%);
  filter: saturate(115%);
  animation: drift 48s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.12); }
}


/* ------------------------------------------------------------------
   Centered wordmark overlay.
   ------------------------------------------------------------------ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;          /* never intercept the canvas interaction */
  padding: 1.5rem;
}

.wordmark {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.2rem, 9vw, 6rem);
  letter-spacing: clamp(0.3rem, 2.2vw, 1.1rem);
  text-indent: clamp(0.3rem, 2.2vw, 1.1rem); /* balance the trailing letter-spacing */
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(120, 90, 220, 0.35), 0 0 2px rgba(255, 255, 255, 0.4);
  animation: fadeUp 2.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tagline {
  margin: 1.2rem 0 0;
  font-size: clamp(0.7rem, 1.8vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--muted);
  animation: fadeUp 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ------------------------------------------------------------------
   Reduced motion: kill all animation, present a calm static frame.
   (app.js also renders only a single WebGL frame in this case.)
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fallback { animation: none; transform: translate3d(0, 0, 0) scale(1.05); }
  .wordmark,
  .tagline { animation-duration: 0.001ms; animation-delay: 0ms; }
}

/* ------------------------------------------------------------------
   Tuning control panel. Built by app.js on demand (gear button, the
   #tune URL hash, or the backtick key); not present otherwise.
   ------------------------------------------------------------------ */
.tune-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 290px;
  max-height: calc(100vh - 24px);
  /* The panel itself scrolls; the header and footer are sticky. */
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(10, 12, 22, 0.82);
  border: 1px solid rgba(150, 160, 200, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  color: #dde3f5;
  font: 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.tune-panel::-webkit-scrollbar { width: 8px; }
.tune-panel::-webkit-scrollbar-thumb { background: rgba(150, 160, 200, 0.25); border-radius: 4px; }

.tune-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 10px 12px;
  background: rgba(12, 14, 26, 0.96);
  border-bottom: 1px solid rgba(150, 160, 200, 0.15);
}
.tune-head strong { font-weight: 600; letter-spacing: 0.06em; }
.tune-head span { color: rgba(221, 227, 245, 0.45); text-transform: uppercase; font-size: 10px; letter-spacing: 0.18em; }

.tune-btns { margin-left: auto; display: flex; gap: 6px; }
.tune-btns button {
  cursor: pointer;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  color: #dde3f5;
  background: rgba(120, 130, 175, 0.16);
  border: 1px solid rgba(150, 160, 200, 0.22);
  border-radius: 6px;
}
.tune-btns button:hover { background: rgba(140, 150, 200, 0.3); }

.tune-body { padding: 6px 12px 12px; }

.tune-group {
  margin: 12px 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(170, 180, 220, 0.65);
  border-bottom: 1px dashed rgba(150, 160, 200, 0.18);
  padding-bottom: 3px;
}

.tune-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
  padding: 4px 0;
}
.tune-label { color: rgba(221, 227, 245, 0.8); }
.tune-val { color: #9fb4ff; font-variant-numeric: tabular-nums; }
.tune-row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #8aa0ff; height: 16px; }
.tune-row input[type="color"] {
  grid-column: 2; width: 34px; height: 20px; padding: 0;
  background: none; border: 1px solid rgba(150, 160, 200, 0.3); border-radius: 4px; cursor: pointer;
}

/* Subtle launcher button, bottom-right. Visible to all visitors; hidden
   while the panel is open. */
.tune-open {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: rgba(234, 240, 255, 0.55);
  background: rgba(20, 22, 36, 0.32);
  border: 1px solid rgba(180, 190, 230, 0.18);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.tune-open:hover {
  opacity: 1;
  color: #eaf0ff;
  transform: rotate(40deg);
}
.tune-open:focus-visible { opacity: 1; outline: 1px solid rgba(180, 190, 230, 0.5); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tune-open { transition: none; }
  .tune-open:hover { transform: none; }
}