/* =====================================================================
   VIVIDVERSE HUB - OPENING PAGE  (v6 - force-graph cloud, warm dusk)
   The genres are a living constellation (Obsidian-graph feel): a plain-JS
   force simulation drifts the nodes into organic clusters around their
   world hubs. Genres LEAD as warm tags with a small emblem; worlds are
   quiet jewel dots until called. Warm DUSK field (not black, not cream).
   Nickie color correction 2026-07-07.
   ===================================================================== */

.home-page {
  --dusk-ink: #17122b;
  --dusk-plum: #2c1836;
  --dusk-indigo: #241a3e;
  --dusk-glow: rgba(255, 176, 120, 0.16);
  --tag-ink: #F3E9D6;            /* warm near-white for genre type on dusk */
  --tag-dim: rgba(243, 233, 214, 0.34);
  --gold: #F2C14E;              /* the golden thread */
  --link-rest: rgba(233, 214, 180, 0.16);
  /* jewel emblem palette (logo cool-to-warm-to-cool) */
  --emb-ember: #F0956B;
  --emb-starlit: #8FD4EC;
  --emb-sepia: #E0AE5C;
  --emb-noir: #56B69C;
  --emb-myth: #B692E6;
  --emb-valor: #F2C14E;
  --emb-literary: #E58AA0;

  margin: 0; min-height: 100dvh; color: var(--tag-ink);
  font-family: var(--font-body); overflow-x: hidden;
  background:
    radial-gradient(80% 42% at 50% 104%, var(--dusk-glow), transparent 72%),
    radial-gradient(130% 96% at 50% -6%, var(--dusk-plum) 0%, var(--dusk-indigo) 44%, var(--dusk-ink) 100%);
}

/* ---- top bar ---- */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--gutter); position: relative; z-index: 6; }
.home-top .wordmark { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; text-decoration: none; color: var(--tag-ink); letter-spacing: -0.01em; }
.home-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.8vw, 1.75rem); margin: 0; padding: 0; }
.home-nav a { font-weight: 600; text-decoration: none; color: var(--tag-ink); opacity: 0.82; transition: color 150ms, opacity 150ms; }
.home-nav a:hover, .home-nav a[aria-current="page"] { color: var(--gold); opacity: 1; }
.home-nav a[data-soon] { opacity: 0.45; }
.home-nav .nav-shop a { background: var(--gold); color: var(--dusk-ink); opacity: 1; padding: 0.35em 0.9em; border-radius: 999px; }
.home-nav .nav-shop a:hover { background: #fff; color: var(--dusk-ink); }

/* ---- the invitation ---- */
.home-head { text-align: center; padding: clamp(1.25rem, 3.5vw, 2.75rem) var(--gutter) 0; max-width: min(48rem, 92vw); margin-inline: auto; }
.home-head .invitation {
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.05; letter-spacing: -0.015em;
  margin: 0; color: #FBF3E2; text-wrap: balance; text-shadow: 0 0 2.5rem rgba(242, 193, 78, 0.25);
}

/* ---- the constellation stage ---- */
.constellation {
  position: relative; width: 100%; max-width: var(--page-max);
  margin: clamp(1rem, 2.5vw, 2rem) auto var(--space-4);
  height: clamp(46rem, 94vh, 64rem); touch-action: none;
}
/* ambient nebula: slow jewel-dusk glow + drifting motes behind everything */
.constellation .nebula { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.thread-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.thread-layer path { fill: none; stroke-linecap: round; }
/* resting web: faint, dormant, barely there — with a slow drift of light along it */
.thread-layer path.link { stroke: var(--link-rest); stroke-width: 1; transition: stroke 240ms, stroke-width 240ms; stroke-dasharray: 2 15; animation: threadDrift 7s linear infinite; }
.thread-layer path.link.lit { stroke-dasharray: 7 6; animation-duration: 2.4s; }
@keyframes threadDrift { to { stroke-dashoffset: -17; } }
.thread-layer path.link.lit { stroke: color-mix(in oklab, var(--gold) 70%, transparent); stroke-width: 1.6; }
/* the live golden thread on a pick */
.thread-layer path.active { stroke: var(--gold); stroke-width: 2.6; stroke-opacity: 1; filter: drop-shadow(0 0 7px color-mix(in oklab, var(--gold) 70%, transparent)); }

.node { position: absolute; transform: translate(-50%, -50%); }

/* ---- GENRE: warm tag, small emblem, bare (no box) ---- */
.genre {
  z-index: 4; background: none; border: none; padding: 0.1rem 0.2rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.45rem); letter-spacing: -0.01em; line-height: 1; color: var(--tag-ink);
  transition: color 160ms, opacity 240ms, transform 220ms var(--ease-standard), text-shadow 200ms;
}
.genre .emblem {
  width: 0.66em; height: 0.66em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 38% 34%, #fff, var(--e, var(--gold)) 78%);
  box-shadow: 0 0 0.5em 0.02em color-mix(in oklab, var(--e, var(--gold)) 60%, transparent);
}
.genre.e-ember    { --e: var(--emb-ember); }
.genre.e-starlit  { --e: var(--emb-starlit); }
.genre.e-sepia    { --e: var(--emb-sepia); }
.genre.e-noir     { --e: var(--emb-noir); }
.genre.e-myth     { --e: var(--emb-myth); }
.genre.e-valor    { --e: var(--emb-valor); }
.genre.e-literary { --e: var(--emb-literary); }
.genre:hover, .genre:focus-visible { color: #fff; outline: none; text-shadow: 0 0 1.1rem color-mix(in oklab, var(--e, var(--gold)) 55%, transparent); }
.genre.is-picked { color: #fff; transform: translate(-50%, -50%) scale(1.16); text-shadow: 0 0 1.5rem color-mix(in oklab, var(--gold) 60%, transparent); }
.genre.is-picked .emblem { box-shadow: 0 0 0.9em 0.08em color-mix(in oklab, var(--e, var(--gold)) 75%, transparent); }
/* fade the labels sitting in a crowded knot until hovered/active */
.constellation.is-picking .genre.dim { opacity: 0.3; }
.genre.crowded { opacity: 0.5; }
.genre.crowded:hover { opacity: 1; }

/* ---- WORLD: quiet jewel dot until called ---- */
.world { z-index: 3; }
.world-star {
  display: block; cursor: default; width: 1.05rem; height: 1.05rem; border-radius: 50%; padding: 0; border: none;
  background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--wa) 55%, #fff 10%), color-mix(in oklab, var(--wa) 60%, var(--dusk-ink)));
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--wa) 40%, transparent); opacity: 0.7;
  transition: transform 280ms var(--ease-standard), background 280ms, box-shadow 280ms, opacity 220ms, width 280ms, height 280ms;
}
.world-name {
  position: absolute; left: 50%; top: calc(50% + 1.25rem);
  transform: translateX(calc(-50% + var(--nudge, 0px))); white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  color: var(--tag-ink); opacity: 0; transition: opacity 220ms; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.constellation.is-picking .world.dim .world-star { opacity: 0.28; }
/* SECONDARY door: this tag also touches here */
.world.is-secondary .world-star { width: 1.35rem; height: 1.35rem; opacity: 0.95; box-shadow: 0 0 0.8rem color-mix(in oklab, var(--wa) 55%, transparent); }
.world.is-secondary .world-name { opacity: 0.6; }
/* PRIMARY door: the one you walk. Blooms in its own jewel color. */
.world.is-door .world-star {
  cursor: pointer; width: 2rem; height: 2rem; opacity: 1;
  background: radial-gradient(circle at 40% 35%, #fff, var(--wa));
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--wa) 28%, transparent), 0 0 2.75rem 0.4rem color-mix(in oklab, var(--wa) 60%, transparent);
}
.world.is-door .world-star:hover { transform: scale(1.14); }
.world.is-door .world-name { opacity: 1; }
.world:hover .world-name { opacity: 0.75; }
/* RESERVED world (When Magic): lights softly, not enterable */
.world.is-reserved .world-star { opacity: 0.4; }
.world.is-reserved-lit .world-star { cursor: default; width: 1.6rem; height: 1.6rem; opacity: 1; box-shadow: 0 0 0 4px color-mix(in oklab, var(--wa) 26%, transparent), 0 0 1.6rem color-mix(in oklab, var(--wa) 55%, transparent); }
.world.is-reserved-lit .world-name { opacity: 0.9; }

/* ---- guide feedback ---- */
.guide-live { text-align: center; min-height: 1.5em; padding: 0 var(--gutter); font-size: var(--type-caption); color: rgba(243, 233, 214, 0.66); }
.guide-live b { color: var(--gold); font-weight: 700; }

/* ---- Wander: small quiet bypass ---- */
.wander-bypass {
  position: fixed; top: calc(var(--space-3) + 0.15rem); right: var(--gutter); z-index: 7;
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; cursor: pointer;
  background: none; color: rgba(243, 233, 214, 0.6); border: none; padding: 0.3em 0.1em;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(243, 233, 214, 0.3);
  transition: color 150ms;
}
.wander-bypass:hover, .wander-bypass[aria-pressed="true"] { color: var(--gold); }

@media (max-width: 760px) {
  .constellation { height: auto; min-height: 54rem; }
  .genre { font-size: clamp(0.92rem, 3.5vw, 1.2rem); }
  .home-head .invitation { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .wander-bypass { position: absolute; top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .world-star, .genre { transition: none; }
  .constellation .nebula { display: none; }
  .thread-layer path.link { animation: none; stroke-dasharray: none; }
}