/* ============================================================
   AETHER marketing design system (ab-)
   Shared by About, Coder and other marketing pages. Namespaced so
   nothing collides with theme.css. Must load AFTER theme.css: the
   rules below consume theme tokens such as var(--surface-1).
   ============================================================ */

/* Accent tokens: dev = brand blue/cyan, admin = violet/indigo */
.ab-scope {
    --ab-dev: #0095FF;
    --ab-dev-2: #00D4FF;
    --ab-admin: #8B5CF6;
    --ab-admin-2: #6366F1;
}

/* Smooth in-page scrolling, but only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
.ab-anchor { scroll-margin-top: 6rem; }

/* Sticky, glassy header that themes with the tokens */
.ab-header {
    background: var(--surface-1); /* fallback for browsers without color-mix */
    background: color-mix(in srgb, var(--surface-1) 80%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

/* Eyebrow label */
.ab-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--text-muted);
}
.ab-eyebrow .ab-dot {
    width: .5rem; height: .5rem; border-radius: 9999px;
    background: var(--ab-dev); box-shadow: 0 0 0 4px var(--accent-soft);
}
.ab--admin .ab-eyebrow .ab-dot { background: var(--ab-admin); box-shadow: 0 0 0 4px rgba(139,92,246,.16); }

/* Gradient display text */
.ab-grad {
    background: linear-gradient(100deg, var(--ab-dev-2), var(--ab-dev) 45%, var(--ab-admin-2) 80%, var(--ab-admin));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Hero atmosphere: aurora blobs + constellation ---- */
.ab-hero { position: relative; overflow: hidden; isolation: isolate; }
.ab-aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ab-blob {
    position: absolute; border-radius: 9999px; filter: blur(70px);
    opacity: .55; mix-blend-mode: screen;
    animation: ab-drift 22s ease-in-out infinite;
}
html.light .ab-blob { opacity: .32; filter: blur(80px); }
.ab-blob.b1 { width: 42rem; height: 42rem; top: -16rem; left: -10rem; background: radial-gradient(circle, #00D4FF, transparent 60%); }
.ab-blob.b2 { width: 40rem; height: 40rem; top: -10rem; right: -12rem; background: radial-gradient(circle, #0095FF, transparent 60%); animation-delay: -7s; }
.ab-blob.b3 { width: 38rem; height: 38rem; bottom: -20rem; left: 30%; background: radial-gradient(circle, #8B5CF6, transparent 60%); animation-delay: -13s; }

@keyframes ab-drift {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    33%      { transform: translate3d(4%, 3%, 0) scale(1.08); }
    66%      { transform: translate3d(-3%, -4%, 0) scale(.95); }
}

.ab-constellation { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.ab-constellation .net { animation: ab-net-drift 30s ease-in-out infinite; transform-origin: 50% 50%; }
.ab-constellation line { stroke: url(#abEdge); stroke-width: 1; }
.ab-constellation circle { fill: #00D4FF; }
.ab-constellation circle.v { fill: #8B5CF6; }
.ab-constellation .nd { animation: ab-pulse 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
html.light .ab-constellation { opacity: .7; }

@keyframes ab-net-drift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(.6deg); } }
@keyframes ab-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Scroll cue */
.ab-cue { width: 1.4rem; height: 2.3rem; border: 2px solid var(--border-strong); border-radius: 9999px; display: inline-flex; justify-content: center; padding-top: .35rem; }
.ab-cue span { width: .28rem; height: .55rem; border-radius: 9999px; background: var(--ab-dev); animation: ab-bob 1.6s ease-in-out infinite; }
@keyframes ab-bob { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(.5rem); opacity: 1; } }

/* Anchor pills */
.ab-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: 9999px; font-weight: 600; font-size: .9rem;
    border: 1px solid var(--border-subtle); background: var(--surface-1);
    color: var(--text-secondary); transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.ab-pill:hover { transform: translateY(-2px); color: var(--text-primary); }
.ab-pill.is-dev:hover { border-color: var(--ab-dev); }
.ab-pill.is-admin:hover { border-color: var(--ab-admin); }
.ab-pill .ab-dot { width: .5rem; height: .5rem; border-radius: 9999px; }
.ab-pill.is-dev .ab-dot { background: var(--ab-dev); }
.ab-pill.is-admin .ab-dot { background: var(--ab-admin); }

/* ---- Scroll reveal ---- */
.ab-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--ab-d, 0ms); }
.ab-reveal.is-in { opacity: 1; transform: none; }

/* ---- Stat tiles ---- */
.ab-stat { position: relative; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-1); padding: 1.5rem; overflow: hidden; }
.ab-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--ab-dev), var(--ab-admin)); }
.ab-stat .num { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---- Browser-framed screenshots ---- */
.ab-frame { border-radius: .9rem; overflow: hidden; border: 1px solid var(--border-subtle); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.ab-frame__bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: var(--surface-3); border-bottom: 1px solid var(--border-subtle); }
.ab-frame__dot { width: .6rem; height: .6rem; border-radius: 9999px; }
.ab-frame__url {
    margin-left: .4rem; flex: 1; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: .72rem; color: var(--text-muted); background: var(--surface-1);
    border: 1px solid var(--border-subtle); border-radius: 9999px; padding: .2rem .7rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-frame__shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; cursor: zoom-in; }
.ab-frame__shot:focus-visible { outline: 2px solid var(--ab-dev); outline-offset: 2px; }
.ab-shot-16x10 { aspect-ratio: 16 / 10; }

/* Tilt + float for the flagship frame */
.ab-tilt { perspective: 1100px; }
.ab-tilt__inner { transition: transform .25s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; will-change: transform; animation: ab-float 7s ease-in-out infinite; }
@keyframes ab-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---- Icon feature cards ---- */
.ab-card {
    position: relative; height: 100%; border: 1px solid var(--border-subtle); border-radius: 1rem;
    background: var(--surface-1); padding: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ab-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ab--dev .ab-card:hover { border-color: color-mix(in srgb, var(--ab-dev) 55%, transparent); }
.ab--admin .ab-card:hover { border-color: color-mix(in srgb, var(--ab-admin) 55%, transparent); }
.ab-ic {
    width: 3rem; height: 3rem; border-radius: .85rem; display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem; transition: transform .2s ease;
}
.ab-card:hover .ab-ic { transform: scale(1.08) rotate(-3deg); }
.ab--dev .ab-ic { background: rgba(0,149,255,.12); color: var(--ab-dev); }
.ab--admin .ab-ic { background: rgba(139,92,246,.12); color: var(--ab-admin); }
.ab-ic svg { width: 1.5rem; height: 1.5rem; }
.ab-card h3 { font-weight: 700; color: var(--text-primary); margin-bottom: .35rem; }
.ab-card p { color: var(--text-muted); font-size: .92rem; line-height: 1.55; }

/* Inline benefit chips */
.ab-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 9999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--border-subtle); background: var(--surface-1); color: var(--text-secondary); }
.ab-chip svg { width: .9rem; height: .9rem; }
.ab--dev .ab-chip svg { color: var(--ab-dev); }
.ab--admin .ab-chip svg { color: var(--ab-admin); }

/* ---- Section accent rules ---- */
.ab--admin-tint { position: relative; }
.ab--admin-tint::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 60% at 80% 0%, rgba(139,92,246,.10), transparent 60%); }

/* ---- Provider strip: inline SVG marks (Simple Icons path data, single <path>,
   fill="currentColor"), not remote logo files or an icon font ----
   Deliberate choice: zero third-party requests, no binaries, no per-logo dark variant
   to maintain, greyscale by inheriting var(--text-muted) via currentColor. Each icon's
   viewBox is cropped to its own glyph bounding box (plus a small pad) rather than the
   published 0 0 24 24 box, so seven marks of different natural aspect ratios (a near-square
   OpenAI glyph next to a wide Anthropic wordmark, say) all scale to fill the same optical
   box instead of the wide ones reading heavier just because their box is taller; scaling
   the shared box at each breakpoint keeps that balance as the strip grows. Ollama is last
   by design: it is the self-hosted case the line below the strip already names, so ordering
   alone makes that connection without adding per-logo captions. Seven items do not divide
   evenly into any column count that fits below 1280px, so the strip is flex-wrap with
   centred rows rather than a fixed grid: a grid would pin the odd item to the left edge of
   its last row, flex centres whatever that row holds. Tiles stay content-sized and the
   desktop column gap is 4rem (down from the 5rem the six-item grid used), which is what
   lets all seven sit on one line inside the page's usual max-w-7xl from 1280px up. Below
   that, an uncapped strip would fit five or six and drop the rest underneath, so each
   tier caps the strip (28rem, 32rem, 40rem: wide enough for four tiles at that tier's
   font and gap, too narrow for five, with about 5% slack for other system fonts) so it
   breaks 4+3 wherever four fit; the cap lifts at 1280px. Narrower phones get 3+3+1 or
   2+3+2, every row centred, nothing overflowing at 320px. */
.ab-providers {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: flex-start;
    gap: 2rem 2.25rem;
    max-width: 28rem; margin-inline: auto;
}
@media (min-width: 640px) {
    .ab-providers { gap: 2rem 3rem; max-width: 32rem; }
}
@media (min-width: 900px) {
    .ab-providers { gap: 2.25rem 4rem; max-width: 40rem; }
}
@media (min-width: 1280px) {
    .ab-providers { max-width: none; }
}
.ab-provider {
    display: flex; flex-direction: column; align-items: center;
    gap: .75rem;
    font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--text-muted); text-align: center;
    transition: color .2s ease, transform .2s ease;
}
@media (min-width: 640px) {
    .ab-provider { font-size: 1.3rem; }
}
@media (min-width: 900px) {
    .ab-provider { font-size: 1.5rem; }
}
.ab-provider:hover { color: var(--text-primary); transform: translateY(-2px); }
.ab-provider-logo { display: block; width: 2.25rem; height: 2.25rem; }
@media (min-width: 640px) {
    .ab-provider-logo { width: 2.5rem; height: 2.5rem; }
}
@media (min-width: 900px) {
    .ab-provider-logo { width: 3rem; height: 3rem; }
}
.ab-provider-name { display: block; white-space: nowrap; }

/* ---- Final CTA band ---- */
.ab-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #0077CC, #0095FF 38%, #6366F1 78%, #8B5CF6); }
.ab-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% -20%, rgba(255,255,255,.22), transparent 55%); pointer-events: none; }
.ab-btn-light { background: #fff; color: #0B1120; }
.ab-btn-light:hover { background: #eef2ff; }
.ab-btn-ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; }
.ab-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---- Reduced motion: still beautiful, just still ---- */
@media (prefers-reduced-motion: reduce) {
    .ab-blob, .ab-constellation .net, .ab-constellation .nd, .ab-cue span,
    .ab-tilt__inner { animation: none !important; }
    .ab-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}