/* ============================================================================
   CoinLobster "Deep" — the distinctive visual world (2026-09, docs/cl-design.txt)
   Concept: a clever lobster diving beneath the market, detecting activity others
   can't, surfacing it. Four reusable motifs: MASCOT, market CURRENTS, SONAR /
   detection, and DEPTH (things emerging from darker layers). Class-scoped so it
   is safe to load on any page; the heavy atmospherics apply only under .aiwrap.
   Loads AFTER ai-first.css (reuses its --ai-* tokens). Restrained motion,
   prefers-reduced-motion honoured, one authored moment per section.
   ========================================================================== */

/* Skip-link: off-screen until keyboard-focused. Was rendering as visible text
   at the top of the near-black pages (the incumbent .skip-link style did not
   reach them). Themed to the accent when it appears. */
.skip-link { position: absolute; top: -80px; left: 12px; z-index: 2000; padding: 10px 18px; border-radius: 10px;
    background: #EE5A2C; color: #1a0a03; font-weight: 700; font-size: .9rem; text-decoration: none;
    transition: top .18s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 10px 28px -8px rgba(238,90,44,0.6); }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

/* Slim, task-first product-page header (partials/cl-slimhead.ejs). Replaces the
   marketing detector hero on the data pages so the feed/table leads. Compact:
   ~one line of title, a muted sub, a LIVE pill and a small lobster mark. */
.cl-slim { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; padding: 6px 0 16px; margin: 0 0 4px; border-bottom: 1px solid rgba(255,246,234,0.09); }
.cl-slim__lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cl-slim__mark { flex: 0 0 auto; display: inline-flex; }
.cl-slim__text { min-width: 0; }
.cl-slim__title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.1; letter-spacing: -0.015em;
    font-weight: 800; color: #FFF6EA; margin: 0; }
.cl-slim__title .ai-up { color: #37D98A; } .cl-slim__title .ai-down { color: #FA5772; }
.cl-slim__sub { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.4; color: #A9C2D6; max-width: 74ch; }
.cl-slim__live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #37D98A;
    background: rgba(55,217,138,0.12); border: 1px solid rgba(55,217,138,0.3); border-radius: 999px; padding: 5px 11px; }
.cl-slim__pip { width: 7px; height: 7px; border-radius: 50%; background: #37D98A; box-shadow: 0 0 0 0 rgba(55,217,138,0.6);
    animation: clSlimPulse 2s ease-in-out infinite; }
.cl-slim__count { color: #8FB0C9; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
@keyframes clSlimPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .cl-slim__pip { animation: none; } }
@media (max-width: 560px) { .cl-slim { padding-top: 2px; } .cl-slim__sub { font-size: 0.82rem; } }

:root {
    --cl-teal:      #33C2C8;   /* restrained aqua, used sparingly (sonar sweep, currents) */
    --cl-teal-soft: rgba(51,194,200,0.14);
    --cl-depth-0:   #0A1826;   /* surface */
    --cl-depth-1:   #071320;   /* mid */
    --cl-depth-2:   #050D17;   /* deep */
}

/* ── DEPTH: the near-black ocean the page floats in ─────────────────────────
   Not a flat navy and not gradient blobs: a vertical tonal descent (lighter at
   the surface, near-black in the deep) plus one very soft top illumination and
   a faint fixed depth vignette. All under 9% opacity. */
.aiwrap {
    background:
        radial-gradient(120% 60% at 50% -8%, rgba(255,246,234,0.05), transparent 60%),
        radial-gradient(90% 50% at 82% 8%, rgba(51,194,200,0.045), transparent 55%),
        linear-gradient(180deg, var(--cl-depth-0) 0%, var(--cl-depth-1) 46%, var(--cl-depth-2) 100%)
        var(--ai-bg, #08131F);
    background-attachment: fixed;
    position: relative;
}
/* a fixed depth vignette so the edges recede into the deep on every scroll */
.aiwrap::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(130% 120% at 50% 30%, transparent 55%, rgba(3,8,14,0.55) 100%);
}
.aiwrap > * { position: relative; z-index: 1; }

/* ── MOTIF: MARKET CURRENTS ─────────────────────────────────────────────────
   Fine flowing paths of money/data. Rendered as an inline SVG (partials/
   cl-currents) whose strokes drift. Sparse, low opacity, background only. */
.cl-currents { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; opacity: 0.5; }
.cl-currents path { fill: none; stroke-width: 1.1; stroke-linecap: round;
    stroke-dasharray: 5 210; opacity: 0.5; animation: cl-current-drift linear infinite; }
.cl-currents path:nth-child(odd)  { stroke: var(--cl-teal); animation-duration: 14s; }
.cl-currents path:nth-child(even) { stroke: var(--ai-orange, #EE5A2C); animation-duration: 19s; opacity: 0.4; }
.cl-currents path:nth-child(3n)   { animation-duration: 24s; }
@keyframes cl-current-drift { to { stroke-dashoffset: -430; } }

/* ── MOTIF: SONAR / DETECTION ───────────────────────────────────────────────
   Expanding rings from a detection point, with an orange core. Used where
   CoinLobster "finds" something. .cl-sonar is the point; rings pulse outward. */
.cl-sonar { position: relative; display: inline-flex; width: 12px; height: 12px; flex: none; }
.cl-sonar__dot { position: absolute; inset: 3px; border-radius: 50%; background: var(--ai-orange, #EE5A2C);
    box-shadow: 0 0 10px 1px rgba(238,90,44,0.6); }
.cl-sonar__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(238,90,44,0.55);
    animation: cl-sonar-ping 2.6s var(--ai-ease, ease-out) infinite; }
.cl-sonar__ring:nth-child(2) { animation-delay: 0.9s; }
.cl-sonar__ring:nth-child(3) { animation-delay: 1.8s; }
@keyframes cl-sonar-ping { 0% { transform: scale(1); opacity: 0.9; } 80%,100% { transform: scale(5.5); opacity: 0; } }

/* a large ambient sweep for hero/section backdrops (teal, very faint) */
.cl-sweep { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: conic-gradient(from 0deg, rgba(51,194,200,0.12), transparent 22%, transparent 100%);
    animation: cl-sweep-rot 9s linear infinite; opacity: 0.6; mix-blend-mode: screen; }
@keyframes cl-sweep-rot { to { transform: rotate(360deg); } }

/* ── MOTIF: MASCOT ──────────────────────────────────────────────────────────
   The real lobster (public/images/lobster.png, cyan splash keyed out), given a
   subtle life: an idle float, a "dive" surface, and a cursor-lean parallax.
   Never bobs constantly; small surprises only. */
.cl-mascot { display: inline-block; position: relative; flex: none; line-height: 0;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)); will-change: transform; }
.cl-mascot img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.cl-mascot--float { animation: cl-float 6s var(--ai-ease, ease-in-out) infinite; }
@keyframes cl-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
/* a soft detection halo directly under a surfacing mascot (the light of the deep) */
.cl-mascot__halo { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%,-50%); z-index: -1; pointer-events: none;
    background: radial-gradient(circle, rgba(51,194,200,0.22), rgba(238,90,44,0.10) 40%, transparent 70%); }
/* lean toward the cursor: JS sets --lx/--ly in the range [-1,1] */
.cl-mascot--lean { transition: transform .5s var(--ai-ease, ease-out); transform: rotateX(calc(var(--ly,0) * -6deg)) rotateY(calc(var(--lx,0) * 8deg)); transform-style: preserve-3d; }

/* ── Corner mascots become the instrument in a detection ring ────────────────
   .hero-mascot is the top-right hero sticker used across ~19 pages (inline
   position + opacity baked per page). This upgrades every one of them at once
   into the same live sonar-ring emblem as page-hero / vs-hero, no per-page edit. */
.hero-mascot { opacity: 1 !important; width: 86px !important; height: 86px !important; border-radius: 50%; display: grid !important; place-items: center;
    background: radial-gradient(circle, rgba(51,194,200,0.16), rgba(238,90,44,0.05) 46%, transparent 66%);
    border: 1px solid rgba(51,194,200,0.28);
    box-shadow: 0 0 0 8px rgba(51,194,200,0.04), 0 0 24px rgba(51,194,200,0.18), 0 8px 16px rgba(0,0,0,0.42);
    filter: none !important; }
.hero-mascot img { width: 54px !important; height: 54px !important; }

/* ── BUTTON REFINEMENT (§17): less pill, tactile, sonar-pulse hover ──────────
   Overrides ai-first.css .ai-btn radius + adds a detection ring on hover. */
.ai-btn { border-radius: 13px; position: relative; overflow: visible; }
.ai-btn--primary {
    background: linear-gradient(180deg, #F26a3a, var(--ai-orange, #EE5A2C));
    box-shadow: 0 10px 26px -10px rgba(238,90,44,0.6), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(140,40,10,0.35);
}
.ai-btn--primary::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    border: 1.5px solid rgba(238,90,44,0.7); opacity: 0; transform: scale(1);
}
.ai-btn--primary:hover::after { animation: cl-btn-ping .7s var(--ai-ease, ease-out); }
@keyframes cl-btn-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

/* ── DEPTH REVEAL (§16/§24): content surfaces from the dark on scroll ────────
   JS adds .is-in when the element enters the viewport. From below + a touch of
   blur, exponential ease-out. Default state is fully visible (progressive
   enhancement): the reveal only arms once JS marks the page .cl-reveal-ready. */
.cl-reveal-ready .cl-reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.cl-reveal-ready .cl-reveal.is-in { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--ai-ease, ease-out), transform .8s var(--ai-ease, ease-out), filter .8s var(--ai-ease, ease-out); }
.cl-reveal-ready .cl-reveal:nth-child(2) { transition-delay: .06s; }
.cl-reveal-ready .cl-reveal:nth-child(3) { transition-delay: .12s; }

/* ── Guides: the lobster is the instrument, set in a live detection ring beside
   each article's title (one rule covers every .guide-content page). ─────────── */
.guide-content { position: relative; }
.guide-content > h1:first-child, .guide-content > h1:first-of-type { padding-right: 100px; }
.guide-content::before { content: ''; position: absolute; top: -8px; right: 0; width: 78px; height: 78px; pointer-events: none; z-index: 1; border-radius: 50%;
    background: url(/images/lobster-web.png) center/48px no-repeat, radial-gradient(circle, rgba(51,194,200,0.16), rgba(238,90,44,0.05) 46%, transparent 66%);
    border: 1px solid rgba(51,194,200,0.28);
    box-shadow: 0 0 0 8px rgba(51,194,200,0.04), 0 0 24px rgba(51,194,200,0.18), 0 8px 16px rgba(0,0,0,0.4);
    animation: cl-float 6s var(--ai-ease, ease-in-out) infinite; }
@media (max-width: 900px) { .guide-content::before { width: 62px; height: 62px; background-size: 40px; } .guide-content > h1:first-child, .guide-content > h1:first-of-type { padding-right: 76px; } }
@media (prefers-reduced-motion: reduce) { .guide-content::before { animation: none; } }

/* ── SECTION SEAM (§16): a thin current line bridging two sections ───────────*/
.cl-seam { position: relative; height: 0; }
.cl-seam::before { content: ""; position: absolute; left: 50%; top: -40px; width: 1px; height: 80px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(51,194,200,0.5), var(--ai-orange, #EE5A2C), transparent); opacity: 0.5; }

/* ── JOB FIELD (§12): a large visual environment that changes per job ────────
   One container renders all six scenes; [data-field] shows the active one. */
.cl-field { position: relative; min-height: 400px; border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(90% 70% at 50% -10%, rgba(51,194,200,0.09), transparent 62%),
        radial-gradient(70% 60% at 82% 120%, rgba(238,90,44,0.06), transparent 60%),
        linear-gradient(180deg, #0B1E30, #05101C);
    border: 1px solid var(--ai-hair-bold, rgba(255,246,234,0.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 40px 80px -50px rgba(0,0,0,0.8); }

/* scanner: a live grid of markets, three flagged as unusual, a scan line sweeps */
.cl-mkt-grid { position: absolute; inset: 20px 20px 44px; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 10px; }
.cl-mkt { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 10px;
    background: rgba(255,246,234,0.028); border: 1px solid var(--ai-hair-soft, rgba(255,246,234,0.06));
    font-family: var(--ai-mono, monospace); font-size: .8rem; color: var(--ai-dim, #8A9BAB); overflow: hidden; }
.cl-mkt b { font-weight: 700; }
.cl-mkt em { display: none; }
.cl-mkt--hit { grid-column: span 2; justify-content: flex-start; gap: 9px; padding: 0 14px; flex-direction: row;
    background: rgba(238,90,44,0.10); border-color: rgba(238,90,44,0.5); color: var(--ai-ink, #FFF6EA);
    box-shadow: 0 0 0 1px rgba(238,90,44,0.25), 0 0 26px -6px rgba(238,90,44,0.55); animation: cl-mkt-pulse 3s ease-in-out infinite; }
.cl-mkt--hit b { color: var(--ai-orange-lt, #FF8A5C); }
.cl-mkt--hit em { display: inline; font-style: normal; color: var(--ai-up, #37D98A); font-size: .78rem; }
.cl-mkt--hit.is-down em { color: var(--ai-down, #FA5772); }
.cl-mkt--hit:nth-of-type(7) { animation-delay: .6s; } .cl-mkt--hit:nth-of-type(15) { animation-delay: 1.2s; }
@keyframes cl-mkt-pulse { 0%,100% { box-shadow: 0 0 0 1px rgba(238,90,44,0.25), 0 0 26px -6px rgba(238,90,44,0.45); } 50% { box-shadow: 0 0 0 1px rgba(238,90,44,0.4), 0 0 34px -4px rgba(238,90,44,0.7); } }
.cl-scan-line { position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(51,194,200,0.10) 70%, rgba(51,194,200,0.22));
    border-bottom: 1px solid rgba(51,194,200,0.4); animation: cl-scan-move 4.2s var(--ai-ease, ease-in-out) infinite; }
@keyframes cl-scan-move { 0% { transform: translateY(-100px); } 100% { transform: translateY(420px); } }
.cl-fx { position: absolute; inset: 0; display: none; }
.cl-field[data-field="scanner"] .cl-fx--scanner,
.cl-field[data-field="whale"]   .cl-fx--whale,
.cl-field[data-field="smart"]   .cl-fx--smart,
.cl-field[data-field="risk"]    .cl-fx--risk,
.cl-field[data-field="research"] .cl-fx--research,
.cl-field[data-field="bot"]     .cl-fx--bot { display: block; }
.cl-fx__cap { position: absolute; left: 18px; bottom: 16px; font-family: var(--ai-mono, monospace); font-size: .78rem; color: var(--ai-dim, #8A9BAB); z-index: 3; }
.cl-fx__cap b { color: var(--ai-up, #37D98A); }

/* scanner: a field of market dots, a rotating sonar sweep, a few detected orange */
.cl-scan-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(6, 1fr); padding: 34px 30px; }
.cl-scan-grid i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,246,234,0.14); place-self: center; }
.cl-scan-grid i.hit { background: var(--ai-orange, #EE5A2C); box-shadow: 0 0 10px 2px rgba(238,90,44,0.6); animation: cl-hit 3s ease-in-out infinite; }
.cl-scan-grid i.hit:nth-of-type(2) { animation-delay: 1s; } .cl-scan-grid i.hit:nth-of-type(3) { animation-delay: 2s; }
@keyframes cl-hit { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.cl-scan-sweep { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%,-50%);
    background: conic-gradient(from 0deg, rgba(51,194,200,0.16), transparent 20%); animation: cl-sweep-rot 6s linear infinite; }

/* whale: a flowing tape of trade values */
.cl-tape { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; gap: 14px; white-space: nowrap; will-change: transform; animation: cl-tape-run 18s linear infinite; }
.cl-tape span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 11px; background: rgba(255,246,234,0.03); border: 1px solid var(--ai-hair, rgba(255,246,234,0.10)); font-family: var(--ai-mono, monospace); font-size: .9rem; color: var(--ai-ink, #FFF6EA); }
.cl-tape .b { color: var(--ai-up, #37D98A); } .cl-tape .s { color: var(--ai-down, #FA5772); }
@keyframes cl-tape-run { to { transform: translate(-50%, -50%); } 0% { transform: translate(0, -50%); } }

/* smart money: clustered wallet dots forming consensus */
.cl-cluster { position: absolute; inset: 0; }
.cl-cluster i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ai-wallet, #A78BFA); box-shadow: 0 0 10px 1px rgba(167,139,250,0.5); }
.cl-cluster .cl-consensus { width: 130px; height: 130px; border-radius: 50%; border: 1px dashed rgba(55,217,138,0.4); left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(55,217,138,0.05); box-shadow: none; }

/* risk: three converging pressure bars */
.cl-risk { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 20px; padding: 40px; }
.cl-risk b { width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--ai-down, #FA5772), rgba(250,87,114,0.3)); animation: cl-risk-rise 3.4s var(--ai-ease, ease-in-out) infinite; }
.cl-risk b:nth-child(2) { animation-delay: .4s; } .cl-risk b:nth-child(3) { animation-delay: .8s; }
@keyframes cl-risk-rise { 0%,100% { height: 30%; } 50% { height: 80%; } }

/* research: several streams merging into one brief */
.cl-merge { position: absolute; inset: 0; }
.cl-merge svg { width: 100%; height: 100%; }
.cl-merge path { fill: none; stroke: var(--cl-teal, #33C2C8); stroke-width: 1.4; opacity: .5; stroke-dasharray: 6 200; animation: cl-current-drift 8s linear infinite; }
.cl-merge .brief { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 120px; height: 80px; border-radius: 10px; border: 1px solid var(--ai-hair-bold, rgba(255,246,234,0.16)); background: rgba(255,246,234,0.03); }

/* bot: intelligence flowing into an agent node */
.cl-bot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 60px; }
.cl-bot__node { width: 84px; height: 84px; border-radius: 18px; border: 1px solid rgba(238,90,44,0.4); background: rgba(238,90,44,0.06); display: grid; place-items: center; color: var(--ai-orange-lt, #FF8A5C); }
.cl-bot__flow { flex: 1; max-width: 220px; height: 2px; background: linear-gradient(90deg, transparent, var(--cl-teal, #33C2C8), var(--ai-orange, #EE5A2C)); position: relative; }
.cl-bot__flow::after { content: ""; position: absolute; top: -2px; left: 0; width: 8px; height: 6px; border-radius: 3px; background: var(--ai-orange, #EE5A2C); animation: cl-bot-run 2.4s linear infinite; }
@keyframes cl-bot-run { to { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .cl-currents path, .cl-sonar__ring, .cl-sweep, .cl-mascot--float,
    .cl-scan-sweep, .cl-tape, .cl-risk b, .cl-merge path, .cl-bot__flow::after, .cl-scan-grid i.hit,
    .cl-scan-line, .cl-mkt--hit { animation: none !important; }
    .aiwrap { background-attachment: scroll; }
    .cl-reveal-ready .cl-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}