/* ffp: TX-BRANDKIT declarative css
 * Tianxia brand kit — "Ethereal Glass": ephemeral · intent-driven · deep space yet bright.
 * Tokens only; import into any surface. No banned fonts (Inter/Roboto/Arial). */
:root {
  /* deep-space base */
  --tx-void: #050505;
  --tx-void-2: #0a0a12;
  --tx-glass: rgba(255,255,255,0.04);
  --tx-glass-strong: rgba(255,255,255,0.07);
  --tx-hairline: rgba(255,255,255,0.10);
  --tx-hairline-2: rgba(255,255,255,0.06);

  /* luminous accent spectrum (bright & beautiful) */
  --tx-aurora-1: #7c5cff;   /* violet */
  --tx-aurora-2: #22d3ee;   /* cyan */
  --tx-aurora-3: #34d399;   /* emerald */
  --tx-aurora-4: #f472b6;   /* rose */
  --tx-ink: rgba(255,255,255,0.92);
  --tx-ink-dim: rgba(255,255,255,0.55);

  /* type — premium, wide geometric grotesk */
  --tx-font-display: "Clash Display", "Geist", "Space Grotesk", system-ui, sans-serif;
  --tx-font-body: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  --tx-font-mono: "Geist Mono", ui-monospace, monospace;
  --tx-h1: clamp(2.5rem, 6vw, 5.5rem);
  --tx-eyebrow: 0.625rem;

  /* space + radius (double-bezel) */
  --tx-space: 1.5rem;
  --tx-section: clamp(5rem, 12vw, 10rem);
  --tx-r-outer: 2rem;
  --tx-r-inner: 1.625rem;

  /* motion — mass + spring, never linear/ease-in-out */
  --tx-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --tx-dur: 700ms;

  /* purple gradients (canonical Tianxia accents) */
  --tx-purple-1: #7c5cff;
  --tx-purple-2: #a855f7;
  --tx-purple-3: #6d28d9;
  --tx-purple-4: #c084fc;
  --tx-grad-purple: linear-gradient(120deg, #7c5cff 0%, #a855f7 45%, #c084fc 100%);
  --tx-grad-royal: linear-gradient(135deg, #6d28d9 0%, #7c5cff 50%, #22d3ee 100%);

  /* ambient light */
  --tx-glow: 0 0 60px -12px rgba(168,85,247,0.55);
  --tx-glow-purple: 0 0 80px -16px rgba(124,92,255,0.6);
  --tx-shadow-soft: 0 24px 80px -32px rgba(0,0,0,0.8);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--tx-void); color: var(--tx-ink);
  font-family: var(--tx-font-body); -webkit-font-smoothing: antialiased; min-height: 100dvh; }

/* deep-space layer: radial aurora + purple orbs on OLED black (fixed, non-interactive) */
.tx-space { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tx-space::before, .tx-space::after { content: ""; position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.6; }
.tx-space::before { width: 62vw; height: 62vw; left: -12vw; top: -12vw;
  background: radial-gradient(circle, var(--tx-purple-1), transparent 62%); }
.tx-space::after { width: 52vw; height: 52vw; right: -10vw; bottom: -12vw;
  background: radial-gradient(circle, var(--tx-purple-2), transparent 60%); }
/* third orb: royal purple core for depth */
.tx-orb { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 46vw; height: 46vw; left: 35%; top: 30%; opacity: 0.4; filter: blur(140px);
  background: radial-gradient(circle, var(--tx-purple-3), transparent 62%); }

/* film grain (fixed, above content, non-interactive) */
.tx-grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"); }

/* double-bezel glass panel (outer shell + inner core) */
.tx-panel { position: relative; padding: 0.5rem; border-radius: var(--tx-r-outer);
  background: var(--tx-glass); border: 1px solid var(--tx-hairline-2);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.tx-panel > .tx-core { border-radius: var(--tx-r-inner); background: rgba(10,10,18,0.55);
  border: 1px solid var(--tx-hairline-2); box-shadow: inset 0 1px 1px rgba(255,255,255,0.14);
  padding: var(--tx-space); }

/* eyebrow tag */
.tx-eyebrow { display: inline-block; font-size: var(--tx-eyebrow); letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--tx-glass-strong); border: 1px solid var(--tx-hairline); color: var(--tx-ink-dim); }

/* fluid island nav */
.tx-nav { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; gap: 0.25rem; padding: 0.375rem; border-radius: 999px;
  max-width: calc(100vw - 2rem); overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none; white-space: nowrap;
  background: rgba(10,10,18,0.72); border: 1px solid var(--tx-hairline);
  box-shadow: var(--tx-glow-purple);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.tx-nav::-webkit-scrollbar { display: none; }
.tx-nav a { color: var(--tx-ink-dim); text-decoration: none; padding: 0.5rem 1rem;
  border-radius: 999px; font-size: 0.85rem; transition: all var(--tx-dur) var(--tx-ease); }
.tx-nav a:hover, .tx-nav a[aria-current] { color: var(--tx-ink); background: var(--tx-glass-strong); }

/* mobile: keep the island clear of content, compact + swipeable */
@media (max-width: 768px) {
  .tx-nav { top: 0.65rem; padding: 0.28rem; gap: 0.1rem; max-width: calc(100vw - 1.25rem); }
  .tx-nav a { padding: 0.42rem 0.7rem; font-size: 0.74rem; }
  /* guarantee the hero never sits under the fixed island */
  .tx-wrap { padding-top: max(7rem, var(--tx-section)); }
}

/* button-in-button CTA */
.tx-cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.5rem;
  border-radius: 999px; background: var(--tx-grad-purple);
  color: #fff; font-weight: 600; border: 0; cursor: pointer;
  transition: transform var(--tx-dur) var(--tx-ease), box-shadow var(--tx-dur) var(--tx-ease); }
.tx-cta:hover { transform: translateY(-2px); box-shadow: var(--tx-glow); }
.tx-cta:active { transform: scale(0.98); }
.tx-cta .tx-cta-icon { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); transition: transform var(--tx-dur) var(--tx-ease); }
.tx-cta:hover .tx-cta-icon { transform: translate(3px,-3px) scale(1.05); }

/* intent bar */
.tx-intent { display: flex; gap: 0.5rem; align-items: center; }
.tx-intent input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--tx-ink);
  font: 500 1rem var(--tx-font-body); padding: 0.75rem 0.5rem; }
.tx-intent input::placeholder { color: var(--tx-ink-dim); }

/* entry animation */
@keyframes tx-rise { from { opacity: 0; transform: translateY(1.5rem); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); } }
.tx-rise { animation: tx-rise 800ms var(--tx-ease) both; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}