/**
 * Soteria Theme System. Lex Nigra Check Badge styles v2 (world-class)
 * Companion to lexnigra-badge.js. A black wax seal that scans a party with a
 * conic sonar sweep, then presses a verdict stamp.
 *
 *   <link rel="stylesheet" href="/static/css/lexnigra-badge.css">
 *   <div id="ln-badge"></div>
 *   <script src="/static/js/lexnigra-badge.js"></script>
 *
 * Verdict colour flows through --ln-color (set by the JS); the whole seal
 * (ring, sweep, sweep-glow, glyphs) tracks it via currentColor / color-mix.
 */

.ln-badge {
    --ln-color: #d4af37;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--ln-color);
    -webkit-tap-highlight-color: transparent;
}

/* ── The wax disc: bevelled, deep, catches a soft top-left light ── */
.ln-badge-seal {
    --sz: 104px;
    position: relative;
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background:
        radial-gradient(circle at 37% 30%, #2b2b31 0%, #16161a 55%, #070708 100%);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.10),
        inset 0 -8px 18px rgba(0, 0, 0, 0.70),
        inset 0 0 0 1px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.45);
    isolation: isolate;
    transition: box-shadow 0.45s ease;
}
.ln-badge--compact .ln-badge-seal { --sz: 42px; }

/* verdict glow bloom around the rim once resolved */
.ln-badge[data-ln-state="clear"]      .ln-badge-seal,
.ln-badge[data-ln-state="warn"]       .ln-badge-seal,
.ln-badge[data-ln-state="block"]      .ln-badge-seal,
.ln-badge[data-ln-state="hard_block"] .ln-badge-seal {
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.10),
        inset 0 -8px 18px rgba(0, 0, 0, 0.70),
        inset 0 0 12px color-mix(in srgb, var(--ln-color) 45%, transparent),
        0 0 22px color-mix(in srgb, var(--ln-color) 40%, transparent),
        0 6px 20px rgba(0, 0, 0, 0.45);
}

.ln-seal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
}

/* ── Conic sonar sweep: a smooth trailing wedge with a bright leading edge.
      Lives below the SVG so ticks/ring/glyph sit on top. Scanning only. ── */
.ln-sweep {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            transparent 250deg,
            color-mix(in srgb, var(--ln-color) 8%, transparent) 300deg,
            color-mix(in srgb, var(--ln-color) 42%, transparent) 352deg,
            color-mix(in srgb, var(--ln-color) 90%, transparent) 360deg);
    -webkit-mask: radial-gradient(circle at center, transparent 8%, #000 26%, #000 92%, transparent 99%);
            mask: radial-gradient(circle at center, transparent 8%, #000 26%, #000 92%, transparent 99%);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ln-color) 55%, transparent));
}
[data-ln-state="scanning"] .ln-sweep {
    opacity: 1;
    animation: ln-sweep-spin 1.25s cubic-bezier(0.62, 0, 0.38, 1) infinite;
}

/* ── Engraved elements ── */
.ln-legend {
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: uppercase;
    transform-origin: 50px 50px;
}
[data-ln-state="scanning"] .ln-legend { animation: ln-legend-spin 24s linear infinite; }

.ln-ticks   { transform-origin: 50px 50px; }
.ln-ring    { transition: stroke-width 0.3s ease; }
[data-ln-state="scanning"] .ln-ring { animation: ln-ring-breathe 2s ease-in-out infinite; }

/* reticle + core: alive while scanning, gone once a glyph takes the centre */
.ln-reticle { transition: opacity 0.3s ease; }
[data-ln-state="scanning"] .ln-core     { animation: ln-core-pulse 1.25s ease-in-out infinite; }
[data-ln-state="scanning"] .ln-reticle  { animation: ln-reticle-spin 6s linear infinite; transform-origin: 50px 50px; }
.ln-badge[data-ln-state="clear"]      .ln-reticle,
.ln-badge[data-ln-state="warn"]       .ln-reticle,
.ln-badge[data-ln-state="block"]      .ln-reticle,
.ln-badge[data-ln-state="hard_block"] .ln-reticle,
.ln-badge[data-ln-state="degraded"]   .ln-reticle,
.ln-badge[data-ln-state="error"]      .ln-reticle { opacity: 0; }

/* ── Sonar ping rings: expand and fade, scanning only ── */
.ln-pings { opacity: 0; }
[data-ln-state="scanning"] .ln-pings { opacity: 1; }
.ln-ping { stroke-width: 0.9; transform-origin: 50px 50px; opacity: 0; }
[data-ln-state="scanning"] .ln-ping1 { animation: ln-ping 2.2s ease-out infinite; }
[data-ln-state="scanning"] .ln-ping2 { animation: ln-ping 2.2s ease-out infinite 1.1s; }

/* ── Verdict glyphs: drawn on with a dash sweep, then held ── */
.ln-glyph { opacity: 0; }
.ln-draw, .ln-draw2 { stroke-dasharray: 1; stroke-dashoffset: 1; }

.ln-badge[data-ln-state="clear"]      .ln-glyph-check,
.ln-badge[data-ln-state="warn"]       .ln-glyph-bang,
.ln-badge[data-ln-state="block"]      .ln-glyph-bang,
.ln-badge[data-ln-state="hard_block"] .ln-glyph-bar,
.ln-badge[data-ln-state="degraded"]   .ln-glyph-query,
.ln-badge[data-ln-state="error"]      .ln-glyph-query { opacity: 1; }

.ln-badge[data-ln-state="clear"]      .ln-glyph-check .ln-draw,
.ln-badge[data-ln-state="warn"]       .ln-glyph-bang  .ln-draw,
.ln-badge[data-ln-state="block"]      .ln-glyph-bang  .ln-draw,
.ln-badge[data-ln-state="hard_block"] .ln-glyph-bar   .ln-draw,
.ln-badge[data-ln-state="degraded"]   .ln-glyph-query .ln-draw,
.ln-badge[data-ln-state="error"]      .ln-glyph-query .ln-draw {
    animation: ln-draw 0.4s ease 0.14s forwards;
}
.ln-badge[data-ln-state="hard_block"] .ln-glyph-bar .ln-draw2 {
    animation: ln-draw 0.24s ease 0.5s forwards;
}

/* ── The stamp: seal thuds down + a shockwave ring ripples out ── */
.ln-shock {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
    border: 2.5px solid var(--ln-color);
    opacity: 0;
}
.ln-badge.ln-stamp .ln-badge-seal { animation: ln-stamp 0.55s cubic-bezier(0.2, 1.5, 0.35, 1) both; }
.ln-badge.ln-stamp .ln-shock      { animation: ln-shock 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.02s both; }
/* a hard block gets an angry shake over the press */
.ln-badge[data-ln-state="hard_block"].ln-stamp .ln-badge-seal {
    animation: ln-stamp 0.55s cubic-bezier(0.2, 1.5, 0.35, 1) both,
               ln-shake 0.5s ease 0.14s both;
}

/* ── Caption ── */
.ln-badge-caption {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: currentColor;
    max-width: 15rem;
    line-height: 1.3;
    transition: color 0.4s ease;
}

/* ── Keyframes ── */
@keyframes ln-sweep-spin   { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes ln-legend-spin  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes ln-reticle-spin { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes ln-core-pulse   { 0%,100% { opacity: 1; r: 2.4; } 50% { opacity: 0.35; r: 3.1; } }
@keyframes ln-ring-breathe { 0%,100% { stroke-width: 1.6; } 50% { stroke-width: 2.4; } }
@keyframes ln-ping         { 0% { transform: scale(0.5); opacity: 0.55; } 80% { opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes ln-draw         { to { stroke-dashoffset: 0; } }
@keyframes ln-stamp        { 0% { transform: scale(1.6); opacity: 0; } 55% { transform: scale(0.93); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ln-shock        { 0% { transform: scale(0.7); opacity: 0.85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ln-shake        { 0%,100% { margin-left: 0; } 20% { margin-left: -4px; } 40% { margin-left: 4px; } 60% { margin-left: -3px; } 80% { margin-left: 2px; } }

[data-dark-mode="true"] .ln-badge-caption { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

/* ── Reduced motion: keep every state legible, drop the spin/thud/draw ── */
@media (prefers-reduced-motion: reduce) {
    .ln-legend, .ln-sweep, .ln-core, .ln-ring, .ln-ping, .ln-reticle,
    .ln-badge.ln-stamp .ln-badge-seal, .ln-badge.ln-stamp .ln-shock,
    .ln-badge[data-ln-state="hard_block"].ln-stamp .ln-badge-seal { animation: none !important; }
    [data-ln-state="scanning"] .ln-sweep { opacity: 1; }
    .ln-draw, .ln-draw2 { stroke-dashoffset: 0 !important; }
}