/* ═══════════════════════════════════════════════════════════════════════════
 * JBN FX v3 — Animated Background + Theme-Wide Polish
 * Adds: animated mesh gradient background, aurora overlay, fixed back-to-top,
 * subtle 3D card tilt, micro-interaction polish across the site.
 * Loaded last so it overrides earlier layers where intended.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · FIX BACK-TO-TOP BUTTON (round circle, properly sized icon) ─────── */
.fx-back-to-top {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 0 !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.85)) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 0 0 rgba(99, 102, 241, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
                background 200ms;
}
.fx-back-to-top svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    flex-shrink: 0 !important;
    stroke: #fff !important;
    fill: none !important;
    pointer-events: none;
}
.fx-back-to-top:hover {
    transform: translateY(-4px) scale(1.08);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(34, 211, 238, 0.25)) !important;
    box-shadow:
        0 12px 32px rgba(99, 102, 241, 0.4),
        0 0 0 6px rgba(99, 102, 241, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.fx-back-to-top:active {
    transform: translateY(-1px) scale(0.98);
}
/* Pulsing halo when visible */
.fx-back-to-top.is-visible {
    animation: fx-btt-pulse 3.5s ease-in-out infinite;
}
@keyframes fx-btt-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 0 rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.08); }
    50%      { box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 8px rgba(99,102,241,0.06), inset 0 1px 0 rgba(255,255,255,0.08); }
}

/* ─── 2 · ANIMATED MESH GRADIENT BACKGROUND ──────────────────────────────── */
/* Fixed full-viewport layer behind everything. Pure CSS, GPU accelerated. */
.fx-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 10% 10%, rgba(99, 102, 241, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 90% 20%, rgba(34, 211, 238, 0.13) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 50% 80%, rgba(139, 92, 246, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 80% 90%, rgba(251, 191, 36, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #07111f 0%, #0b1429 50%, #07111f 100%);
}
.fx-bg-layer::before,
.fx-bg-layer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
}
.fx-bg-layer::before {
    width: 50vmax;
    height: 50vmax;
    top: -10vmax;
    left: -10vmax;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.25), transparent 60%);
    animation: fx-bg-drift-a 38s ease-in-out infinite alternate;
}
.fx-bg-layer::after {
    width: 60vmax;
    height: 60vmax;
    bottom: -15vmax;
    right: -15vmax;
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.18), transparent 60%);
    animation: fx-bg-drift-b 52s ease-in-out infinite alternate;
}
@keyframes fx-bg-drift-a {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(15vmax, 10vmax) scale(1.15) rotate(80deg); }
}
@keyframes fx-bg-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-12vmax, -8vmax) scale(0.9); }
}

/* ─── 3 · STAR/PARTICLE FIELD (CSS-only, drifting dots) ──────────────────── */
.fx-bg-stars {
    position: fixed;
    inset: 0;
    z-index: -9;
    pointer-events: none;
    background-image:
        radial-gradient(1.2px 1.2px at 20% 30%, rgba(255,255,255,0.6), transparent 50%),
        radial-gradient(1px 1px at 70% 60%, rgba(165, 180, 252, 0.55), transparent 50%),
        radial-gradient(1.4px 1.4px at 40% 80%, rgba(255,255,255,0.4), transparent 50%),
        radial-gradient(0.8px 0.8px at 90% 15%, rgba(34, 211, 238, 0.5), transparent 50%),
        radial-gradient(1px 1px at 12% 75%, rgba(255,255,255,0.45), transparent 50%),
        radial-gradient(1.3px 1.3px at 55% 25%, rgba(167, 139, 250, 0.55), transparent 50%),
        radial-gradient(0.9px 0.9px at 80% 45%, rgba(255,255,255,0.5), transparent 50%),
        radial-gradient(1.1px 1.1px at 30% 50%, rgba(99, 102, 241, 0.5), transparent 50%);
    background-size: 1200px 1200px;
    background-repeat: repeat;
    animation: fx-stars-drift 120s linear infinite;
    opacity: 0.7;
}
@keyframes fx-stars-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 1200px 600px; }
}

/* Twinkle dots — slower opacity pulse */
.fx-bg-twinkle {
    position: fixed;
    inset: 0;
    z-index: -8;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 25% 15%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 35%, rgba(167, 139, 250, 0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 70%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 15% 88%, rgba(34, 211, 238, 0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 80%, #fff, transparent 60%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fx-twinkle 6s ease-in-out infinite;
    opacity: 0.5;
}
@keyframes fx-twinkle {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.7; }
}

/* ─── 4 · CURSOR GLOW (JS-driven; CSS just defines the spot) ─────────────── */
.fx-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(99, 102, 241, 0.18) 0%,
        rgba(99, 102, 241, 0.05) 30%,
        transparent 70%);
    pointer-events: none;
    z-index: -7;
    transform: translate(-50%, -50%);
    transition: transform 60ms linear, opacity 280ms;
    opacity: 0;
    will-change: transform;
    mix-blend-mode: screen;
}
.fx-cursor-glow.is-active { opacity: 1; }
@media (pointer: coarse) {
    .fx-cursor-glow { display: none; }
}

/* ─── 5 · 3D CARD TILT (subtle, only on hover, mouse-tracked via JS) ─────── */
.fx-tilt {
    transform-style: preserve-3d;
    transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.fx-tilt > * {
    transform: translateZ(0);
}
@media (hover: none) {
    .fx-tilt { transform: none !important; }
}

/* ─── 6 · IMPROVED HERO SECTIONS ─────────────────────────────────────────── */
.article-hero {
    background-color: transparent !important;
}
.article-hero__overlay {
    background: linear-gradient(180deg,
        rgba(7, 17, 31, 0.4) 0%,
        rgba(7, 17, 31, 0.7) 100%);
}
.article-hero__title {
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    background-size: 200% 200%;
    animation: fx-title-shimmer 8s ease infinite;
}
@keyframes fx-title-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.article-hero__standfirst {
    color: rgba(226, 232, 240, 0.88) !important;
    font-weight: 400;
    line-height: 1.6;
}

/* ─── 7 · HEADING DECORATION inside post content ─────────────────────────── */
.article-prose h2 {
    position: relative;
    padding-top: 28px;
    margin-top: 36px;
}
.article-prose h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--jbn-cta, #0066cc), #6366f1, #22d3ee);
    background-size: 200% 100%;
    animation: fx-bar-shimmer 4s linear infinite;
}
@keyframes fx-bar-shimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.article-prose h3 {
    position: relative;
    padding-left: 14px;
}
.article-prose h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    bottom: 0.4em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6366f1, #22d3ee);
}

/* ─── 8 · PARAGRAPH DROP CAP on the first paragraph of post body ─────────── */
.article-prose > p:first-of-type::first-letter {
    font-size: 3.4em;
    font-weight: 700;
    float: left;
    line-height: 0.85;
    margin: 6px 12px 0 0;
    color: transparent;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
}

/* ─── 9 · POST-CARD POLISH (homepage + archive + related) ────────────────── */
.post-card,
.archive-card,
.related-post-card,
.category-card {
    overflow: hidden;
    position: relative;
    transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 480ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 280ms;
}
.post-card::after,
.archive-card::after,
.related-post-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(99, 102, 241, 0.12),
        rgba(34, 211, 238, 0.08),
        transparent);
    transform: skewX(-18deg);
    transition: left 800ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}
.post-card:hover::after,
.archive-card:hover::after,
.related-post-card:hover::after {
    left: 140%;
}

/* ─── 10 · NAVIGATION POLISH ─────────────────────────────────────────────── */
.site-header,
.main-header {
    position: relative;
    background: rgba(7, 17, 31, 0.85) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.12);
}
.site-header::after,
.main-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(99, 102, 241, 0.5),
        rgba(34, 211, 238, 0.4),
        rgba(99, 102, 241, 0.5),
        transparent);
    animation: fx-nav-line 12s linear infinite;
    background-size: 200% 100%;
}
@keyframes fx-nav-line {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.site-title,
.main-header .site-title {
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ─── 11 · FOOTER POLISH ─────────────────────────────────────────────────── */
.site-footer,
.footer-main {
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 17, 31, 0.92) 60%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.site-footer::before,
.footer-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(99, 102, 241, 0.4) 30%,
        rgba(34, 211, 238, 0.4) 50%,
        rgba(99, 102, 241, 0.4) 70%,
        transparent 95%);
}

/* ─── 12 · SCROLLBAR STYLING ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.4); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6366f1, #22d3ee);
    border-radius: 5px;
    border: 2px solid rgba(15, 23, 42, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #818cf8, #67e8f9);
}
* {
    scrollbar-width: thin;
    scrollbar-color: #6366f1 rgba(15, 23, 42, 0.4);
}

/* ─── 13 · SELECTION COLOR ───────────────────────────────────────────────── */
::selection {
    background: rgba(99, 102, 241, 0.55);
    color: #fff;
}

/* ─── 14 · BLOCKQUOTE GLOW ───────────────────────────────────────────────── */
.article-prose blockquote {
    position: relative;
    padding: 20px 24px 20px 56px;
    border-left: 0 !important;
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.12),
        rgba(34, 211, 238, 0.04)) !important;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}
.article-prose blockquote::before {
    content: """;
    position: absolute;
    left: 16px;
    top: -6px;
    font-size: 64px;
    line-height: 1;
    font-family: Georgia, serif;
    color: rgba(99, 102, 241, 0.45);
}

/* ─── 15 · LIST CHECKMARKS in product feature lists ──────────────────────── */
.article-prose ul {
    list-style: none;
    padding-left: 0;
}
.article-prose ul > li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 8px;
    line-height: 1.6;
}
.article-prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jbn-cta, #0066cc), #6366f1);
    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.3);
}
.article-prose ul > li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.7em;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.article-prose ol > li {
    line-height: 1.6;
    margin-bottom: 8px;
}

/* ─── 16 · INPUT / SEARCH POLISH ─────────────────────────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
.search-form input {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus {
    outline: 0;
    border-color: rgba(99, 102, 241, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
    background: rgba(15, 23, 42, 0.7) !important;
}

/* ─── 17 · PAGINATION POLISH ─────────────────────────────────────────────── */
.pagination a,
.page-numbers {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 10px;
    transition: all 240ms;
}
.pagination a:hover,
.page-numbers:hover,
.page-numbers.current {
    background: linear-gradient(135deg, var(--jbn-cta, #0066cc), #6366f1);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);
}

/* ─── 18 · TAG / KEYWORD CHIPS ───────────────────────────────────────────── */
.tag-links a,
.post-tags a,
a[rel~="tag"] {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #c7d2fe !important;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    margin: 2px;
    transition: all 200ms;
}
.tag-links a:hover,
.post-tags a:hover,
a[rel~="tag"]:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px) scale(1.04);
}

/* ─── 19 · MAKE SURE EVERYTHING SITS ABOVE THE ANIMATED BG ───────────────── */
body { position: relative; z-index: 0; }
.site-header, .site-content, .site-footer,
main, article, .article-body, .container {
    position: relative;
    z-index: 1;
}

/* ─── 20 · REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fx-bg-layer::before,
    .fx-bg-layer::after,
    .fx-bg-stars,
    .fx-bg-twinkle,
    .fx-back-to-top,
    .article-hero__title,
    .article-prose h2::before,
    .site-header::after,
    .fx-cursor-glow {
        animation: none !important;
    }
    .fx-cursor-glow { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
 * JBN FX v3 — VISIBILITY FIX
 * Theme's body background was covering the animated layer. This makes the
 * body transparent so .fx-bg-layer shows through, and tones down the
 * header/hero/footer backgrounds so the animation is visible everywhere.
 * Cranked the intensity of the animated colors so they're actually obvious.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · Make the page transparent so animated layer is visible ─────────── */
html {
    background: #07111f !important;
}
body {
    background: transparent !important;
    background-attachment: scroll !important;
}

/* Containers that had opaque solid backgrounds — make them semi-transparent
   so the animated layer shows through */
.site-content,
.main-content,
.archive-layout,
.article-body,
.page-layout,
.search-layout,
.not-found-shell {
    background: transparent !important;
}

/* Header — keep opacity high enough to read nav, but let some animation through */
.main-header,
.site-header {
    background:
        linear-gradient(135deg, rgba(7, 17, 31, 0.78), rgba(15, 27, 50, 0.72)) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

/* Hero — softer overlay so animated bg peeks through edges */
.home-hero--editorial,
.article-hero,
.archive-hero,
.search-hero,
.page-hero {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}
.home-hero--editorial::before,
.article-hero__overlay {
    background:
        radial-gradient(circle at 8% 8%, rgba(129, 140, 248, 0.42), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(13, 148, 136, 0.28), transparent 30%),
        linear-gradient(140deg, rgba(7,17,31,0.55), rgba(16,32,61,0.5), rgba(49,46,129,0.5)) !important;
}

/* Footer — let some animation peek */
.site-footer,
.footer-main {
    background:
        linear-gradient(160deg, rgba(7, 17, 31, 0.92) 0%, rgba(13, 25, 48, 0.92) 100%) !important;
    backdrop-filter: blur(8px);
}

/* Cards, posts, summary etc must stay readable — bump their opacity slightly */
.summary-card,
.article-hero__panel-card,
.related-post-card,
.sidebar-widget,
.archive-card,
.post-card,
.category-card,
.pillar-card,
.article-content {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(11, 20, 41, 0.55)) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ─── 2 · CRANK THE ANIMATED BACKGROUND so it's actually visible ─────────── */
.fx-bg-layer {
    z-index: -10 !important;
    background:
        radial-gradient(ellipse 90% 60% at 12% 8%,  rgba(99, 102, 241, 0.42) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 88% 18%, rgba(34, 211, 238, 0.32) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 50% 80%, rgba(139, 92, 246, 0.36) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 82% 92%, rgba(251, 191, 36, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 18% 95%, rgba(251, 113, 133, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #07111f 0%, #0b1429 40%, #08182f 70%, #07111f 100%) !important;
}

.fx-bg-layer::before {
    width: 70vmax !important;
    height: 70vmax !important;
    top: -15vmax !important;
    left: -15vmax !important;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.55) 0%, transparent 60%) !important;
    filter: blur(60px) !important;
    opacity: 0.85;
}
.fx-bg-layer::after {
    width: 80vmax !important;
    height: 80vmax !important;
    bottom: -20vmax !important;
    right: -20vmax !important;
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.45) 0%, transparent 60%) !important;
    filter: blur(70px) !important;
    opacity: 0.85;
}

/* Stars more visible */
.fx-bg-stars {
    z-index: -9 !important;
    opacity: 0.95 !important;
}
.fx-bg-twinkle {
    z-index: -8 !important;
    opacity: 0.7 !important;
}

/* ─── 3 · Make sure body content sits above the animated layer ──────────── */
body > * {
    position: relative;
    z-index: 1;
}
.fx-bg-layer,
.fx-bg-stars,
.fx-bg-twinkle,
.fx-cursor-glow {
    z-index: -10 !important;
    position: fixed !important;
}
.fx-bg-stars { z-index: -9 !important; }
.fx-bg-twinkle { z-index: -8 !important; }
.fx-cursor-glow { z-index: -7 !important; }