/* cs-fx — the coming-soon effects, as LAYERS around the UI-system card: mesh + grid behind, the live
 * ticker tape along the bottom edge, the glow + float on the brand mark, the gradient wordmark. The
 * card's layout, spacing and classes are the UI system's and stay untouched. Tokens only, except the
 * gold accent (its own colour). */
:root { --cs-gold: #F5C518; --cs-gold-text: var(--cs-gold); --cs-tape: 32px; }
/* gh-886: the hero headline's gradient ends in gold; on the light page that gold is a deep one (≈ 5:1 on the light
   surface and over the art's mist — the bright gold is 1.6:1 there). Same conditions as tokens.css: [data-theme]
   decides, else the browser. */
:root[data-theme="light"] { --cs-gold-text: #8A5A00; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --cs-gold-text: #8A5A00; } }
.cs-fx { overflow-x: hidden; }

/* animated mesh + grid, behind everything */
.cs-mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 20% 25%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(700px 500px at 80% 75%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
    radial-gradient(500px 400px at 50% 110%, color-mix(in srgb, var(--cs-gold) 12%, transparent), transparent 60%);
  animation: csMeshDrift 22s ease-in-out infinite alternate; }
@keyframes csMeshDrift {
  0%   { filter: hue-rotate(0deg)  saturate(1);    transform: scale(1); }
  50%  { filter: hue-rotate(-8deg) saturate(1.05); transform: scale(1.02); }
  100% { filter: hue-rotate(6deg)  saturate(1.1);  transform: scale(1.04); } }
.cs-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--foreground) 3%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--foreground) 3%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); }

/* the card and the corner sit above the layers */
.cs-fx .auth-page { position: relative; z-index: 2; }
.cs-fx .auth-corner { z-index: 20; }

/* live tape along the bottom edge (real quotes or the brand line only — gh-562) */
.cs-ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--cs-tape); overflow: hidden;
  display: flex; align-items: center; background: color-mix(in srgb, var(--card) 88%, transparent);
  border-top: 1px solid var(--border); backdrop-filter: blur(6px) saturate(140%); }
.cs-ticker-track { display: inline-flex; gap: 36px; white-space: nowrap; padding-left: 100vw;
  font: 600 12px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: .04em;
  animation: csTickerSlide 60s linear infinite; }
.cs-ticker-item { color: var(--muted-foreground); }
.cs-ticker-item.up { color: var(--pnl-profit, #00FF00); }
.cs-ticker-item.down { color: var(--pnl-loss, #FF0000); }
.cs-ticker-item.brand { color: var(--primary); }
@keyframes csTickerSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* glow + float on the brand mark; gradient shift on the wordmark; pulsing dot on the badge */
.cs-fx .site-card .brand-mark { position: relative; z-index: 0; animation: csFloat 5.5s ease-in-out infinite; }
.cs-fx .site-card .brand-mark::before { content: ""; position: absolute; inset: -28px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent) 0%, transparent 70%);
  filter: blur(14px); animation: csGlow 3.5s ease-in-out infinite; }
@keyframes csFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes csGlow { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.cs-fx .site-card h1 {
  background: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, var(--primary) 55%, var(--foreground)) 40%, var(--primary) 70%, var(--cs-gold) 100%);
  background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: csGradient 8s ease-in-out infinite; }
@keyframes csGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.cs-badge { align-self: flex-start; gap: 8px; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: csDot 1.6s ease-in-out infinite; }
@keyframes csDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }


/* the marketing root (clawback.capital): same layers behind the nav + hero + cards; the tape along the
 * bottom edge, the footer lifted above it; glow on the nav brand mark, gradient on the hero title,
 * pulsing dot in the hero badge. Layout otherwise untouched. */
.cs-fx.site { padding-bottom: var(--cs-tape); }
.cs-fx .site-nav, .cs-fx .site-main, .cs-fx .site-footer { position: relative; z-index: 2; }
.cs-fx .site-nav { background: color-mix(in srgb, var(--background) 82%, transparent); backdrop-filter: blur(8px) saturate(140%); }
.cs-fx .site-nav .brand-mark { position: relative; z-index: 0; animation: csFloat 5.5s ease-in-out infinite; }
.cs-fx .site-nav .brand-mark::before { content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent) 0%, transparent 70%);
  filter: blur(12px); animation: csGlow 3.5s ease-in-out infinite; }
.cs-fx .hero h1 {
  background: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, var(--primary) 55%, var(--foreground)) 40%, var(--primary) 70%, var(--cs-gold-text) 100%);
  background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: csGradient 8s ease-in-out infinite; }
.cs-fx .hero .badge { display: inline-flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .cs-fx .site-nav .brand-mark, .cs-fx .site-nav .brand-mark::before, .cs-fx .hero h1 { animation: none; } }

/* the shinobi avatar (pre-U6 centrepiece) in the brand mark's slot: round, glowing, floating */
.cs-fx .site-card .cs-avatar { position: relative; z-index: 0; flex: none; width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--primary) 50%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 10%, transparent), 0 24px 56px color-mix(in srgb, var(--scrim) 55%, transparent);
  animation: csFloat 5.5s ease-in-out infinite; }
.cs-fx .site-card .cs-avatar-wrap { position: relative; display: inline-block; width: 120px; height: 120px; }
.cs-fx .site-card .cs-avatar-wrap::before { content: ""; position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 70%);
  filter: blur(18px); animation: csGlow 3.5s ease-in-out infinite; }
@media (max-width: 560px) { .cs-fx .site-card .cs-avatar, .cs-fx .site-card .cs-avatar-wrap { width: 96px; height: 96px; } }
@media (prefers-reduced-motion: reduce) { .cs-fx .site-card .cs-avatar, .cs-fx .site-card .cs-avatar-wrap::before { animation: none; } }

/* the legal text, revealed inside the coming-soon card (gh-654): a scrollable panel, the card's own width */
.cs-fx .site-card .cs-legal { display: flex; flex-direction: column; gap: var(--space-4); max-height: 56vh; overflow: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); scroll-margin-top: var(--space-4); }
.cs-fx .site-card .cs-legal-title { font: var(--text-h3); }
.cs-fx .site-card .cs-legal .prose { font: var(--text-small); }
.cs-fx .site-card .cs-legal .prose h2 { font: var(--text-body-md); font-weight: 600; }
.cs-fx .site-card .actions .btn[aria-expanded="true"] { background: var(--primary); color: var(--primary-foreground); }

@media (prefers-reduced-motion: reduce) {
  .cs-mesh, .cs-ticker-track, .cs-fx .site-card .brand-mark, .cs-fx .site-card .brand-mark::before, .cs-fx .site-card h1, .cs-dot { animation: none; } }