/* ═══════════════════════════════════════════════════════════
   Creature System v2.2 — Cross-Widget Animation CSS
   Theme-aware: uses CSS vars from variables.css
   ═══════════════════════════════════════════════════════════ */

/* ── Neural Cell Layer (positioned in FATHER's orbit space) ── */
.fo-neural-layer {
    position: absolute; top: 42%; left: 50%;
    width: 240px; height: 240px;
    margin-left: -120px; margin-top: -120px;
    pointer-events: none; z-index: 3;
}

/* Individual neural cell — icon-only (no circle border) */
.fo-neural-cell {
    position: absolute;
    width: var(--cell-size, 28px);
    height: var(--cell-size, 28px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    transition: all 0.4s ease;
    opacity: 0;
    transform: scale(0);
}
.fo-neural-cell i {
    font-size: 12px;
    color: var(--cell-color, var(--accent-purple, #8b5cf6));
    opacity: 0.9;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 40%, transparent));
    transition: filter 0.4s ease, transform 0.3s ease;
}
.fo-cell-label {
    font-size: 5.5px;
    font-weight: 700;
    color: var(--cell-color, var(--accent-purple, #8b5cf6));
    letter-spacing: 0.5px;
    opacity: 0.7;
    text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

/* Tier badge — hidden for icon-only cells */
.fo-cell-tier { display: none; }

/* ── Cell Boot (pop-in animation) ── */
.fo-neural-cell.fo-cell-boot {
    animation: fo-cell-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fo-cell-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.55; }
}

/* ── Cell Pulse (active state — triggers on data events) ── */
.fo-neural-cell.fo-cell-active {
    opacity: 1 !important;
    animation: fo-cell-pulse 1.5s ease-out;
}
.fo-neural-cell.fo-cell-active i {
    filter:
        drop-shadow(0 0 8px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 70%, transparent))
        drop-shadow(0 0 16px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 35%, transparent));
    transform: scale(1.15);
}
@keyframes fo-cell-pulse {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.3); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ── Cumulative Warmth (icon glow escalates with activity) ── */
.fo-neural-cell.fo-cell-warm-1 {
    opacity: 0.7;
}
.fo-neural-cell.fo-cell-warm-1 i {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 40%, transparent));
}
.fo-neural-cell.fo-cell-warm-2 {
    opacity: 0.85;
}
.fo-neural-cell.fo-cell-warm-2 i {
    filter:
        drop-shadow(0 0 8px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 55%, transparent))
        drop-shadow(0 0 16px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 20%, transparent));
}
.fo-neural-cell.fo-cell-warm-3 {
    opacity: 1;
    animation: fo-warm-glow 3s ease-in-out infinite;
}
.fo-neural-cell.fo-cell-warm-3 i {
    filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 65%, transparent))
        drop-shadow(0 0 22px color-mix(in srgb, var(--cell-color, var(--accent-purple)) 30%, transparent));
}
@keyframes fo-warm-glow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.25); }
}

/* ── Cell Info Label (floating text — "+3 obs" or "TP tuned") ── */
.fo-cell-info {
    position: absolute;
    bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    font-size: 6px; font-weight: 700;
    color: var(--cell-color, var(--accent-purple, #8b5cf6));
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    letter-spacing: 0.3px;
}
.fo-cell-info.fo-info-visible {
    opacity: 1;
    animation: fo-info-float 3s ease-out forwards;
}
@keyframes fo-info-float {
    0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
    70%  { opacity: 0.8; }
    100% { transform: translateX(-50%) translateY(-8px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   Axon Network — Organic Curved SVG Paths
   ═══════════════════════════════════════════════════════════ */
.fo-axon-svg {
    position: absolute; top: 42%; left: 50%;
    width: 240px; height: 240px;
    margin-left: -120px; margin-top: -120px;
    pointer-events: none; z-index: 1;
    overflow: visible;
}

.fo-axon-path {
    fill: none;
    stroke-width: 0.8;
    opacity: 0;
    stroke-dasharray: 4 6;
    transition: opacity 0.5s ease, stroke-dashoffset 0.5s;
}
.fo-axon-path.fo-axon-flowing {
    animation: fo-axon-flow-dash 4s linear infinite;
}
@keyframes fo-axon-flow-dash {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
}

.fo-axon-path.fo-axon-active {
    opacity: 0.55 !important;
    stroke-width: 1.4;
    stroke-dasharray: none;
    animation: fo-axon-glow 1.5s ease-out;
    filter: drop-shadow(0 0 2px currentColor);
}
@keyframes fo-axon-glow {
    0%   { opacity: 0.7; stroke-width: 2; }
    100% { opacity: 0.12; stroke-width: 0.8; }
}

.fo-axon-flow {
    opacity: 0;
    filter: blur(0.5px);
    transition: filter 0.2s ease;
}

/* ── Ambient Spark Arcs (SVG line flashes between cells) ── */
.fo-spark {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Synaptic Particles — Ambient Life in FATHER Widget
   Uses theme accent-purple via CSS vars
   ═══════════════════════════════════════════════════════════ */
.fo-synapse-layer {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    overflow: hidden;
}
.fo-synapse {
    position: absolute;
    width: var(--syn-size, 2px);
    height: var(--syn-size, 2px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 40%, transparent);
    box-shadow:
        0 0 6px color-mix(in srgb, var(--accent-purple, #8b5cf6) 30%, transparent),
        0 0 12px color-mix(in srgb, var(--accent-blue, #3b82f6) 10%, transparent);
    pointer-events: none;
    animation:
        fo-synapse-drift var(--syn-dur, 25s) ease-in-out infinite,
        fo-synapse-breathe var(--syn-breathe, 6s) ease-in-out infinite;
    animation-delay: var(--syn-delay, 0s);
}
@keyframes fo-synapse-drift {
    0%, 100% { transform: translate(0, 0); }
    25%  { transform: translate(var(--syn-dx1, 15px), var(--syn-dy1, -10px)); }
    50%  { transform: translate(var(--syn-dx2, -8px), var(--syn-dy2, 12px)); }
    75%  { transform: translate(var(--syn-dx3, 12px), var(--syn-dy3, 5px)); }
}
@keyframes fo-synapse-breathe {
    0%, 100% { opacity: 0.1; }
    40%      { opacity: 0.3; }
    60%      { opacity: 0.2; }
}
.fo-synapse.fo-synapse-excited {
    opacity: 0.6 !important;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--accent-purple, #8b5cf6) 60%, transparent),
        0 0 20px color-mix(in srgb, var(--accent-blue, #3b82f6) 30%, transparent);
    transition: opacity 0.3s, box-shadow 0.3s;
}

/* ── Strategy Mode: LUNA → silver/white particles ── */
.creature-luna-mode .fo-synapse {
    background: color-mix(in srgb, var(--text-secondary, #94a3b8) 30%, transparent);
    box-shadow:
        0 0 6px color-mix(in srgb, var(--text-secondary, #94a3b8) 25%, transparent),
        0 0 12px color-mix(in srgb, var(--accent-blue, #3b82f6) 8%, transparent);
}
.creature-luna-mode .fo-synapse.fo-synapse-excited {
    box-shadow:
        0 0 10px color-mix(in srgb, var(--text-secondary, #94a3b8) 50%, transparent),
        0 0 20px color-mix(in srgb, var(--accent-blue, #3b82f6) 20%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   Gap Collector — Void Orbs → Magnetic Brain Absorption
   ═══════════════════════════════════════════════════════════ */
.fo-gap-void {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bg-deepest, #060a13) 30%, color-mix(in srgb, var(--accent-purple, #8b5cf6) 40%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent-purple, #8b5cf6) 25%, transparent);
    box-shadow:
        0 0 12px color-mix(in srgb, var(--accent-purple, #8b5cf6) 30%, transparent),
        inset 0 0 6px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 4;
    animation: fo-gap-absorb 2.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes fo-gap-absorb {
    0%   { transform: scale(1.2); opacity: 0; }
    15%  { transform: scale(1); opacity: 0.8; }
    50%  { opacity: 0.9; }
    85%  { transform: scale(0.4); opacity: 0.6; }
    100% {
        left: 50% !important; top: 42% !important;
        transform: scale(0); opacity: 0;
        filter: brightness(2);
    }
}

/* ═══════════════════════════════════════════════════════════
   Brain Idle Pulse — Uses theme vars
   ═══════════════════════════════════════════════════════════ */
.fo-brain-wrap.fo-brain-breathing .fo-brain {
    animation:
        fo-brain-float 5s ease-in-out infinite,
        fo-brain-idle-glow 5s ease-in-out infinite;
}
@keyframes fo-brain-idle-glow {
    0%, 100% {
        box-shadow:
            0 0 30px color-mix(in srgb, var(--accent-purple, #8b5cf6) 25%, transparent),
            0 0 60px color-mix(in srgb, var(--accent-blue, #3b82f6) 12%, transparent),
            0 0 2px 1px color-mix(in srgb, var(--accent-purple, #8b5cf6) 15%, transparent),
            inset 0 0 20px color-mix(in srgb, var(--accent-purple, #8b5cf6) 8%, transparent),
            inset -6px -4px 12px rgba(0,0,0,0.4);
    }
    50% {
        box-shadow:
            0 0 40px color-mix(in srgb, var(--accent-purple, #8b5cf6) 35%, transparent),
            0 0 80px color-mix(in srgb, var(--accent-blue, #3b82f6) 18%, transparent),
            0 0 2px 1px color-mix(in srgb, var(--accent-purple, #8b5cf6) 20%, transparent),
            inset 0 0 25px color-mix(in srgb, var(--accent-purple, #8b5cf6) 12%, transparent),
            inset -6px -4px 12px rgba(0,0,0,0.4);
    }
}

/* ═══════════════════════════════════════════════════════════
   Standby / Idle States — Clean, no-dim approach
   ═══════════════════════════════════════════════════════════ */
.creature-standby {
    transition: opacity 1.5s ease;
}
.creature-active {
    transition: opacity 1.5s ease;
}

.creature-standby .fo-idle-msg,
.creature-standby .luna-idle-msg {
    z-index: 10;
    display: flex !important;
}
.creature-standby .fo-idle-msg span {
    opacity: 0.6;
    animation: creature-idle-breathe 5s ease-in-out infinite;
}
.creature-standby .luna-idle-msg i {
    opacity: 0.5;
    font-size: 2.2rem;
    color: var(--text-secondary, #94a3b8);
    animation: creature-idle-breathe 5s ease-in-out infinite;
}
@keyframes creature-idle-breathe {
    0%, 100% { opacity: 0.3; filter: brightness(1); }
    50%      { opacity: 0.6; filter: brightness(1.3); }
}

/* ═══════════════════════════════════════════════════════════
   Bidirectional Mode — Bridge Glow When Both Active
   ═══════════════════════════════════════════════════════════ */
.creature-linked {
    position: relative;
}
.creature-linked::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    width: 40%; height: 2px;
    margin-left: -20%;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--accent-purple, #8b5cf6) 40%, transparent),
        transparent);
    border-radius: 1px;
    animation: creature-bridge-pulse 3s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
}
.father-orbit-container.creature-linked::before {
    bottom: auto; top: auto;
    /* Position at bottom edge toward BotJump */
    bottom: -1px;
}
.botjump-container.creature-linked::before {
    top: -1px; bottom: auto;
}
@keyframes creature-bridge-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════
   Connectivity Glow — Uses theme vars
   ═══════════════════════════════════════════════════════════ */
.creature-connected {
    animation: creature-connect-glow 3s ease-out;
}
.father-orbit-container.creature-connected {
    box-shadow:
        inset 0 0 40px color-mix(in srgb, var(--accent-purple, #8b5cf6) 8%, transparent),
        0 0 25px color-mix(in srgb, var(--accent-purple, #8b5cf6) 12%, transparent);
}
.botjump-container.creature-connected {
    box-shadow:
        inset 0 0 40px color-mix(in srgb, var(--accent-purple, #8b5cf6) 8%, transparent),
        0 0 25px color-mix(in srgb, var(--accent-purple, #8b5cf6) 12%, transparent);
}
@keyframes creature-connect-glow {
    0%   {
        box-shadow:
            inset 0 0 60px color-mix(in srgb, var(--accent-purple, #8b5cf6) 15%, transparent),
            0 0 35px color-mix(in srgb, var(--accent-purple, #8b5cf6) 20%, transparent);
    }
    30%  {
        box-shadow:
            inset 0 0 50px color-mix(in srgb, var(--accent-purple, #8b5cf6) 10%, transparent),
            0 0 30px color-mix(in srgb, var(--accent-purple, #8b5cf6) 15%, transparent);
    }
    100% { box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════
   Return Signal — BotJump → FATHER Projectile (theme-aware)
   ═══════════════════════════════════════════════════════════ */
.creature-return-signal {
    position: fixed;
    width: 6px; height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    animation: creature-return-fly 1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.creature-return-signal::after {
    content: '';
    position: absolute;
    top: 50%; left: 100%;
    width: 24px; height: 2px;
    background: linear-gradient(to right, currentColor, transparent);
    transform: translateY(-50%);
    border-radius: 2px;
    opacity: 0.7;
}
.creature-return-signal.return-profit {
    background: var(--color-profit, #10b981);
    color: var(--color-profit, #10b981);
    box-shadow: 0 0 10px var(--color-profit, #10b981), 0 0 20px color-mix(in srgb, var(--color-profit, #10b981) 40%, transparent);
}
.creature-return-signal.return-loss {
    background: var(--color-loss, #ef4444);
    color: var(--color-loss, #ef4444);
    box-shadow: 0 0 10px var(--color-loss, #ef4444), 0 0 20px color-mix(in srgb, var(--color-loss, #ef4444) 40%, transparent);
}
.creature-return-signal.return-entry {
    background: var(--accent-blue, #3b82f6);
    color: var(--accent-blue, #3b82f6);
    box-shadow: 0 0 10px var(--accent-blue, #3b82f6), 0 0 20px color-mix(in srgb, var(--accent-blue, #3b82f6) 40%, transparent);
}
@keyframes creature-return-fly {
    0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
    12%  { transform: translate(calc(var(--sig-dx) * 0.08), calc(var(--sig-dy) * 0.08)) scale(1.3); opacity: 1; }
    85%  { opacity: 0.9; }
    100% { transform: translate(var(--sig-dx), var(--sig-dy)) scale(0.4); opacity: 0.2; }
}

/* ═══════════════════════════════════════════════════════════
   Category-Colored Cross Signals (FATHER → BotJump) — theme-aware
   ═══════════════════════════════════════════════════════════ */
.father-cross-signal.sig-entry {
    background: var(--accent-cyan, #06b6d4);
    box-shadow: 0 0 12px var(--accent-cyan, #06b6d4), 0 0 24px color-mix(in srgb, var(--accent-cyan, #06b6d4) 40%, transparent);
}
.father-cross-signal.sig-entry::after {
    background: linear-gradient(to left, color-mix(in srgb, var(--accent-cyan, #06b6d4) 80%, transparent), transparent);
}
.father-cross-signal.sig-tp {
    background: var(--color-profit, #10b981);
    box-shadow: 0 0 12px var(--color-profit, #10b981), 0 0 24px color-mix(in srgb, var(--color-profit, #10b981) 40%, transparent);
}
.father-cross-signal.sig-tp::after {
    background: linear-gradient(to left, color-mix(in srgb, var(--color-profit, #10b981) 80%, transparent), transparent);
}
.father-cross-signal.sig-buyback {
    background: var(--accent-amber, #eab308);
    box-shadow: 0 0 12px var(--accent-amber, #eab308), 0 0 24px color-mix(in srgb, var(--accent-amber, #eab308) 40%, transparent);
}
.father-cross-signal.sig-buyback::after {
    background: linear-gradient(to left, color-mix(in srgb, var(--accent-amber, #eab308) 80%, transparent), transparent);
}
.father-cross-signal.sig-leverage {
    background: var(--color-loss, #ef4444);
    box-shadow: 0 0 12px var(--color-loss, #ef4444), 0 0 24px color-mix(in srgb, var(--color-loss, #ef4444) 40%, transparent);
}
.father-cross-signal.sig-leverage::after {
    background: linear-gradient(to left, color-mix(in srgb, var(--color-loss, #ef4444) 80%, transparent), transparent);
}

/* ── Visibility API: Pause all animations when tab is hidden ── */
.creature-paused .fo-neural-cell,
.creature-paused .fo-axon-path,
.creature-paused .fo-axon-flow,
.creature-paused .fo-synapse,
.creature-paused .fo-brain-wrap,
.creature-paused .fo-gap-void {
    animation-play-state: paused !important;
}