/* Domain Alpha — shared futuristic theme (2026-10-13).
   Scoped to body.futur: loaded by the home (with landing.css), the blog, the selection and the
   history. Every other page keeps the standard theme. Direction: deep-space dark, indigo/violet
   light, serif display titles, glass surfaces, a floating pill navigation. Pure CSS. */

html:has(body.futur) { background: #05060b; }
body.futur {
  --bg: #05060b;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-raised: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --blue: #5b5bf0;
  --blue-strong: #8e8cff;
  --blue-soft: rgba(91, 91, 240, 0.16);
  --cyan: #8fd8ff;
  --accent: #c9b6ff;
  --accent-soft: rgba(201, 182, 255, 0.09);
  --ink: #f6f6ff;
  --ink-soft: #cdcde0;
  --muted: #8f8fa6;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --glass: rgba(255, 255, 255, 0.04);
  --glow: 0 14px 54px rgba(91, 91, 240, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: var(--bg);
  overflow-x: hidden;
}
body.futur .side-marquee { display: none !important; }

/* ---- atmosphere: soft violet light from above + film grain ---- */
body.futur::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(99, 102, 241, 0.26), transparent 70%),
    radial-gradient(35% 30% at 92% 62%, rgba(143, 216, 255, 0.07), transparent 70%),
    radial-gradient(40% 30% at 5% 85%, rgba(201, 182, 255, 0.07), transparent 70%);
}
/* Perf (visual-neutral): the grain used to be computed by the browser (an SVG noise filter under a full-screen
   blend overlay), ~1.5 s of first-paint cost on a throttled phone; it is now a pre-rendered 128px noise tile. */
body.futur::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.28;
  background-image: url("img/grain.png"); background-size: 128px 128px;
}

/* ---- header: floating glass pill ---- */
body.futur .site-header {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(960px, calc(100% - 2rem));
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.futur .site-header .bar { max-width: none; padding: 0.55rem 0.6rem 0.55rem 1.3rem; }
body.futur .brand { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.01em; }
body.futur .site-header nav a { color: var(--ink-soft); }
body.futur .site-header nav a.nav-accent { color: var(--blue-strong); }
.nav-cta {
  padding: 0.5rem 1.05rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(99, 102, 241, 0.7); }
body.futur .site-footer { border-top: 1px solid var(--border); background: transparent; }
body.futur .result-cta, body.futur .cta { background: linear-gradient(135deg, #6366f1, #4f46e5); }
body.futur .cta { border-radius: 12px; box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45); }
body.futur .result-cta { border-radius: 10px; }

/* ---- inner pages (blog, selection, history): clear the floating header, serif titles ---- */
body.futur:not(.landing) main { padding-top: 6.4rem; }
body.futur .eyebrow { color: var(--blue-strong); }
body.futur .page-head h1, body.futur .blog-article h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; color: transparent;
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  background: linear-gradient(180deg, #ffffff 10%, #cfcbff 70%, #a29eff 100%); -webkit-background-clip: text; background-clip: text;
}
body.futur .page-head h1 code { font-family: var(--font-mono); -webkit-text-fill-color: var(--blue-strong); font-size: 0.5em; letter-spacing: 0; white-space: nowrap; vertical-align: middle; padding: 0.15em 0.6em; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
body.futur .page-head .muted, body.futur .blog-article-date { color: var(--muted); }
body.futur .text-link { color: var(--blue-strong); border-color: rgba(142, 140, 255, 0.4); }
body.futur .text-link:hover, body.futur .text-link:focus-visible { color: var(--cyan); border-color: var(--cyan); }

/* glass surfaces shared by the inner pages */
body.futur .table-wrap, body.futur .disclaimer, body.futur .mask-note, body.futur .premium-banner, body.futur .premium-cta-banner,
body.futur .premium-lock, body.futur .batch-list li, body.futur .blog-list-link, body.futur .faq-list details {
  background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.futur .disclaimer { border-left: 3px solid var(--accent); }
body.futur .premium-banner-success, body.futur .premium-banner-active { background: var(--candidate-soft); border-color: var(--candidate); }
body.futur .premium-cta-banner { border-color: rgba(142, 140, 255, 0.4); background: linear-gradient(180deg, rgba(91, 91, 240, 0.16), rgba(255, 255, 255, 0.03)); }
body.futur .premium-lock { border-style: dashed; border-color: var(--border-strong); }
body.futur .filters select { background: rgba(0, 0, 0, 0.35); border-color: var(--border-strong); color: var(--ink); }

/* selection table */
body.futur table.domains th { background: transparent; }
body.futur table.domains tbody tr.row:hover { background: rgba(142, 140, 255, 0.08); }
body.futur table.domains tbody tr.row.expanded { background: rgba(142, 140, 255, 0.12); }
body.futur table.domains tbody tr.detail td { background: rgba(255, 255, 255, 0.025); }
body.futur table.domains .num { color: var(--ink); }
body.futur .quality-tag { backdrop-filter: none; }

/* history + blog lists */
body.futur .batch-list li, body.futur .blog-list-link { transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; }
body.futur .batch-list li:hover, body.futur .blog-list-link:hover, body.futur .blog-list-link:focus-visible {
  background: var(--surface-raised); border-color: rgba(142, 140, 255, 0.55); box-shadow: var(--glow); transform: translateY(-2px);
}
body.futur .blog-list { max-width: 48rem; }
body.futur .blog-list-link { border-radius: 16px; }
body.futur .blog-list-item h2 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; }
body.futur .blog-list-date { color: var(--blue-strong); }

/* article */
body.futur .blog-article { max-width: 46rem; }
body.futur .blog-article-body { color: var(--ink-soft); }
body.futur .blog-article-body h2, body.futur .blog-article-body h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
body.futur .blog-article-body h2 { font-size: clamp(1.8rem, 3.6vw, 2.35rem); margin: 2.6rem 0 1rem; }
body.futur .blog-article-body h3 { font-size: 1.5rem; margin: 1.8rem 0 0.7rem; }
body.futur .blog-article-body p, body.futur .blog-article-body li { font-size: 1.02rem; line-height: 1.8; }
body.futur .blog-article-body a { color: var(--blue-strong); text-decoration: underline; text-decoration-color: rgba(142, 140, 255, 0.4); text-underline-offset: 3px; }
body.futur .blog-article-body a:hover, body.futur .blog-article-body a:focus-visible { color: var(--cyan); text-decoration-color: var(--cyan); }
body.futur .blog-article-body blockquote { margin: 1.6rem 0; padding: 0.9rem 1.2rem; border-left: 3px solid var(--blue-strong); background: var(--glass); border-radius: 0 12px 12px 0; }
body.futur .blog-article-body code { background: rgba(255, 255, 255, 0.07); border-radius: 5px; padding: 0.1em 0.4em; color: #dcd8ff; }
body.futur .blog-article-body table { background: var(--glass); border: 1px solid var(--border); border-radius: 12px; }
body.futur .blog-article-body th { color: var(--blue-strong); }
body.futur .blog-article-body ul li::marker { color: var(--blue-strong); }

/* ---- small screens: the header becomes a bar ---- */
@media (max-width: 760px) {
  body.futur .site-header { position: sticky; top: 0; left: auto; transform: none; width: 100%; border-radius: 0 0 22px 22px; border-top: none; }
  .nav-cta { display: none; }
  body.futur:not(.landing) main { padding-top: 0; }
  body.futur .page-head h1, body.futur .blog-article h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  body.futur .batch-list li, body.futur .blog-list-link { transition: none; }
}