/* ── GUI upgrades (test build) ── */

/* 3. Page transitions: smooth crossfade between pages, and the name morphs from one to the other */
@view-transition { navigation: auto; }
.hub-header h1 { view-transition-name: hero-name; }
::view-transition-group(hero-name) { animation-duration: 0.65s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 4. Floating nav bar */
.fx-nav { position: fixed; top: 14px; left: 50%; z-index: 190; display: flex; align-items: center; gap: 4px; padding: 5px; max-width: calc(100% - 32px);
  border-radius: 999px; border: 1px solid var(--border-color); border-top: 1px solid rgba(255,255,255,0.7);
  background: var(--card-bg); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, top 0.3s; }
.fx-nav.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.fx-nav.below-live { top: 62px; }
.fx-nav-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--heading-color); padding: 6px 12px 6px 10px; white-space: nowrap; background: none; border: none; cursor: pointer; }
.fx-nav-sep { width: 1px; height: 18px; background: rgba(164,166,171,0.35); margin: 0 2px; flex: none; }
.fx-nav-links { display: contents; }
.fx-nav a { position: relative; font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4px; color: var(--social-color); text-decoration: none; padding: 6px 14px; border-radius: 999px; white-space: nowrap; transition: color 0.2s; z-index: 1; }
.fx-nav a:hover { color: var(--heading-color); }
.fx-nav a.active { color: var(--heading-color); }
.fx-nav-ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: rgba(184,148,63,0.14); border: 1px solid rgba(184,148,63,0.35); opacity: 0; transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; pointer-events: none; }
@media (max-width: 480px) { .fx-nav-name { display: none; } .fx-nav-sep:first-of-type { display: none; } .fx-nav a { padding: 6px 11px; } }

/* 8. Aether particles */
.fx-aether { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }