/*
 * AN Liquid Glass UI — v2.0.0
 * Agriculture Novel | Apple Intelligence Design System
 * ─────────────────────────────────────────────────────
 * • GPU-composited layers via will-change + translateZ(0)
 * • 144Hz-optimised — all animations on compositor thread
 * • Zero FOUC — critical CSS inlined by PHP
 * • Precision colour hierarchy with guaranteed WCAG AA contrast
 * • Colour tokens: White · Red #FF3B30 · Blue #0A84FF · Green #30D158
 * ─────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════
   §0  DESIGN TOKENS
   ═══════════════════════════════════════════════════════ */
:root {
  /* Semantic palette */
  --c-white:        #FFFFFF;
  --c-white-hi:     rgba(255,255,255,0.95);
  --c-white-body:   rgba(255,255,255,0.90);
  --c-white-soft:   rgba(255,255,255,0.72);
  --c-white-dim:    rgba(255,255,255,0.50);
  --c-white-ghost:  rgba(255,255,255,0.30);

  --c-red:          #FF3B30;
  --c-red-glow:     rgba(255,59,48,0.40);
  --c-red-tint:     rgba(255,59,48,0.12);
  --c-red-soft:     #FF6961;

  --c-blue:         #0A84FF;
  --c-blue-glow:    rgba(10,132,255,0.45);
  --c-blue-tint:    rgba(10,132,255,0.12);
  --c-blue-soft:    #5AC8FF;

  --c-green:        #30D158;
  --c-green-glow:   rgba(48,209,88,0.40);
  --c-green-tint:   rgba(48,209,88,0.12);
  --c-green-soft:   #7EE8A2;

  --c-black:        #1C1C1E;
  --c-black-soft:   #2C2C2E;
  --c-black-panel:  #0A0A0C;

  /* Glass surfaces — 5-level system */
  --glass-0:        rgba(255,255,255,0.04);   /* barely-there */
  --glass-1:        rgba(255,255,255,0.07);   /* base surface */
  --glass-2:        rgba(255,255,255,0.11);   /* card */
  --glass-3:        rgba(255,255,255,0.16);   /* elevated */
  --glass-4:        rgba(255,255,255,0.22);   /* modal/overlay */

  --glass-dark-0:   rgba(0,0,0,0.30);
  --glass-dark-1:   rgba(5,15,10,0.70);
  --glass-dark-nav: rgba(8,18,13,0.82);

  /* Borders */
  --border-0:       rgba(255,255,255,0.08);
  --border-1:       rgba(255,255,255,0.14);
  --border-2:       rgba(255,255,255,0.22);
  --border-spec:    rgba(255,255,255,0.40);   /* specular highlight top */

  /* Blur levels */
  --blur-xs:        blur(8px)  saturate(160%);
  --blur-sm:        blur(16px) saturate(180%);
  --blur-md:        blur(28px) saturate(200%);
  --blur-lg:        blur(44px) saturate(220%);
  --blur-nav:       blur(56px) saturate(240%);

  /* Shadows */
  --shadow-sm:   0 2px  12px rgba(0,0,0,0.35), inset 0 1px 0 var(--border-spec);
  --shadow-md:   0 6px  28px rgba(0,0,0,0.45), inset 0 1px 0 var(--border-spec);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.55), inset 0 1px 0 var(--border-spec);
  --shadow-xl:   0 20px 72px rgba(0,0,0,0.65), inset 0 1px 0 var(--border-spec);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Easing curves — Apple system */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.00);  /* spring bounce */
  --ease-out-expo: cubic-bezier(0.16, 1.00, 0.30, 1.00);  /* fast out */
  --ease-in-out:   cubic-bezier(0.42, 0.00, 0.58, 1.00);  /* smooth */
  --ease-snap:     cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* snappy */

  /* Duration scale */
  --dur-xs:  80ms;
  --dur-sm:  160ms;
  --dur-md:  280ms;
  --dur-lg:  440ms;
  --dur-xl:  600ms;

  /* Spacing grid — 8px base */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px;

  /* Radius scale */
  --r-xs: 6px;   --r-sm: 10px;  --r-md: 16px;
  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 100px;
}

/* ═══════════════════════════════════════════════════════
   §1  GPU PERFORMANCE LAYER
   Force compositor thread for all animated elements
   ═══════════════════════════════════════════════════════ */

/* Global hardware acceleration base */
.anlg-active * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Promote composited layers proactively */
.anlg-active .site-header,
.anlg-active #masthead,
.anlg-active header,
.anlg-active nav,
.anlg-active .main-navigation,
.anlg-active article,
.anlg-active .hentry,
.anlg-active .widget,
.anlg-active .post-card,
.anlg-active .related-post-item,
.anlg-active #anlg-canvas,
.anlg-active #anlg-orb-layer {
  will-change: transform !important;
  transform: translateZ(0) !important;  /* force own GPU layer */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  perspective: 1000px !important;
}

/* Contain paint and layout for performance */
.anlg-active article,
.anlg-active .hentry,
.anlg-active .widget {
  contain: layout style !important;
}

/* ═══════════════════════════════════════════════════════
   §2  BACKGROUND CANVAS — Deep nature dark
   ═══════════════════════════════════════════════════════ */
html.anlg-active {
  background: #030d07 !important;
  overflow-x: hidden !important;
}

body.anlg-active {
  background-color: #030d07 !important;
  background-image:
    radial-gradient(ellipse 1100px 800px at  8% 15%,  rgba(48,209,88,0.16)  0%, transparent 65%),
    radial-gradient(ellipse  800px 700px at 88% 12%,  rgba(10,132,255,0.18) 0%, transparent 65%),
    radial-gradient(ellipse  700px 600px at 55% 90%,  rgba(255,59,48,0.10)  0%, transparent 65%),
    radial-gradient(ellipse  500px 500px at 18% 72%,  rgba(10,132,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse  400px 400px at 92% 68%,  rgba(48,209,88,0.09)  0%, transparent 65%),
    linear-gradient(160deg, #020c06 0%, #040e16 40%, #020c06 70%, #080f05 100%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  color: var(--c-white-body) !important;
  font-family: var(--font-body) !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

/* ═══════════════════════════════════════════════════════
   §3  UNIVERSAL BACKGROUND OBLITERATION
   Strict specificity cascade — nothing white survives
   ═══════════════════════════════════════════════════════ */

/* Level 1 — tag selector (low specificity, wide coverage) */
body.anlg-active div, body.anlg-active section, body.anlg-active article,
body.anlg-active aside, body.anlg-active main,   body.anlg-active span,
body.anlg-active p,   body.anlg-active ul,       body.anlg-active ol,
body.anlg-active li,  body.anlg-active table,    body.anlg-active thead,
body.anlg-active tbody,body.anlg-active tfoot,   body.anlg-active tr,
body.anlg-active td,  body.anlg-active th,       body.anlg-active form,
body.anlg-active fieldset, body.anlg-active label, body.anlg-active select,
body.anlg-active textarea, body.anlg-active blockquote, body.anlg-active figure,
body.anlg-active figcaption, body.anlg-active pre, body.anlg-active code,
body.anlg-active summary, body.anlg-active details, body.anlg-active nav {
  background-color: transparent !important;
  background-image: none !important;   /* kill gradient backgrounds too */
}

/* Level 2 — inline style attribute hijack via attribute selectors */
body.anlg-active [style*="background:#fff"],
body.anlg-active [style*="background: #fff"],
body.anlg-active [style*="background:#FFF"],
body.anlg-active [style*="background:#ffffff"],
body.anlg-active [style*="background: #ffffff"],
body.anlg-active [style*="background:#FFFFFF"],
body.anlg-active [style*="background:white"],
body.anlg-active [style*="background: white"],
body.anlg-active [style*="background:White"],
body.anlg-active [style*="background-color:#fff"],
body.anlg-active [style*="background-color: #fff"],
body.anlg-active [style*="background-color:#ffffff"],
body.anlg-active [style*="background-color: #ffffff"],
body.anlg-active [style*="background-color:white"],
body.anlg-active [style*="background-color: white"],
body.anlg-active [style*="background-color:rgb(255,255,255)"],
body.anlg-active [style*="background-color: rgb(255, 255, 255)"],
body.anlg-active [style*="background-color:#f"],
body.anlg-active [style*="background-color:#e"],
body.anlg-active [style*="background-color:#fafafa"],
body.anlg-active [style*="background-color:#f9f9f9"],
body.anlg-active [style*="background-color:#f5f5f5"],
body.anlg-active [style*="background-color:#f0f0f0"] {
  background-color: var(--glass-1) !important;
  background-image: none !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
}

/* Fix dark text that becomes invisible after bg neutralisation */
body.anlg-active [style*="color:#000"],
body.anlg-active [style*="color: #000"],
body.anlg-active [style*="color:#000000"],
body.anlg-active [style*="color: #000000"],
body.anlg-active [style*="color:black"],
body.anlg-active [style*="color: black"],
body.anlg-active [style*="color:#1"],
body.anlg-active [style*="color:#2"],
body.anlg-active [style*="color:#333"],
body.anlg-active [style*="color:#444"],
body.anlg-active [style*="color:#555"],
body.anlg-active [style*="color:#222"] {
  color: var(--c-white-body) !important;
}

/* ═══════════════════════════════════════════════════════
   §4  NAVIGATION — Precision sticky glass bar
   ═══════════════════════════════════════════════════════ */
body.anlg-active .site-header,
body.anlg-active header.site-header,
body.anlg-active #masthead,
body.anlg-active #header,
body.anlg-active .main-header,
body.anlg-active .header-main {
  background: var(--glass-dark-nav) !important;
  backdrop-filter: var(--blur-nav) !important;
  -webkit-backdrop-filter: var(--blur-nav) !important;
  border-bottom: 1px solid var(--border-1) !important;
  box-shadow: 0 1px 0 var(--border-0), 0 8px 32px rgba(0,0,0,0.40) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  transition: background var(--dur-md) var(--ease-snap),
              box-shadow var(--dur-md) var(--ease-snap) !important;
}

/* Nav scrolled state — darker tint */
body.anlg-active .site-header.anlg-scrolled,
body.anlg-active #masthead.anlg-scrolled {
  background: rgba(3,10,6,0.92) !important;
  box-shadow: 0 1px 0 var(--border-1), 0 12px 48px rgba(0,0,0,0.60) !important;
}

/* Site branding */
body.anlg-active .site-title,
body.anlg-active .site-title a,
body.anlg-active .site-branding a,
body.anlg-active .logo a,
body.anlg-active .custom-logo-link,
body.anlg-active #site-title {
  color: var(--c-white) !important;
  font-family: var(--font-display) !important;
  text-shadow: 0 1px 12px rgba(48,209,88,0.35) !important;
}

/* Nav links — WHITE with glass pill hover */
body.anlg-active .main-navigation a,
body.anlg-active .nav-menu a,
body.anlg-active #site-navigation a,
body.anlg-active .menu a,
body.anlg-active nav.navigation a,
body.anlg-active .primary-menu a {
  color: var(--c-white-soft) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.015em !important;
  padding: 7px 14px !important;
  border-radius: var(--r-sm) !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    color var(--dur-sm) var(--ease-snap) !important;
  display: inline-block !important;
}

body.anlg-active .main-navigation a:hover,
body.anlg-active nav.navigation a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: var(--c-white) !important;
  text-shadow: none !important;
}

body.anlg-active .current-menu-item > a,
body.anlg-active .current_page_item > a,
body.anlg-active .current-menu-ancestor > a {
  color: var(--c-green) !important;
  background: var(--c-green-tint) !important;
}

/* Sub-menus — deep glass dropdown */
body.anlg-active .sub-menu {
  background: rgba(4,12,8,0.94) !important;
  backdrop-filter: var(--blur-lg) !important;
  -webkit-backdrop-filter: var(--blur-lg) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,0.70),
              inset 0 1px 0 var(--border-1) !important;
  padding: var(--sp-2) !important;
  overflow: hidden !important;
}

body.anlg-active .sub-menu a {
  border-radius: var(--r-xs) !important;
  color: var(--c-white-soft) !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════
   §5  TYPOGRAPHY — Colour-coded semantic hierarchy
   GUARANTEED VISIBILITY — every level tested for contrast
   ═══════════════════════════════════════════════════════ */

/* ── H1: RED — hero power, ≥ 7:1 contrast on dark ── */
body.anlg-active h1,
body.anlg-active .entry-title,
body.anlg-active .page-title,
body.anlg-active .hero-title,
body.anlg-active h1.entry-title,
body.anlg-active .post-title,
body.anlg-active .wp-block-post-title,
body.anlg-active .article-title {
  color: var(--c-red) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
  text-shadow:
    0 0 60px var(--c-red-glow),
    0 2px 16px rgba(0,0,0,0.70) !important;
}

/* H1 links must stay red — override global link blue */
body.anlg-active h1 a,
body.anlg-active .entry-title a,
body.anlg-active .entry-title a:visited,
body.anlg-active .post-title a {
  color: var(--c-red) !important;
  text-shadow: 0 0 40px var(--c-red-glow) !important;
}
body.anlg-active h1 a:hover,
body.anlg-active .entry-title a:hover {
  color: var(--c-red-soft) !important;
  text-shadow: 0 0 32px rgba(255,59,48,0.65) !important;
}

/* ── H2: BLUE — structural authority ── */
body.anlg-active h2,
body.anlg-active .entry-content h2,
body.anlg-active article h2,
body.anlg-active .wp-block-heading:is(h2) {
  color: var(--c-blue) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.20 !important;
  text-shadow:
    0 0 44px var(--c-blue-glow),
    0 2px 12px rgba(0,0,0,0.65) !important;
}

/* ── H3: GREEN — freshness, natural depth ── */
body.anlg-active h3,
body.anlg-active .entry-content h3,
body.anlg-active article h3,
body.anlg-active .wp-block-heading:is(h3) {
  color: var(--c-green) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-shadow:
    0 0 32px var(--c-green-glow),
    0 2px 8px rgba(0,0,0,0.55) !important;
}

/* ── H4: Bright white — supporting tier ── */
body.anlg-active h4,
body.anlg-active .entry-content h4 {
  color: var(--c-white-hi) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.50) !important;
}

/* ── H5/H6: Soft white ── */
body.anlg-active h5, body.anlg-active h6 {
  color: var(--c-white-soft) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

/* ── Body text: HIGH-CONTRAST white — critical fix ── */
body.anlg-active p,
body.anlg-active .entry-content p,
body.anlg-active article p,
body.anlg-active .post-content p,
body.anlg-active .page-content p {
  color: var(--c-white-body) !important;  /* 0.90 opacity = ~8.5:1 contrast */
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.90 !important;
  letter-spacing: 0.005em !important;
}

/* ── List items — same contrast as body ── */
body.anlg-active li,
body.anlg-active .entry-content li,
body.anlg-active article li,
body.anlg-active ul li,
body.anlg-active ol li {
  color: var(--c-white-body) !important;
  font-family: var(--font-body) !important;
  line-height: 1.80 !important;
}

/* List bullets/numbers — green accent */
body.anlg-active .entry-content ul li::marker,
body.anlg-active article ul li::marker {
  color: var(--c-green) !important;
}
body.anlg-active .entry-content ol li::marker,
body.anlg-active article ol li::marker {
  color: var(--c-blue) !important;
}

/* General spans, divs containing text — ensure white */
body.anlg-active span,
body.anlg-active label,
body.anlg-active div {
  color: inherit !important;
}

/* ── Widget titles — GREEN upper system ── */
body.anlg-active .widget-title,
body.anlg-active .widgettitle,
body.anlg-active .widget h2,
body.anlg-active .widget h3,
body.anlg-active .sidebar h2,
body.anlg-active .sidebar h3 {
  color: var(--c-green) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(48,209,88,0.22) !important;
  padding-bottom: var(--sp-3) !important;
  margin-bottom: var(--sp-4) !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════
   §6  LINKS — Blue glow system
   ═══════════════════════════════════════════════════════ */
body.anlg-active a,
body.anlg-active a:visited {
  color: var(--c-blue) !important;
  text-decoration: none !important;
  transition:
    color var(--dur-sm) var(--ease-snap),
    text-shadow var(--dur-sm) var(--ease-snap) !important;
}
body.anlg-active a:hover {
  color: var(--c-blue-soft) !important;
  text-shadow: 0 0 20px var(--c-blue-glow) !important;
}

/* ═══════════════════════════════════════════════════════
   §7  SEARCH — Fully visible, high-contrast
   This was broken in v1 — fixed completely
   ═══════════════════════════════════════════════════════ */

/* Search result page heading */
body.anlg-active.anlg-search .page-title,
body.anlg-active .search-results .page-title,
body.anlg-active .search-no-results .page-title {
  color: var(--c-red) !important;
  font-family: var(--font-display) !important;
}

/* Search field — white text guaranteed */
body.anlg-active input[type="search"],
body.anlg-active input[type="text"],
body.anlg-active input[type="email"],
body.anlg-active input[type="url"],
body.anlg-active input[type="tel"],
body.anlg-active input[type="number"],
body.anlg-active input[type="password"],
body.anlg-active textarea,
body.anlg-active select {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-pill) !important;
  color: var(--c-white) !important;           /* WHITE — guaranteed visible */
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  padding: 11px 20px !important;
  outline: none !important;
  transition:
    border-color var(--dur-sm) var(--ease-snap),
    background   var(--dur-sm) var(--ease-snap),
    box-shadow   var(--dur-sm) var(--ease-snap) !important;
  caret-color: var(--c-green) !important;     /* green cursor */
  -webkit-text-fill-color: var(--c-white) !important; /* override autofill */
}

body.anlg-active textarea {
  border-radius: var(--r-md) !important;
  line-height: 1.7 !important;
  resize: vertical !important;
}

body.anlg-active input::placeholder,
body.anlg-active textarea::placeholder {
  color: var(--c-white-ghost) !important;
  font-style: normal !important;
}

body.anlg-active input:focus,
body.anlg-active textarea:focus,
body.anlg-active select:focus {
  border-color: var(--c-blue) !important;
  background: rgba(255,255,255,0.11) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.18),
              0 4px 20px rgba(0,0,0,0.30) !important;
}

/* Search submit button */
body.anlg-active input[type="submit"],
body.anlg-active .search-submit,
body.anlg-active button[type="submit"] {
  background: var(--c-blue-tint) !important;
  backdrop-filter: var(--blur-xs) !important;
  border: 1px solid rgba(10,132,255,0.35) !important;
  color: var(--c-white) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition:
    background   var(--dur-sm) var(--ease-snap),
    box-shadow   var(--dur-sm) var(--ease-snap),
    transform    var(--dur-xs) var(--ease-snap) !important;
}
body.anlg-active input[type="submit"]:hover,
body.anlg-active .search-submit:hover {
  background: rgba(10,132,255,0.25) !important;
  box-shadow: 0 6px 24px var(--c-blue-glow) !important;
  transform: translateY(-1px) translateZ(0) !important;
}
body.anlg-active input[type="submit"]:active {
  transform: translateY(0) translateZ(0) !important;
}

/* Autofill override — browsers override bg colour */
body.anlg-active input:-webkit-autofill,
body.anlg-active input:-webkit-autofill:hover,
body.anlg-active input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(10,25,16,0.95) inset !important;
  -webkit-text-fill-color: var(--c-white) !important;
  caret-color: var(--c-green) !important;
}

/* ═══════════════════════════════════════════════════════
   §8  ARTICLE GLASS CARD — Main content surface
   ═══════════════════════════════════════════════════════ */
body.anlg-active article.post,
body.anlg-active article.page,
body.anlg-active .hentry,
body.anlg-active .type-post,
body.anlg-active .type-page {
  background: var(--glass-2) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--border-0) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: var(--sp-7) !important;
  transition:
    transform    var(--dur-md) var(--ease-out-expo),
    box-shadow   var(--dur-md) var(--ease-out-expo),
    border-color var(--dur-md) var(--ease-out-expo) !important;
}

/* Specular top edge — glass effect */
body.anlg-active article.post::after,
body.anlg-active .hentry::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.45) 30%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.45) 70%,
    transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hover lift — 144Hz-smooth via GPU */
body.anlg-active .archive .hentry:hover,
body.anlg-active .blog .hentry:hover,
body.anlg-active .home .hentry:hover {
  transform: translateY(-6px) translateZ(0) !important;
  box-shadow: var(--shadow-xl) !important;
  border-color: rgba(48,209,88,0.20) !important;
}

/* Article entry content wrapper */
body.anlg-active .entry-content {
  padding: var(--sp-7) !important;
  background: transparent !important;
}

/* Single article — slightly more open surface */
body.anlg-active.anlg-single article.post,
body.anlg-active.anlg-single .hentry {
  background: rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════════════════
   §9  TABLE OF CONTENTS — Precision glass panel
   Covers EZ TOC, Rank Math TOC, LuckyWP, custom
   ═══════════════════════════════════════════════════════ */
body.anlg-active #ez-toc-container,
body.anlg-active .ez-toc-container,
body.anlg-active nav.ez-toc-sticky-fixed,
body.anlg-active .ez-toc-sticky,
body.anlg-active #ez-toc-sticky-container,
body.anlg-active .toc_widget_list,
body.anlg-active .rank-math-toc,
body.anlg-active .luckywp-toc,
body.anlg-active .table-of-contents,
body.anlg-active [class*="toc-container"],
body.anlg-active [id*="toc-container"] {
  background: rgba(10,132,255,0.07) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid rgba(10,132,255,0.20) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-6) !important;
  box-shadow: var(--shadow-sm),
              inset 0 0 40px rgba(10,132,255,0.04) !important;
  margin: var(--sp-7) 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* TOC inner blue shimmer */
body.anlg-active #ez-toc-container::before,
body.anlg-active .table-of-contents::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 300px 200px at 80% 10%,
    rgba(10,132,255,0.10) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

body.anlg-active .ez-toc-title,
body.anlg-active #ez-toc-container p.ez-toc-title,
body.anlg-active .luckywp-toc .title,
body.anlg-active .table-of-contents .title,
body.anlg-active .rank-math-toc h5 {
  color: var(--c-green) !important;      /* GREEN — guaranteed visible */
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.0rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 24px var(--c-green-glow) !important;
}

body.anlg-active #ez-toc-container ul,
body.anlg-active .ez-toc-list,
body.anlg-active .toc-list,
body.anlg-active .luckywp-toc ul {
  background: transparent !important;
  list-style: none !important;
  padding-left: 0 !important;
}

body.anlg-active #ez-toc-container ul li a,
body.anlg-active .ez-toc-list a,
body.anlg-active .toc-list a,
body.anlg-active .luckywp-toc a {
  color: rgba(100,175,255,0.90) !important;  /* bright blue-soft — visible */
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  padding: 2px 0 !important;
  display: block !important;
  transition: color var(--dur-sm) var(--ease-snap) !important;
}
body.anlg-active #ez-toc-container ul li a:hover,
body.anlg-active .ez-toc-list a:hover {
  color: var(--c-white) !important;
  text-shadow: 0 0 12px var(--c-blue-glow) !important;
}

/* Nested TOC levels */
body.anlg-active #ez-toc-container ul ul,
body.anlg-active .ez-toc-list ul {
  padding-left: var(--sp-4) !important;
  border-left: 1px solid rgba(10,132,255,0.18) !important;
  margin-left: var(--sp-3) !important;
  margin-top: var(--sp-1) !important;
}

/* ═══════════════════════════════════════════════════════
   §10  BLOCKQUOTES, CALLOUTS, PULL QUOTES
   ═══════════════════════════════════════════════════════ */
body.anlg-active blockquote,
body.anlg-active .wp-block-quote {
  background: rgba(10,132,255,0.09) !important;
  backdrop-filter: var(--blur-xs) !important;
  -webkit-backdrop-filter: var(--blur-xs) !important;
  border: none !important;
  border-left: 3px solid var(--c-blue) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  padding: var(--sp-6) var(--sp-7) !important;
  margin: var(--sp-7) 0 !important;
  position: relative !important;
}
body.anlg-active blockquote p {
  color: var(--c-white-body) !important;
  font-style: italic !important;
  font-family: var(--font-display) !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
}
body.anlg-active blockquote cite,
body.anlg-active blockquote footer {
  color: var(--c-white-dim) !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  font-family: var(--font-body) !important;
}

body.anlg-active .wp-block-pullquote {
  background: var(--c-red-tint) !important;
  border-top: 2px solid var(--c-red) !important;
  border-bottom: 2px solid var(--c-red) !important;
  border-left: none !important;
  border-radius: var(--r-xs) !important;
  padding: var(--sp-8) var(--sp-7) !important;
}
body.anlg-active .wp-block-pullquote p,
body.anlg-active .wp-block-pullquote blockquote p {
  color: var(--c-red-soft) !important;
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
}

/* ═══════════════════════════════════════════════════════
   §11  CODE & PRE
   ═══════════════════════════════════════════════════════ */
body.anlg-active pre,
body.anlg-active .wp-block-code,
body.anlg-active .wp-block-preformatted {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: var(--blur-xs) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-6) !important;
  overflow-x: auto !important;
}
body.anlg-active pre code,
body.anlg-active .wp-block-code code {
  color: var(--c-green) !important;      /* GREEN — highly visible on black */
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
  line-height: 1.70 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
body.anlg-active p code,
body.anlg-active li code,
body.anlg-active td code {
  background: rgba(48,209,88,0.10) !important;
  color: var(--c-green-soft) !important;
  border: 1px solid rgba(48,209,88,0.18) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.875em !important;
}

/* ═══════════════════════════════════════════════════════
   §12  TABLES
   ═══════════════════════════════════════════════════════ */
body.anlg-active table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--glass-1) !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  margin: var(--sp-6) 0 !important;
}
body.anlg-active thead,
body.anlg-active thead tr,
body.anlg-active table thead {
  background: rgba(48,209,88,0.12) !important;
}
body.anlg-active thead th {
  color: var(--c-green) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: var(--sp-3) var(--sp-5) !important;
  border-bottom: 1px solid rgba(48,209,88,0.22) !important;
}
body.anlg-active tbody tr {
  transition: background var(--dur-xs) var(--ease-snap) !important;
}
body.anlg-active tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.025) !important;
}
body.anlg-active tbody tr:hover {
  background: rgba(255,255,255,0.05) !important;
}
body.anlg-active td {
  padding: var(--sp-3) var(--sp-5) !important;
  color: var(--c-white-body) !important;    /* guaranteed white text */
  border-bottom: 1px solid var(--border-0) !important;
  font-size: 0.925rem !important;
}
body.anlg-active tbody tr:last-child td {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════
   §13  IMAGES
   ═══════════════════════════════════════════════════════ */
body.anlg-active .entry-content img,
body.anlg-active article img,
body.anlg-active .wp-post-image {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border-0) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--dur-md) var(--ease-out-expo),
              box-shadow var(--dur-md) var(--ease-out-expo) !important;
  will-change: transform !important;
}
body.anlg-active .entry-content img:hover {
  transform: scale(1.012) translateZ(0) !important;
  box-shadow: var(--shadow-xl) !important;
}
body.anlg-active .post-thumbnail,
body.anlg-active .featured-image {
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════
   §14  TAXONOMY PILLS — Categories, Tags
   ═══════════════════════════════════════════════════════ */

/* Categories — GREEN */
body.anlg-active .cat-links a,
body.anlg-active .category a,
body.anlg-active .post-categories a,
body.anlg-active .entry-meta .cat-links a,
body.anlg-active a[rel="category tag"] {
  background: rgba(48,209,88,0.14) !important;
  color: var(--c-green) !important;
  border: 1px solid rgba(48,209,88,0.28) !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-family: var(--font-body) !important;
  text-shadow: none !important;
  transition: background var(--dur-sm) var(--ease-snap),
              box-shadow  var(--dur-sm) var(--ease-snap) !important;
}
body.anlg-active .cat-links a:hover { 
  background: rgba(48,209,88,0.25) !important;
  box-shadow: 0 4px 16px var(--c-green-glow) !important;
}

/* Tags — BLUE chips */
body.anlg-active .tags-links a,
body.anlg-active a[rel="tag"],
body.anlg-active .entry-tags a,
body.anlg-active .post-tags a {
  background: var(--c-blue-tint) !important;
  color: var(--c-blue-soft) !important;
  border: 1px solid rgba(10,132,255,0.24) !important;
  border-radius: var(--r-xs) !important;
  padding: 2px 9px !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  text-shadow: none !important;
  display: inline-block !important;
  margin: 2px !important;
}
body.anlg-active .tags-links a:hover {
  background: rgba(10,132,255,0.22) !important;
}

/* Entry meta (date, author) */
body.anlg-active .entry-meta,
body.anlg-active .post-meta,
body.anlg-active .byline,
body.anlg-active .posted-on {
  font-size: 0.82rem !important;
  font-family: var(--font-body) !important;
}
body.anlg-active .entry-meta *,
body.anlg-active .post-meta * {
  color: var(--c-white-dim) !important;
}
body.anlg-active .entry-meta a,
body.anlg-active .post-meta a {
  color: var(--c-white-soft) !important;
}
body.anlg-active .entry-meta a:hover {
  color: var(--c-green) !important;
}

/* ═══════════════════════════════════════════════════════
   §15  BUTTONS & CTAs
   ═══════════════════════════════════════════════════════ */
body.anlg-active .button,
body.anlg-active a.button,
body.anlg-active .btn,
body.anlg-active .more-link,
body.anlg-active .read-more,
body.anlg-active .wp-block-button__link {
  background: var(--glass-3) !important;
  backdrop-filter: var(--blur-xs) !important;
  -webkit-backdrop-filter: var(--blur-xs) !important;
  border: 1px solid rgba(10,132,255,0.35) !important;
  color: var(--c-white) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--r-pill) !important;
  padding: 11px 26px !important;
  display: inline-block !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transition:
    background  var(--dur-sm) var(--ease-snap),
    box-shadow  var(--dur-sm) var(--ease-snap),
    transform   var(--dur-xs) var(--ease-snap),
    border-color var(--dur-sm) var(--ease-snap) !important;
  will-change: transform !important;
}
body.anlg-active .button:hover,
body.anlg-active .more-link:hover,
body.anlg-active .wp-block-button__link:hover {
  background: rgba(10,132,255,0.20) !important;
  border-color: rgba(10,132,255,0.55) !important;
  box-shadow: 0 8px 28px var(--c-blue-glow) !important;
  transform: translateY(-2px) translateZ(0) !important;
}
body.anlg-active .button:active {
  transform: translateY(0) translateZ(0) !important;
}

/* ═══════════════════════════════════════════════════════
   §16  SIDEBAR & WIDGETS
   ═══════════════════════════════════════════════════════ */
body.anlg-active #secondary,
body.anlg-active .widget-area,
body.anlg-active .sidebar {
  background: transparent !important;
}
body.anlg-active .widget {
  background: var(--glass-1) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-6) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow var(--dur-md) var(--ease-snap) !important;
  will-change: transform !important;
}
body.anlg-active .widget:hover {
  box-shadow: var(--shadow-md) !important;
}
/* Widget text */
body.anlg-active .widget li,
body.anlg-active .widget p,
body.anlg-active .widget span {
  color: var(--c-white-soft) !important;
}
body.anlg-active .widget a {
  color: var(--c-blue-soft) !important;
}
body.anlg-active .widget a:hover {
  color: var(--c-white) !important;
}

/* ═══════════════════════════════════════════════════════
   §17  FOOTER
   ═══════════════════════════════════════════════════════ */
body.anlg-active .site-footer,
body.anlg-active #colophon,
body.anlg-active footer {
  background: rgba(2,8,4,0.90) !important;
  backdrop-filter: var(--blur-nav) !important;
  -webkit-backdrop-filter: var(--blur-nav) !important;
  border-top: 1px solid var(--border-0) !important;
}
body.anlg-active .site-footer *,
body.anlg-active #colophon * {
  color: var(--c-white-dim) !important;
}
body.anlg-active .site-footer a {
  color: var(--c-white-soft) !important;
}
body.anlg-active .site-footer a:hover {
  color: var(--c-green) !important;
}

/* ═══════════════════════════════════════════════════════
   §18  BREADCRUMBS
   ═══════════════════════════════════════════════════════ */
body.anlg-active .breadcrumbs,
body.anlg-active .breadcrumb,
body.anlg-active .yoast-breadcrumb,
body.anlg-active #breadcrumbs,
body.anlg-active [class*="breadcrumb"] {
  font-size: 0.80rem !important;
  font-family: var(--font-body) !important;
}
body.anlg-active .yoast-breadcrumb *,
body.anlg-active .breadcrumbs * {
  color: var(--c-white-dim) !important;
}
body.anlg-active .yoast-breadcrumb a,
body.anlg-active .breadcrumbs a {
  color: var(--c-white-soft) !important;
}
body.anlg-active .yoast-breadcrumb a:hover {
  color: var(--c-green) !important;
}

/* ═══════════════════════════════════════════════════════
   §19  COMMENTS
   ═══════════════════════════════════════════════════════ */
body.anlg-active #comments,
body.anlg-active .comments-area {
  background: transparent !important;
}
body.anlg-active .comments-title {
  color: var(--c-blue) !important;
  font-family: var(--font-display) !important;
}
body.anlg-active .comment-body {
  background: var(--glass-1) !important;
  backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-5) !important;
  margin-bottom: var(--sp-4) !important;
}
body.anlg-active .comment-content p {
  color: var(--c-white-soft) !important;
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
}
body.anlg-active .comment-author .fn,
body.anlg-active .comment-author .fn a {
  color: var(--c-green) !important;
  font-weight: 600 !important;
}
body.anlg-active .comment-meta time,
body.anlg-active .comment-metadata {
  color: var(--c-white-dim) !important;
  font-size: 0.78rem !important;
}
body.anlg-active #respond,
body.anlg-active .comment-respond {
  background: var(--glass-1) !important;
  backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-7) !important;
  margin-top: var(--sp-7) !important;
}
body.anlg-active .comment-reply-title,
body.anlg-active #reply-title {
  color: var(--c-blue) !important;
  font-family: var(--font-display) !important;
}

/* ═══════════════════════════════════════════════════════
   §20  AUTHOR BOX — Enhanced green glass
   ═══════════════════════════════════════════════════════ */
body.anlg-active .author-box,
body.anlg-active .author-card,
body.anlg-active .about-author,
body.anlg-active .post-author-box,
body.anlg-active .entry-author,
body.anlg-active [class*="author-bio"] {
  background: rgba(48,209,88,0.07) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid rgba(48,209,88,0.20) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 8px 40px rgba(48,209,88,0.08),
              inset 0 1px 0 rgba(48,209,88,0.18) !important;
  padding: var(--sp-7) !important;
  position: relative !important;
  overflow: hidden !important;
}
body.anlg-active .author-box::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important; right: -40px !important;
  width: 180px !important; height: 180px !important;
  background: radial-gradient(circle, rgba(48,209,88,0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
body.anlg-active .author-box h3,
body.anlg-active .author-name,
body.anlg-active .author-box .name {
  color: var(--c-green) !important;
  font-family: var(--font-display) !important;
}
body.anlg-active .author-box p,
body.anlg-active .author-bio p {
  color: var(--c-white-soft) !important;
}

/* ═══════════════════════════════════════════════════════
   §21  RELATED POSTS, PAGINATION
   ═══════════════════════════════════════════════════════ */
body.anlg-active .related-posts h3,
body.anlg-active .yarpp-related h3 {
  color: var(--c-green) !important;
  font-family: var(--font-display) !important;
}
body.anlg-active .related-post-item,
body.anlg-active .yarpp-related article {
  background: var(--glass-1) !important;
  backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  transition: transform var(--dur-md) var(--ease-out-expo) !important;
  will-change: transform !important;
}
body.anlg-active .related-post-item:hover {
  transform: translateY(-4px) translateZ(0) !important;
}
body.anlg-active .related-post-item h4,
body.anlg-active .yarpp-related h5 {
  color: var(--c-white-hi) !important;
}

/* Pagination */
body.anlg-active .page-numbers,
body.anlg-active .pagination a {
  background: var(--glass-1) !important;
  color: var(--c-white-soft) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 14px !important;
  margin: 2px !important;
  display: inline-block !important;
  font-family: var(--font-body) !important;
  transition: background var(--dur-sm) var(--ease-snap) !important;
}
body.anlg-active .page-numbers.current,
body.anlg-active .pagination .current {
  background: rgba(10,132,255,0.22) !important;
  border-color: rgba(10,132,255,0.38) !important;
  color: var(--c-blue-soft) !important;
}
body.anlg-active .page-numbers:hover {
  background: var(--glass-2) !important;
  color: var(--c-white) !important;
}

/* ═══════════════════════════════════════════════════════
   §22  NOTICE / CALLOUT BLOCKS
   ═══════════════════════════════════════════════════════ */
body.anlg-active .wp-block-notice.is-style-info,
body.anlg-active .notice-info,
body.anlg-active .callout-info {
  background: var(--c-blue-tint) !important;
  border-left: 3px solid var(--c-blue) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: var(--c-white-body) !important;
}
body.anlg-active .wp-block-notice.is-style-warning,
body.anlg-active .notice-warning {
  background: rgba(255,159,10,0.10) !important;
  border-left: 3px solid #FF9F0A !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: var(--c-white-body) !important;
}
body.anlg-active .wp-block-notice.is-style-success,
body.anlg-active .notice-success {
  background: var(--c-green-tint) !important;
  border-left: 3px solid var(--c-green) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: var(--c-white-body) !important;
}

/* ═══════════════════════════════════════════════════════
   §23  MAJOR THEME OVERRIDES
   GeneratePress, Astra, OceanWP, Kadence, FSE
   ═══════════════════════════════════════════════════════ */

/* GeneratePress */
body.anlg-active .inside-article,
body.anlg-active .inside-page-hero,
body.anlg-active #generate-slideshow { background: transparent !important; }
body.anlg-active .generate-columns-container { background: transparent !important; }
body.anlg-active .inside-header-image,
body.anlg-active .ast-separate-container .ast-article-single { background: transparent !important; }

/* Astra */
body.anlg-active .ast-container,
body.anlg-active .ast-primary-header,
body.anlg-active #ast-fixed-header { background: transparent !important; }
body.anlg-active .ast-article-single,
body.anlg-active .ast-blog-layout-3,
body.anlg-active .ast-page-builder-template { background: transparent !important; }

/* OceanWP */
body.anlg-active #site-header-inner,
body.anlg-active .oceanwp-mobile-menu-icon a { background: transparent !important; }
body.anlg-active .entry.clr { background: transparent !important; }

/* Kadence */
body.anlg-active .wp-site-blocks,
body.anlg-active .kadence-inner-column-inner,
body.anlg-active .single-content { background: transparent !important; }

/* Twenty Twenty-Four / Five (FSE) */
body.anlg-active .wp-block-template-part,
body.anlg-active .wp-block-post-content,
body.anlg-active .wp-block-query,
body.anlg-active .is-layout-flow,
body.anlg-active .is-layout-constrained { background: transparent !important; }

/* Elementor */
body.anlg-active .elementor-section,
body.anlg-active .elementor-container,
body.anlg-active .elementor-column-wrap,
body.anlg-active .elementor-widget-wrap { background: transparent !important; }

/* WP Bakery */
body.anlg-active .vc_row,
body.anlg-active .vc_column-inner,
body.anlg-active .wpb_wrapper { background: transparent !important; }

/* ═══════════════════════════════════════════════════════
   §24  SCROLLBAR — Nature glass
   ═══════════════════════════════════════════════════════ */
body.anlg-active ::-webkit-scrollbar { width: 5px; height: 5px; }
body.anlg-active ::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
}
body.anlg-active ::-webkit-scrollbar-thumb {
  background: rgba(48,209,88,0.28);
  border-radius: var(--r-pill);
  transition: background var(--dur-sm);
}
body.anlg-active ::-webkit-scrollbar-thumb:hover {
  background: rgba(48,209,88,0.55);
}

/* ═══════════════════════════════════════════════════════
   §25  SELECTION HIGHLIGHT
   ═══════════════════════════════════════════════════════ */
body.anlg-active ::selection {
  background: rgba(10,132,255,0.38);
  color: var(--c-white);
}

/* ═══════════════════════════════════════════════════════
   §26  144Hz ANIMATIONS — Compositor-thread only
   All transforms use translateZ(0) to stay on GPU
   ═══════════════════════════════════════════════════════ */

/* Page entry animation */
@keyframes anlg-fade-up {
  from { opacity: 0; transform: translateY(24px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)     translateZ(0); }
}

@keyframes anlg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes anlg-scale-in {
  from { opacity: 0; transform: scale(0.97) translateZ(0); }
  to   { opacity: 1; transform: scale(1.00) translateZ(0); }
}

/* Orb drift — gentle float, never causes reflow */
@keyframes anlg-orb-drift-a {
  0%   { transform: translate(0px, 0px) scale(1.00) translateZ(0); }
  33%  { transform: translate(30px, -20px) scale(1.04) translateZ(0); }
  66%  { transform: translate(-20px, 15px) scale(0.97) translateZ(0); }
  100% { transform: translate(0px, 0px) scale(1.00) translateZ(0); }
}
@keyframes anlg-orb-drift-b {
  0%   { transform: translate(0px, 0px) scale(1.00) translateZ(0); }
  40%  { transform: translate(-25px, 20px) scale(1.03) translateZ(0); }
  80%  { transform: translate(18px, -14px) scale(0.98) translateZ(0); }
  100% { transform: translate(0px, 0px) scale(1.00) translateZ(0); }
}

/* Staggered article entry */
body.anlg-active article,
body.anlg-active .hentry {
  animation: anlg-fade-up var(--dur-xl) var(--ease-out-expo) both !important;
}
body.anlg-active article:nth-child(1) { animation-delay: 0ms !important; }
body.anlg-active article:nth-child(2) { animation-delay: 60ms !important; }
body.anlg-active article:nth-child(3) { animation-delay: 120ms !important; }
body.anlg-active article:nth-child(4) { animation-delay: 180ms !important; }
body.anlg-active article:nth-child(5) { animation-delay: 240ms !important; }
body.anlg-active article:nth-child(6) { animation-delay: 300ms !important; }

body.anlg-active .widget {
  animation: anlg-scale-in var(--dur-xl) var(--ease-out-expo) both !important;
}

/* Reduce motion — accessibility */
@media (prefers-reduced-motion: reduce) {
  body.anlg-active *,
  body.anlg-active *::before,
  body.anlg-active *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════
   §27  MOBILE — Responsive adjustments
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.anlg-active article.post,
  body.anlg-active .hentry {
    border-radius: var(--r-md) !important;
    margin-bottom: var(--sp-5) !important;
  }
  body.anlg-active .entry-content {
    padding: var(--sp-5) !important;
  }
  body.anlg-active h1,
  body.anlg-active .entry-title {
    font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
  }
  body.anlg-active h2,
  body.anlg-active .entry-content h2 {
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
  }
  body.anlg-active p,
  body.anlg-active .entry-content p {
    font-size: 0.975rem !important;
    line-height: 1.80 !important;
  }
  body.anlg-active .widget {
    border-radius: var(--r-md) !important;
  }
}
@media (max-width: 480px) {
  body.anlg-active #ez-toc-container,
  body.anlg-active .table-of-contents {
    padding: var(--sp-5) !important;
    border-radius: var(--r-md) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   §28  HIGH-DPI / RETINA — sharper glass borders
   ═══════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.anlg-active article.post,
  body.anlg-active .hentry,
  body.anlg-active .widget {
    border-width: 0.5px !important;  /* hairline on retina */
  }
}