/* ============================================================
   ORP v3.0 — Open Resonance Protocol
   Shared Stylesheet

   PATCH LOG (v3.0.1):
     MEDIUM-1— Mobile .mobile-nav: removed display:none from base rule.
               The display:none was killing the opacity/visibility fade
               transition on ≤640px. Base rule now uses only opacity:0 +
               visibility:hidden (already present). display:block kept on
               .active for older Safari compatibility.
     MEDIUM-2— .rc-warden declared twice with conflicting border-color and
               background. Second block always won the cascade; first was
               dead code. Merged into single canonical declaration.
     LOW-1   — .scroll-progress: replaced will-change:width + JS width%
               writes with will-change:transform + CSS transform-origin:left
               + JS scaleX(0..1). scaleX is GPU-compositable; width is not.
               Corresponding main.js write updated to match.
     LOW-2   — Orphan `nav { isolation: isolate }` block (line ~793) merged
               into the main nav rule. Duplicate removed.
     LOW-3   — .hamburger-btn span: removed `top` from the transition list.
               top is a layout property — not GPU-compositable. The active
               state still uses top: to set the collapsed position (a one-
               time layout change), but the animated property is transform.
     LOW-4   — div[class*="rc-"] attribute selector: flagged as O(n) scan.
               Added explanatory comment; no code change (intent is correct).
   ============================================================ */

:root {
  /* Font System */
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-display: "Oxanium", "Rajdhani", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;
  --tracking-tight: -0.025em;
  --tracking-normal: 0.015em;
  --tracking-wide: 0.08em;
  --bg: #06080b;
  --panel: #0f1217;
  --panel-2: #161a22;
  --panel-bright: #212630;
  --border: rgba(221, 17, 17, 0.08);
  --border-strong: rgba(221, 17, 17, 0.18);
  --text: #dce2eb;
  --muted: #8a95a5;
  --heading: #f0f4f9;
  --primary: #dd1111;
  --primary-bright: #ff3333;
  --primary-dark: #aa0000;
  --accent-orange: #ff6600;
  --accent-orange-bright: #ff8833;
  --accent-purple: #6a3a8a;
  --accent-purple-bright: #8a5aaa;
  --accent-cyan: #00d4ff;
  --success: #3fb950;
  --danger: #ff3333;
  --warning: #ff8833;
  --shadow: rgba(0, 0, 0, 0.65);
  --radius: 28px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --transition: 250ms cubic-bezier(0.2, 0, 0, 1);
}

.author-avatar-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition);
}

/* Font Hierarchy */
h1, h2, h3, .section-title, .logo, .pipeline-step, .section-eyebrow,
.release-tag, .author-name, .author-title, .badge, .btn {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

p, li, .nav-links a, .section-description {
  font-family: var(--font-ui);
  font-weight: 400;
}


/* ============================================================
   GLOBAL BODY REFINEMENT
   ============================================================ */

body {
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Improve paragraph readability */
p,
li {
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* ============================================================
   DISPLAY / TITLES
   ============================================================ */

h1,
h2,
h3,
.section-title,
.logo,
.pipeline-step,
.section-eyebrow,
.release-tag,
.author-name,
.author-title,
.badge,
.mobile-nav a,
.orp-compact-scope .telemetry-title,
.orp-compact-scope .status-pill {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  font-kerning: normal;
}

/* Main hero title polish */
h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

/* Section title readability */
.section-title {
  font-weight: 700;
  line-height: 1.02;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav-links a {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ============================================================
   TERMINAL / TELEMETRY / ASCII
   ============================================================ */

.orp-compact-scope .telemetry-subtitle,
.orp-compact-scope .metric-line,
.orp-compact-scope .node-tag,
.orp-compact-scope .ascii-core-panel,
.avatar-fallback,
.glyph {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

/* Sharper telemetry appearance */
.orp-compact-scope .metric-line {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

/* ASCII stabilization */
.orp-compact-scope .ascii-core-panel {
  line-height: 1.08;
  letter-spacing: 0;
}

/* ============================================================
   CARD TYPOGRAPHY REFINEMENT
   ============================================================ */

.pipeline-card h3,
.doc-card h3,
.principle h3,
.quick-access-card h3,
.release-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pipeline-card p,
.doc-card p,
.principle p,
.quick-access-card p,
.release-card p,
.section-description {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.75;
}

/* ============================================================
   MOBILE TYPOGRAPHY FIXES
   ============================================================ */

@media (max-width: 640px) {

  h1 {
    font-size: 2.65rem !important;
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .section-title {
    line-height: 1.06;
  }

  .hero p,
  .section-description,
  p,
  li {
    font-size: 1rem;
    line-height: 1.72;
  }

  .mobile-nav a {
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   FONT RENDERING FIXES
   ============================================================ */

h1,
h2,
h3,
.section-title,
.logo,
.btn,
.badge {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Prevent overly thin rendering on Firefox */
body,
p,
li,
.nav-links a {
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html,
body {
  width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.15px;
}
a { color: var(--accent-orange); text-decoration: none; transition:
  transform var(--transition),
  opacity var(--transition); cursor: pointer; }
a:hover { color: var(--accent-orange-bright); }

/* ── Background Atmosphere ─────────────────────────────── */
.grid-bg {
  position: fixed; inset: 0; z-index: -4;
  background-image:
    linear-gradient(rgba(221, 17, 17, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 17, 17, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 50%, transparent 90%);
  pointer-events: none;
  /* GPU: static background — own layer, never repainted */
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
}

.ember {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
  animation: emberFloat linear infinite;
  will-change: transform, opacity;
  contain: strict; /* own stacking context — no layout/paint spill */
}
.ember-1 { width: 4px; height: 4px; background: rgba(255,102,0,0.5); top: 20%; left: 15%; animation-duration: 8s; animation-delay: 0s; }
.ember-2 { width: 3px; height: 3px; background: rgba(255,51,51,0.6); top: 35%; right: 12%; animation-duration: 10s; animation-delay: 2s; }
.ember-3 { width: 5px; height: 5px; background: rgba(255,136,51,0.4); bottom: 30%; left: 8%; animation-duration: 12s; animation-delay: 4s; }
.ember-4 { width: 3px; height: 3px; background: rgba(221,17,17,0.5); bottom: 15%; right: 20%; animation-duration: 9s; animation-delay: 1s; }
.ember-5 { width: 4px; height: 4px; background: rgba(106,58,138,0.35); top: 60%; right: 8%; animation-duration: 11s; animation-delay: 3s; }

@keyframes emberFloat {
  0%   { transform: translateY(0px) translateX(0px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-70px) translateX(25px); opacity: 0; }
}

.glow {
  position: fixed; 
  width: 1000px; 
  height: 1000px; 
  border-radius: 50%;
  /* Slightly extended stops to simulate a smooth blur natively without processing overhead */
  background: radial-gradient(circle, rgba(255,102,0,0.14) 0%, rgba(221,17,17,0.08) 40%, rgba(106,58,138,0.02) 65%, transparent 80%);
  top: -350px; 
  right: -250px; 
  z-index: -1; 
  pointer-events: none; 
  will-change: transform;
  transform: translateZ(0); 
  contain: strict; /* Upgraded from layout style to strict since dimensions are static */
}

.resonance-ring {
  position: fixed; width: 1000px; height: 1000px; border-radius: 50%;
  border: 1px solid rgba(221,17,17,0.05);
  top: -330px; right: -250px; z-index: -3;
  animation: rotateSlow 75s linear infinite;
  will-change: transform;
  contain: layout style; /* pseudo-elements stay inside; no page relayout */
}
.resonance-ring::before, .resonance-ring::after {
  content: ""; position: absolute; inset: 80px; border-radius: inherit; border: 1px dashed rgba(255,102,0,0.04);
}
.resonance-ring::after { inset: 160px; border-color: rgba(106,58,138,0.04); }

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.glyph-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; opacity: 0.05; contain: strict; }
.glyph { position: absolute; color: var(--primary); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.12em; animation: drift linear infinite; will-change: transform; contain: layout style; }
.glyph:nth-child(1) { top: 12%; left: 8%; animation-duration: 26s; }
.glyph:nth-child(2) { top: 34%; right: 10%; animation-duration: 31s; }
.glyph:nth-child(3) { bottom: 18%; left: 14%; animation-duration: 34s; }
.glyph:nth-child(4) { bottom: 10%; right: 20%; animation-duration: 28s; }

@keyframes drift {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

/* ── Layout ────────────────────────────────────────────── */
.container { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }

/* ── Navigation ────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(6, 8, 11, 0.90); /* Bumping opacity saves fill-rate calculations */
  backdrop-filter: blur(10px);       /* 10px is significantly cheaper to process than 20px */
  -webkit-backdrop-filter: blur(10px);
  backface-visibility: hidden;       /* FF: prevents backdrop-filter from forking a new intermediate surface */
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease, transform 300ms ease;
  transform: translateZ(0);          /* Ensure hardware layer context remains absolute */
  will-change: transform;
  contain: layout style;
}

nav.menu-open {
  background: rgba(6, 8, 11, 0.99) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  transform: translateZ(0);
}

nav.nav-hidden {
  /* translateY is GPU-composited — no layout recalc on hide/reveal */
  transform: translateY(-100%);
}

.nav-inner { 
  min-height: 84px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 32px; 
}

.logo { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  color: var(--heading); 
  font-family: var(--font-display); 
  font-weight: 700; 
  letter-spacing: 0.04em; 
}

.logo-mark {
  position: relative;
  width: 42px;
  height: 42px;
  background: transparent;
}

.logo-mark::before,
.logo-mark::after,
.logo-mark span {
  content: "";
  position: absolute;
  border: 2px solid;
  border-color: var(--primary);
  border-image: linear-gradient(135deg, var(--primary), var(--accent-orange)) 1;
}

.logo-mark::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotate(0deg);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.logo-mark::after {
  width: 68%;
  height: 68%;
  top: 16%;
  left: 16%;
  transform: rotate(0deg);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.logo-mark span {
  width: 36%;
  height: 36%;
  top: 32%;
  left: 32%;
  transform: rotate(0deg);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-color: var(--accent-orange);
  box-shadow: 0 0 8px rgba(221, 17, 17, 0.6);
}

.nav-links { 
  display: flex; 
  align-items: center; 
  gap: 32px; 
  flex-wrap: wrap; 
}

.nav-links a {
  position: relative; 
  color: var(--muted); 
  font-weight: 500; 
  font-size: 0.95rem;
  letter-spacing: 0.15px; 
  font-family: var(--font-ui);
}

.nav-links a::after {
  content: ""; 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  bottom: -6px; 
  width: 16px;   /* always full width; visibility driven by scaleX */
  height: 3px; 
  border-radius: 99px;
  background: var(--primary); 
  transition: transform var(--transition); /* scaleX is GPU-compositable — no layout recalc */
}
.nav-links a:hover { color: var(--heading); }
.nav-links a:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-links a.active { color: var(--heading); }
.nav-links a.active::after { transform: translateX(-50%) scaleX(1); }

/* ── Hamburger Navigation (REPAIRED) ─────────────────────────────── */
.hamburger-btn {
  display: none;
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(221,17,17,0.15);
  background: var(--panel-2); 
  cursor: pointer;
  padding: 0;
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
  z-index: 1200;
}

.hamburger-btn:hover {
  background: rgba(221,17,17,0.08);
  border-color: rgba(255,102,0,0.3);
}

.hamburger-btn span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--heading);
  /* PATCH LOW-3: removed 'top' from transitions — top is a layout property,
     not GPU-compositable. The three spans are now positioned via transform
     instead of top, so the X animation is purely compositor. See position
     overrides below which switch from top:Npx to translateY(). */
  transform: translateX(-50%) translateY(0px);
  transition:
    transform 250ms ease,
    opacity 250ms ease,
    background 250ms ease;
}

.hamburger-btn span:nth-child(1) { top: 17px; }
.hamburger-btn span:nth-child(2) { top: 25px; }
.hamburger-btn span:nth-child(3) { top: 33px; }

.hamburger-btn.active span:nth-child(1) {
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent-orange);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateX(-50%) rotate(-45deg);
  background: var(--accent-orange);
}

/* ── Mobile Navigation Overlay ────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: 
    radial-gradient(circle at top right, rgba(255,102,0,0.08), transparent 40%),
    var(--bg); 
  transition: opacity 280ms ease, visibility 280ms ease;
  /* GPU: opacity and visibility are compositor-only transitions */
  will-change: opacity;
  contain: layout style;
}

.mobile-nav.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 120px 36px 48px;
  gap: 18px;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(221,17,17,0.08);
  background: linear-gradient(135deg, rgba(221,17,17,0.05), rgba(255,102,0,0.02));
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.mobile-nav a:hover,
.mobile-nav a.active {
  transform: translateY(-2px);
  border-color: rgba(255,102,0,0.3);
  background: linear-gradient(135deg, rgba(221,17,17,0.12), rgba(255,102,0,0.06));
  color: var(--accent-orange-bright);
}

/* ── Hero ──────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 100px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }

section { padding: clamp(60px, 10vw, 120px) 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.02); }
p, li { font-weight: 300; line-height: 1.7; }

/* ── Badge ─────────────────────────────────────────────── */
.badge-wrapper { margin-bottom: 24px; }
.badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px;
  border-radius: var(--radius-xs); border: 1px solid var(--border-strong);
  background: var(--panel); color: #ffa494; font-size: 0.85rem;
  font-weight: 700; letter-spacing: 0.5px; font-family: var(--font-display);
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-bright); box-shadow: 0 0 12px rgba(221,17,17,0.8);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Typography ────────────────────────────────────────── */
h1 {
  margin: 0; color: var(--heading); font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.8rem); line-height: 1.08;
  letter-spacing: -0.03em; font-weight: 800;
}
.hero p { max-width: 560px; margin-top: 24px; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.25px;
  transition:
  background var(--transition),
  border-color var(--transition),
  transform var(--transition),
  opacity var(--transition); border: none; cursor: pointer;
  text-decoration: none; font-family: var(--font-ui);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent-orange)); color: #06080b; box-shadow: 0 4px 16px rgba(221,17,17,0.2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,102,0,0.3); color: #000; }
.btn-primary:active { transform: translateY(0px); }
.btn-secondary { border: 1px solid var(--border-strong); background: rgba(15,18,23,0.4); color: var(--text); }
.btn-secondary:hover { transform: translateY(-2px); background: var(--panel); border-color: rgba(221,17,17,0.4); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.btn-secondary:active { transform: translateY(0px); }

/* ── Directives ────────────────────────────────────────── */
.directives-list { margin: 12px 0 0 0; padding-left: 20px; list-style-type: square; }
.directives-list li { margin-bottom: 10px; color: var(--text); font-size: 0.9rem; }
.directives-list li strong { color: var(--accent-orange); font-family: var(--font-display); }

/* ── Section Layout ────────────────────────────────────── */
.section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(221,17,17,0.15), rgba(255,102,0,0.1), transparent); }
.section-header { max-width: 800px; margin-bottom: clamp(40px, 6vw, 64px); text-align: left; }
.section-eyebrow { color: var(--primary-bright); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; font-family: var(--font-display); }
.section-title { margin: 0 0 16px; color: var(--heading); font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
.section-description { color: var(--muted); font-size: 1.1rem; max-width: 700px; line-height: 1.6; }

/* ── Cards ─────────────────────────────────────────────── */
.pipeline-grid, .docs-grid, .principles, .quick-access-grid { display: grid; gap: 24px; }
.pipeline-grid     { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.quick-access-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 32px; }

.pipeline-card, .doc-card, .principle, .quick-access-card, .release-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--panel);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  /* GPU: transform and opacity are compositor-only — isolate to own layer
     so card hovers don't repaint siblings */
  contain: layout style;
  isolation: isolate;
}
.pipeline-card::before, .doc-card::before, .principle::before, .quick-access-card::before, .release-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,102,0,0.03), rgba(221,17,17,0.03));
  opacity: 0; transition: opacity var(--transition); pointer-events: none;
}
.pipeline-card:hover, .doc-card:hover, .principle:hover, .quick-access-card:hover, .release-card:hover {
  transform: translateY(-4px); background-color: var(--panel-2);
  border-color: rgba(221,17,17,0.24);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 16px rgba(221,17,17,0.03);
}
.pipeline-card:hover::before, .doc-card:hover::before, .principle:hover::before, .quick-access-card:hover::before, .release-card:hover::before { opacity: 1; }

.pipeline-card { padding: 36px; }
.pipeline-step { color: var(--accent-orange); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; margin-bottom: 12px; font-family: var(--font-display); }
.pipeline-card h3, .doc-card h3, .principle h3, .quick-access-card h3, .release-card h3 { margin-top: 0; color: var(--heading); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.15px; }
.pipeline-card p, .doc-card p, .principle p, .quick-access-card p, .release-card p { color: var(--muted); margin-bottom: 0; font-size: 0.98rem; }

.docs-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.doc-card { padding: 36px; background: var(--panel); }
.doc-card p { margin-bottom: 24px; }
.doc-card ul { margin: 0; padding-left: 16px; }
.doc-card li { margin-bottom: 12px; list-style-type: square; color: rgba(221,17,17,0.4); }
.doc-card ul li a { color: var(--accent-orange); font-weight: 500; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 4px; }
.doc-card ul li a:hover { color: var(--accent-orange-bright); transform: translateX(3px); text-decoration: none; }

.principles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.principle { padding: 36px; }

.quick-access-card { padding: 36px; }
.quick-access-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.quick-access-card a { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; color: var(--accent-orange); font-weight: 600; }
.quick-access-card a:hover { color: var(--accent-orange-bright); transform: translateX(3px); }

.release-card { padding: 36px; background: linear-gradient(135deg, rgba(221,17,17,0.04), rgba(255,102,0,0.02)); border-color: var(--border-strong); }
.release-tag { display: inline-block; padding: 4px 12px; border-radius: var(--radius-xs); background: rgba(221,17,17,0.12); color: var(--primary-bright); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-display); border: 1px solid rgba(221,17,17,0.2); }
.release-card h3 { font-size: 1.5rem; margin-top: 16px; margin-bottom: 8px; font-family: var(--font-display); }
.release-card > p { margin-top: 12px; }
.release-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--primary-bright); font-weight: 700; }
.release-link:hover { color: #ff6666; transform: translateX(4px); text-decoration: none; }

/* ── Variants Table ────────────────────────────────────── */
.row-hover:hover { background: rgba(221,17,17,0.04); transition: background 0.2s; }

/* ── Footer ────────────────────────────────────────────── */
footer { padding: 80px 0 60px; border-top: 1px solid var(--border); background: rgba(255,255,255,0.005); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.footer-title { color: var(--heading); font-weight: 700; margin-bottom: 16px; font-family: var(--font-display); letter-spacing: 0.05em; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: var(--muted); font-size: 0.95rem; }
.footer-links a:hover { color: var(--heading); }
.footer-note { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: 0.92rem; letter-spacing: 0.5px; }

.author-section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border); }
.author-avatar { width: 100px; height: 100px; border-radius: 50%; border: 2px solid rgba(221,17,17,0.25); overflow: hidden; flex-shrink: 0; transition: transform var(--transition), box-shadow var(--transition); background: var(--panel-2); position: relative; }
.author-avatar:hover { transform: scale(1.04); box-shadow: 0 0 28px rgba(255,102,0,0.3); }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--panel-bright); color: var(--accent-orange); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.author-avatar.img-error .avatar-fallback { opacity: 1; pointer-events: auto; }

.author-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.author-name  { color: var(--heading); font-weight: 700; font-family: var(--font-display); letter-spacing: 0.02em; font-size: 1.1rem; }
.author-title { color: var(--accent-orange); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-display); }
.copyright { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: 0.85rem; letter-spacing: 0.02em; }

/* ── Scroll Utilities ──────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #dd1111, #f25c05);
  z-index: 2000;
  /* PATCH LOW-1: replaced width:0%/JS-written-width with transform:scaleX.
     Strategy: element is always 100% wide; JS sets scaleX(0..1) via
     style.transform instead of style.width. scaleX is GPU-compositable —
     no layout recalc on every scroll tick. transform-origin: left ensures
     the bar grows left-to-right. JS change: progressEl.style.transform =
     `scaleX(${_scrollY / _scrollMax})` (replaces the width% write).
     NOTE: if you prefer to keep width-based JS for simplicity, the minimum
     fix is to remove will-change:width (it's a layout prop, not GPU) and
     accept the minor paint cost. The scaleX approach eliminates it entirely. */
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform; /* transform IS GPU-compositable — correct here */
  contain: layout style;
}

.scroll-top {
  position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px;
  border-radius: var(--radius-sm); background: var(--panel-2);
  border: 1px solid var(--border-strong); display: flex; align-items: center;
  justify-content: center; cursor: pointer; opacity: 0; transition:
  background var(--transition),
  border-color var(--transition),
  transform var(--transition),
  opacity var(--transition);
  z-index: 900; font-size: 1.2rem; color: var(--primary-bright);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  /* GPU: opacity transition is compositor-only; transform for hover */
  transform: translateZ(0);
  will-change: opacity, transform;
  contain: layout style;
}
.scroll-top.visible { opacity: 1; }
.scroll-top:hover { background: var(--panel-bright); color: var(--accent-orange-bright); border-color: rgba(255,102,0,0.4); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.5); }

/* ── Reveal Animation ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 650ms cubic-bezier(0.2, 0, 0, 1), transform 650ms cubic-bezier(0.2, 0, 0, 1);
  /* GPU: promote before animation starts — browser pre-allocates layer */
  will-change: transform, opacity;
  contain: layout;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  /* Release layer hint after animation settles — frees GPU memory */
  will-change: auto;
  contain: none;
}

/* ── Page Hero (non-index pages) ───────────────────────── */
.page-hero {
  padding: clamp(80px, 10vw, 130px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
}
.page-hero .section-eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.page-hero p { color: var(--muted); font-size: 1.15rem; max-width: 560px; margin-top: 20px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .nav-inner { min-height: auto; padding: 20px 0; flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav-links { gap: 20px; }
  .hero { padding-top: 80px; }
}

/* PATCH LOW-2: isolation:isolate merged into the main nav rule above
   (line ~344). This standalone block was an orphan — kept as a comment
   to record the merge. The property is already present in the main rule. */

@media (max-width: 640px) {
  nav.menu-open {
    background: #06080b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1001 !important;
    background: #06080b !important;
    overflow-y: auto;
    /* PATCH MEDIUM-1: removed display:none/block — it was nuking the
       opacity/visibility transition declared on the base .mobile-nav rule,
       causing an instant snap instead of a fade. opacity:0 + visibility:hidden
       on the base rule already hides the element from layout and hit-testing.
       The active state below restores via opacity/visibility, preserving the
       280ms ease transition. */
  }

  .mobile-nav.active {
    display: block;   /* keep for older Safari which needs explicit display */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: 100%;
    padding: 84px 24px 40px; 
    gap: 14px;
  }

  .container {
    width: min(calc(100% - 32px), 1280px);
  }

  .nav-inner {
    min-height: 78px;
    padding: 12px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .nav-links {
    display: none;
  }

  .hamburger-btn {
    display: block;
  }

  .hero {
    padding: 120px 0 24px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
  }

  .btn {
    width: 100%;
    min-height: 48px;
  }

  h1 {
    font-size: 2.5rem !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  section {
    padding: 44px 0;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .terminal-title-bar {
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .terminal-title-text {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    flex-basis: 100%;
    margin-bottom: 4px;
  }

  .status-indicator {
    font-size: 0.65rem;
    padding: 4px 10px;
    margin: 0;
  }

  .pipeline-grid,
  .docs-grid,
  .principles,
  .quick-access-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pipeline-card,
  .doc-card,
  .principle,
  .quick-access-card,
  .release-card {
    padding: 20px !important;
    border-radius: var(--radius-sm) !important;
  }

  .terminal-body {
    font-size: 0.88rem;
    padding: 20px;
    line-height: 1.75;
  }

  .entity-box {
    padding: 14px;
    margin-top: 18px;
  }

  .scroll-top {
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
  }

  .author-avatar {
    width: 90px;
    height: 90px;
  }

  .page-hero {
    padding-top: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ORP v3.0 — Compact Integrated Telemetry Component
   ============================================================ */

.orp-compact-scope {
  display: inline-block;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
}

/* Scoped element structural reset */
.orp-compact-scope *, 
.orp-compact-scope *::before, 
.orp-compact-scope *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Framework Integrated Card Profile */
.orp-compact-scope .mini-telemetry-card {
  position: relative;
  background-color: rgba(22, 26, 34, 0.85); /* Seamlessly matches --panel-2 layout transparency */
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  padding: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  backface-visibility: hidden;       /* FF: keeps backdrop-filter on its own compositor layer */
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--shadow);
  transition: border-color var(--transition), box-shadow var(--transition);
  /* GPU: own compositing layer — backdrop-filter + box-shadow don't bleed */
  isolation: isolate;
  contain: layout style;
}

.orp-compact-scope .mini-telemetry-card:hover {
  border-color: rgba(221, 17, 17, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 16px rgba(221, 17, 17, 0.05);
}

/* Interactive Holographic CRT Simulation Texture */
.orp-compact-scope .holo-scanlines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(
    rgba(6, 8, 11, 0) 50%, 
    rgba(221, 17, 17, 0.03) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}

/* Title Block Layout */
.orp-compact-scope .mini-card-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.orp-compact-scope .header-main {
  display: flex;
  flex-direction: column;
}

.orp-compact-scope .telemetry-title {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.orp-compact-scope .telemetry-subtitle {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* Telemetry Component Active Status Indicator Pill */
.orp-compact-scope .status-pill {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--success);
  border: 1px solid rgba(63, 185, 80, 0.25);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: rgba(63, 185, 80, 0.06);
  letter-spacing: 0.04em;
  text-shadow: 0 0 4px rgba(63, 185, 80, 0.2);
}

/* Split Content Grid Architecture */
.orp-compact-scope .mini-card-layout {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

/* Anti-clipping Mobile Adapter Fallback Override */
@media (max-width: 420px) {
  .orp-compact-scope .mini-card-layout {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .orp-compact-scope .ascii-core-panel {
    align-self: center;
    transform: scale(0.95);
  }
  .orp-compact-scope .data-metrics-panel {
    width: 100%;
    max-width: 100% !important;
  }
}

/* Preserved Core Architectural ASCII Art Block */
.orp-compact-scope .ascii-core-panel {
  font-family: var(--font-mono);
  font-size: 0.72rem; 
  line-height: 1.15;
  white-space: pre;
  color: rgba(221, 17, 17, 0.4); /* Uses your brand red base */
  user-select: none;
  text-shadow: 0 0 6px rgba(221, 17, 17, 0.15);
  /* GPU: textContent rewritten by JS — contain isolates relayout to this box only */
  contain: layout style;
}

/* Metric Display Layout Block */
.orp-compact-scope .data-metrics-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  max-width: 190px;
}

.orp-compact-scope .metric-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.3;
}

.orp-compact-scope .label {
  color: var(--muted);
}

.orp-compact-scope .val {
  font-weight: 700;
  color: var(--heading);
}

.orp-compact-scope .panel-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Models / Target Node Chips */
.orp-compact-scope .nodes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.orp-compact-scope .node-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  background: var(--panel);
  color: var(--accent-orange);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
}

/* Theme Aligned Typography State Modifiers */
.orp-compact-scope .text-success { 
  color: var(--success); 
}
.orp-compact-scope .text-orange { 
  color: var(--accent-orange-bright); 
  text-shadow: 0 0 6px rgba(255, 136, 51, 0.25);
}
.orp-compact-scope .text-red { 
  color: var(--primary-bright); 
  text-shadow: 0 0 6px rgba(255, 51, 51, 0.3);
}
/* ============================================================
   RUNTIME CONSOLE — FINAL POLISH PATCH
   ============================================================ */

.rc-dashboard,
.rc-metric-card,
.rc-warden,
.rc-log,
.rc-split,
.rc-layers,
.rc-metrics,
.rc-alert-box,
.rc-section {
  background: rgba(15, 18, 23, 0.96);
  border: 1px solid rgba(221, 17, 17, 0.35);
  color: #dce2eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* .rc-warden base overrides — PATCH MEDIUM-2: merged the two conflicting
   .rc-warden declarations (lines ~1190 and ~1291). The second block was
   always winning the cascade, making the first a dead rule. Consolidated
   into one authoritative block here. The gradient background from the
   second block is kept (more visually refined). */
.rc-warden {
  border-color: #ff5555;
  background: linear-gradient(180deg, rgba(40, 10, 10, 0.9), rgba(20, 5, 5, 0.85));
}

.rc-warden h2,
.rc-warden .section-eyebrow {
  color: #ff6666;
}

/* Log & History panels */
.entropy-log,
.edtu-history,
.rc-log pre,
.rc-metrics {
  background: rgba(10, 12, 16, 0.9);
  border: 1px solid rgba(221, 17, 17, 0.2);
  color: #b0b8c8;
  font-family: var(--font-mono);
}

/* Status boxes */
.status-box {
  background: rgba(22, 26, 34, 0.95);
  border: 1px solid var(--border-strong);
  color: var(--text);
}

/* NESS Indicator */
.ness-green { color: #3fb950; }
.ness-red   { color: #ff3333; background: rgba(170, 0, 0, 0.2); }

/* Force text visibility */
.rc-dashboard h2,
.rc-dashboard h3,
.rc-warden h2,
.section-title {
  color: #f0f4f9;
}

/* Bar colors */
.rc-bar {
  background: linear-gradient(90deg, #ff6600, #dd1111);
}

/* Final visibility enforcement */
/* PATCH LOW-4 INFO: this rule forces opacity:1 on .reveal.visible and all
   rc- elements. The !important on opacity here overrides the IntersectionObserver
   reveal animation in .reveal / .reveal.visible. It exists to unstick elements
   that never enter the viewport (e.g. on the runtime console page). This is
   intentional but note that div[class*="rc-"] is an attribute selector —
   expensive on large DOMs (O(n) attribute scan per element). If the rc- panels
   are always visible without needing reveal animation, consider adding the
   .visible class to them directly in HTML and removing this rule. */
.reveal.visible,
div[class*="rc-"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   RUNTIME CONSOLE — FINAL REFINEMENT (Layer Cards + Contrast)
   ============================================================ */

.rc-layers .grid,
div[class*="rc-layers"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Layer Cards Polish */
.rc-layer-card,
div[class*="layer"] {
  background: rgba(22, 26, 34, 0.92);
  border: 1px solid rgba(221, 17, 17, 0.4);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.25s ease;
}

.rc-layer-card h3,
.rc-layer-card .layer-title {
  color: var(--heading);
  font-family: var(--font-display);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.rc-layer-card p {
  color: #b0b8c8;
  line-height: 1.65;
}

/* Status indicators in cards */
.rc-layer-card .status {
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 12px;
}

.status-active   { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.status-monitoring { background: rgba(255, 136, 51, 0.15); color: #ff8833; border: 1px solid rgba(255,136,51,0.3); }
.status-enforced { background: rgba(221, 17, 17, 0.15); color: #ff6666; border: 1px solid rgba(221,17,17,0.4); }

/* Warden Manifest refinement — PATCH MEDIUM-2: this block was a duplicate
   of the .rc-warden rule above. Its properties are now merged into the
   single canonical declaration above. Kept as a comment for diff clarity. */

.rc-warden .status-pill {
  background: #440000;
  color: #ff8888;
  border: 1px solid #ff4444;
}

/* General text boost */
.rc-dashboard,
.rc-log,
.rc-metrics,
.rc-split {
  color: #dce2eb;
}

h2, h3, .section-title {
  color: #f0f4f9;
}/* Final Layer Card Boost */
.rc-layer-card {
  background: rgba(22, 26, 34, 0.95);
  border: 1px solid rgba(221, 17, 17, 0.45);
  min-height: 260px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.rc-layer-card:hover {
  border-color: var(--accent-orange);
  box-shadow: 0 0 25px rgba(255, 102, 0, 0.2);
}

.rc-layer-name {
  color: #f0f4f9;
  font-size: 1.05rem;
}

.rc-layer-desc {
  color: #b0b8c8;
  line-height: 1.7;
}

/* ============================================================
   ORP v3.1 — Logo-mark Animation Patch
   style.css supplement — add after existing style.css rules

   DROP-IN: Append to style.css (or load as a separate
   <link rel="stylesheet"> AFTER style.css and entropia-sigil.css).

   SCOPE: All rules are scoped to .logo-mark and its children
   so they cannot bleed into the full-size .entropia-sigil sigil.

   ARCHITECTURE:
     • CSS custom properties on .logo-mark mirror the entropia-sigil
       vocabulary so the same animation keyframes work for both.
       --lm-drift-intensity : 0.0–1.0 (set by _logoSHSBridge JS)
       --lm-fracture-opacity: derived from drift (fracture shards)
       --lm-shs-glow        : current SHS glow colour (set by JS)
       --lm-glow-core       : inner glow radius (derived)
       --lm-glow-outer      : outer glow radius (derived)

     • SHS state classes apply pre-computed CSS variable sets:
         .shs-green  .shs-yellow  .shs-orange  .shs-red  .shs-black

     • Interaction classes applied by main.js LOGO-2 patch:
         .logo-mark--active   — hover state
         .logo-mark--pulse    — enter burst
         .logo-mark--clicked  — one-shot activation

   ANIMATION VOCABULARY (matching entropia-sigil.css):
     .orp-orbit-ring      — logoOrbit  5s linear infinite
     .orp-wing-l          — logoWingL  4s ease-in-out infinite alternate
     .orp-wing-r          — logoWingR  4s ease-in-out infinite alternate-reverse
     .orp-core-group      — logoBreathe 3.5s ease-in-out infinite
     .orp-glitch-layer    — logoJitter  0.12s steps(1) infinite
     .orp-fracture        — opacity driven by --lm-fracture-opacity
     .orp-scanline        — opacity driven by --lm-drift-intensity

   PERF NOTES (same constraints as entropia-sigil.css):
     • All animation durations are FIXED (no calc() on duration).
       Firefox rebuilds the animation timeline on every frame if
       duration references a CSS custom property that changes at
       runtime. Fixed durations eliminate that rebuild entirely.
     • Drift coupling is achieved via keyframe magnitude calc()s
       on transform values — these are GPU-compositable and do NOT
       trigger timeline rebuilds.
     • will-change: transform is set on animated sub-groups.
       Not set on .logo-mark itself to avoid promoting the nav's
       entire stacking context — the nav already has will-change:transform.
     • contain: layout style on each animated group isolates
       relayout to that subtree.
   ============================================================ */


/* ── CSS Custom Properties on the container ──────────────────
   JS sets --lm-drift-intensity via the SHS bridge.
   All other derived values are computed here from it.
   ────────────────────────────────────────────────────────── */
.logo-mark {
  /* PRIMARY TELEMETRY VARIABLE — written by _logoSHSBridge() */
  --lm-drift-intensity:   0;

  /* Derived glow radii (scale with drift) */
  --lm-glow-core:         calc(2px  + var(--lm-drift-intensity) * 8px);
  --lm-glow-outer:        calc(4px  + var(--lm-drift-intensity) * 14px);

  /* Fracture shards: invisible at drift=0, fully opaque at drift=1 */
  --lm-fracture-opacity:  calc(var(--lm-drift-intensity) * 0.9);

  /* SHS glow colour (overridden by shs-* classes below) */
  --lm-shs-glow:          rgba(63, 185, 80, 0.25); /* GREEN default */

  /* GPU: compositing layer for the mark.
     NOTE: not adding will-change here — the .logo container
     (nav element) already lives on a composited layer via
     nav { will-change: transform }. Adding another will-change
     here would fork a new compositor surface unnecessarily.
     The inner animated groups each carry their own will-change. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;

  /* Drop shadow driven by SHS glow variable */
  filter: drop-shadow(0 0 var(--lm-glow-core) var(--lm-shs-glow));
  transition: filter 300ms ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The injected SVG fills its container */
.logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* All SVG children: never intercept pointer events */
.logo-mark *,
.logo-mark svg * {
  pointer-events: none !important;
}


/* ── SHS STATE CLASSES ────────────────────────────────────────
   Applied by _logoSHSBridge() in main.js.
   Each class sets --lm-shs-glow and --lm-drift-intensity
   to match the current system health state.
   Matches the SHS_DRIFT_MAP in entropia-sigil.js exactly.
   ────────────────────────────────────────────────────────── */

/* GREEN — stable, idle */
.logo-mark.shs-green {
  --lm-shs-glow:        rgba(63, 185, 80, 0.25);
  --lm-drift-intensity: 0;
}

/* YELLOW — restless, mild drift */
.logo-mark.shs-yellow {
  --lm-shs-glow:        rgba(255, 200, 50, 0.28);
  --lm-drift-intensity: 0.25;
}

/* ORANGE — agitated, moderate drift */
.logo-mark.shs-orange {
  --lm-shs-glow:        rgba(255, 102, 0, 0.30);
  --lm-drift-intensity: 0.55;
}

/* RED — critical, high drift */
.logo-mark.shs-red {
  --lm-shs-glow:        rgba(221, 17, 17, 0.38);
  --lm-drift-intensity: 0.78;
}

/* BLACK / DEAD — maximum fracture */
.logo-mark.shs-black {
  --lm-shs-glow:        rgba(100, 0, 0, 0.45);
  --lm-drift-intensity: 1.0;
}


/* ── HOVER STATE: .logo-mark--active ─────────────────────────
   Applied on hover of parent .logo by main.js LOGO-2 patch.
   Boosts glow, accelerates orbit, intensifies breath.
   Mirrors the .entropia-sigil:hover overrides in entropia-sigil.css
   ────────────────────────────────────────────────────────── */
.logo-mark--active {
  filter:
    drop-shadow(0 0 calc(var(--lm-glow-core) * 1.8) var(--lm-shs-glow))
    drop-shadow(0 0 calc(var(--lm-glow-outer) * 0.5) rgba(221, 17, 17, 0.28));
  /* transition inherited from .logo-mark */
}

.logo-mark--active .orp-core-group {
  animation: logoBreatheHover 1.8s ease-in-out infinite;
}

.logo-mark--active .orp-orbit-ring {
  /* Accelerate orbit on hover — fixed 1.8s (PERF: not calc()) */
  animation-duration: 1.8s;
}

.logo-mark--active .orp-wing-l,
.logo-mark--active .orp-wing-r {
  /* Push wing shimmer to brighter end on hover */
  opacity: 0.9;
}


/* ── ENTER BURST: .logo-mark--pulse ──────────────────────────
   Brief glow burst on mouseenter. Self-removing class (see main.js).
   Single animation on the container; no child targeting.
   ────────────────────────────────────────────────────────── */
.logo-mark--pulse {
  animation: logoMarkPulse 0.4s ease-out forwards;
}

@keyframes logoMarkPulse {
  0%   { filter: drop-shadow(0 0 2px  var(--lm-shs-glow)); }
  35%  { filter: drop-shadow(0 0 12px var(--lm-shs-glow))
                 drop-shadow(0 0 6px  rgba(221, 17, 17, 0.5)); }
  100% { filter: drop-shadow(0 0 var(--lm-glow-core) var(--lm-shs-glow)); }
}


/* ── ONE-SHOT ACTIVATION: .logo-mark--clicked ────────────────
   Applied on click. Fires a hard flash-through + brief jitter,
   then animationend removes the class (see main.js LOGO-2).
   ────────────────────────────────────────────────────────── */
.logo-mark--clicked {
  animation: logoMarkClick 0.65s cubic-bezier(0.2, 0, 0.1, 1) forwards;
}

@keyframes logoMarkClick {
  0%   { filter: drop-shadow(0 0 2px  var(--lm-shs-glow));
         transform: translateZ(0) scale(1); }
  12%  { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.55))
                 drop-shadow(0 0 10px var(--lm-shs-glow));
         transform: translateZ(0) scale(1.18); }
  30%  { filter: drop-shadow(0 0 14px var(--lm-shs-glow))
                 drop-shadow(0 0 5px  rgba(221, 17, 17, 0.6));
         transform: translateZ(0) scale(0.94); }
  55%  { filter: drop-shadow(0 0 8px  var(--lm-shs-glow));
         transform: translateZ(0) scale(1.04); }
  100% { filter: drop-shadow(0 0 var(--lm-glow-core) var(--lm-shs-glow));
         transform: translateZ(0) scale(1); }
}


/* ═══════════════════════════════════════════════════════════════
   ANIMATED PART RULES
   All selectors scoped to .logo-mark to prevent leaking to
   .entropia-sigil (which uses .es-* class names, not .orp-*).
   ═══════════════════════════════════════════════════════════════ */


/* ── Orbit ring rotation ──────────────────────────────────────
   Fixed 5s duration — no calc() on duration (Firefox perf, PERF-2).
   Accelerated to 1.8s on hover via .logo-mark--active above.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-orbit-ring {
  transform-origin: center;
  transform-box:    fill-box;
  animation:        logoOrbit 5s linear infinite;
  will-change:      transform;
  contain:          layout style;
}

@keyframes logoOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ── Wing shimmer — left ──────────────────────────────────────
   Fixed 4s duration (PERF-1). Alternates in opposite phase to
   the right wing for the bilateral shimmer effect.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-wing-l {
  transform-origin: center;
  transform-box:    fill-box;
  animation:        logoWingShimmer 4s ease-in-out infinite alternate;
  will-change:      opacity, transform;
  contain:          layout style;
}

/* ── Wing shimmer — right ────────────────────────────────────
   Identical timing, reversed direction.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-wing-r {
  transform-origin: center;
  transform-box:    fill-box;
  animation:        logoWingShimmer 4s ease-in-out infinite alternate-reverse;
  will-change:      opacity, transform;
  contain:          layout style;
}

@keyframes logoWingShimmer {
  from { opacity: 0.45; transform: scaleY(1); }
  to   { opacity: 0.80; transform: scaleY(1.04); }
}

.orb-pulse, .scanline {
  will-change: transform, opacity;
}
/* ── Core group: breathe + micro-rotate ──────────────────────
   Fixed 3.5s (PERF-1). Hover override applied in --active block.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-core-group {
  transform-origin: center;
  transform-box:    fill-box;
  animation:        logoBreathe 3.5s ease-in-out infinite;
  will-change:      transform;
  contain:          layout style;
}

@keyframes logoBreathe {
  0%   { transform: scale(1)     rotate(0deg); }
  30%  { transform: scale(1.015) rotate(0.5deg); }
  65%  { transform: scale(0.990) rotate(-0.4deg); }
  100% { transform: scale(1)     rotate(0deg); }
}

@keyframes logoBreatheHover {
  0%   { transform: scale(1.02)  rotate(0deg); }
  40%  { transform: scale(1.055) rotate(1.4deg); }
  70%  { transform: scale(1.01)  rotate(-1.0deg); }
  100% { transform: scale(1.02)  rotate(0deg); }
}


/* ── Glitch / jitter displacement ────────────────────────────
   PERF-3 pattern: fixed 0.12s duration, drift coupling lives
   inside keyframe transform calc()s — same technique as
   entropia-sigil.css to avoid Firefox timeline rebuilds.
   Opacity: zero at drift=0, ramps up with drift.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-glitch-layer {
  transform-box: fill-box;
  animation:     logoJitter 0.12s steps(1) infinite;
  opacity:       calc(var(--lm-drift-intensity) * 0.80);
  will-change:   transform, opacity;
  contain:       layout style;
}

@keyframes logoJitter {
  0%   { transform: translate(0, 0)  skewX(0deg); }
  15%  { transform: translate(
           calc(-2px * var(--lm-drift-intensity)),
           calc( 2px * var(--lm-drift-intensity)))
           skewX(calc(-0.7deg * var(--lm-drift-intensity))); }
  30%  { transform: translate(
           calc( 2px * var(--lm-drift-intensity)),
           calc(-2px * var(--lm-drift-intensity)))
           skewX(calc( 0.5deg * var(--lm-drift-intensity))); }
  45%  { transform: translate(0,
           calc(1px * var(--lm-drift-intensity)))
           skewX(0deg); }
  60%  { transform: translate(
           calc(-1.5px * var(--lm-drift-intensity)), 0)
           skewX(calc(0.6deg * var(--lm-drift-intensity))); }
  80%  { transform: translate(
           calc( 2px * var(--lm-drift-intensity)), 0)
           skewX(0deg); }
  100% { transform: translate(0, 0)  skewX(0deg); }
}


/* ── Fracture shards — drift-gated ───────────────────────────
   Invisible at drift=0, opaque at drift=1 (same as .es-fracture).
   Transition smooths the appear/disappear.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-fracture {
  opacity:    var(--lm-fracture-opacity);
  transition: opacity 400ms ease;
}


/* ── Scanlines — mix-blend-mode screen ───────────────────────
   Becomes visible above drift ~0.4 (same threshold as
   .es-scanline in entropia-sigil.css).
   mix-blend-mode cost is bounded by the isolation:isolate on
   .logo-mark — blend stacking context is isolated to the mark.
   ────────────────────────────────────────────────────────── */
.logo-mark .orp-scanline {
  opacity:        calc((var(--lm-drift-intensity) - 0.4) * 1.5);
  transition:     opacity 300ms ease;
  mix-blend-mode: screen;
  contain:        layout style;
}


/* ── Reduced-motion override ─────────────────────────────────
   Respects user OS preference. Kills all logo animations;
   preserves static visual (glow still shows current SHS state).
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .logo-mark .orp-orbit-ring,
  .logo-mark .orp-core-group,
  .logo-mark .orp-wing-l,
  .logo-mark .orp-wing-r,
  .logo-mark .orp-glitch-layer,
  .logo-mark--pulse,
  .logo-mark--clicked {
    animation:   none;
    will-change: auto;
    transition:  none;
  }
}





/* ============================================================
   ORP v3.0 — Firefox Performance Patch
   Appended after all existing rules so the cascade always wins.

   VERIFIED ISSUES (confirmed in source before patching):
     FF-1  backdrop-filter blur on nav + .mini-telemetry-card
           Firefox compositor is measurably slower than Chromium
           for blur passes, especially during scroll. Removing it
           in Firefox and bumping background opacity preserves the
           visual intent (frosted panel) at near-zero GPU cost.

     FF-2  filter: drop-shadow on .logo-mark base + hover state
           (.logo-mark--active). Firefox is slower at compositing
           animated filter chains. The idle SHS glow and hover glow
           are replaced with a pseudo-element radial gradient that
           animates only opacity + transform — both compositor-only.
           NOTE: .logo-mark--pulse and .logo-mark--clicked are
           intentional brief one-shot bursts; their filter keyframes
           are retained because they run for ≤0.65s and stopping
           them would break the design intent.

     FF-3  mix-blend-mode: screen on .logo-mark .orp-scanline
           Already bounded by isolation:isolate on .logo-mark, so
           it does not bleed — but Firefox still pays the blend cost.
           Only visible above drift ~0.4 anyway; fallback to opacity
           only is visually indistinguishable at that subtlety.

     FF-4  Permanent will-change on static/infrequently animated
           elements. .grid-bg and .glow never animate; keeping them
           as promoted compositor layers wastes GPU memory and adds
           layer management overhead. .scroll-top only animates when
           the user hovers; permanent promotion is unnecessary.

     FF-5  .orp-glitch-layer: animation always running even at
           drift=0. Already invisible (opacity calc() → 0) but
           Firefox still schedules the 0.12s steps() ticker every
           frame. Pausing via animation-play-state when drift is
           zero costs nothing visually and reduces compositor work.

     FF-6  text-rendering: geometricPrecision on headings.
           Firefox may regress performance on large animated pages
           with this hint. Switched to optimizeLegibility (retains
           kerning/ligature quality without the extra rasterisation
           pass geometricPrecision implies in some FF builds).
   ============================================================ */


/* ── FF-1: Disable backdrop-filter in Firefox ────────────────
   @-moz-document url-prefix() matches Firefox only.
   Background opacity raised to compensate for loss of blur.
   nav.menu-open already sets backdrop-filter:none — unchanged.
   ────────────────────────────────────────────────────────── */
@-moz-document url-prefix() {

  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Raise opacity so the panel reads as solid without the blur */
    background: rgba(6, 8, 11, 0.97) !important;
  }

  .orp-compact-scope .mini-telemetry-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Match the card's existing background-color at full opacity */
    background-color: rgba(22, 26, 34, 0.97) !important;
  }


  /* ── FF-2: Replace animated drop-shadow on logo with pseudo-element glow
     The base idle glow and hover glow are replaced with a pseudo-element
     that animates only opacity and transform — both GPU-compositable.
     .logo-mark::before already exists on Chromium as the outer diamond
     shape (clip-path polygon) — those properties are reset here inside
     the Firefox-only block so this glow replaces them safely in FF.
     .logo-mark--pulse and .logo-mark--clicked keyframes are intentional
     burst effects and are left untouched.
     ──────────────────────────────────────────────────────────────────── */

  /* Remove the CSS filter from the base idle state */
  .logo-mark {
    filter: none !important;
    /* Remove the filter transition — nothing to transition anymore */
    transition: none !important;
  }

  /* Pseudo-element glow: replaces diamond shape in Firefox only.
     Sits behind the SVG via z-index:-1 inside the isolation:isolate context. */
  .logo-mark::before {
    /* Reset the Chromium diamond-shape geometry */
    clip-path: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    /* Glow geometry */
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      var(--lm-shs-glow, rgba(63, 185, 80, 0.25)) 0%,
      transparent 70%
    ) !important;
    opacity: 0.75;
    z-index: -1;
    transform: scale(1);
    /* Animating only compositor-safe properties */
    transition: opacity 300ms ease, transform 300ms ease !important;
  }

  /* Hover: boost glow via opacity + scale instead of filter */
  .logo-mark--active::before {
    opacity: 1;
    transform: scale(1.25);
  }

  /* Remove the filter override on the hover state */
  .logo-mark--active {
    filter: none !important;
  }


  /* ── FF-3: Disable mix-blend-mode on scanlines ───────────────
     Scanlines are only visible above drift ~0.4; at that subtlety
     reverting to normal blend + halved opacity is visually equivalent.
     ────────────────────────────────────────────────────────── */
  .logo-mark .orp-scanline {
    mix-blend-mode: normal !important;
    opacity: calc((var(--lm-drift-intensity) - 0.4) * 0.75) !important;
  }


  /* ── FF-4: Release will-change on static / infrequent elements ─
     .grid-bg and .glow never animate — promoted layers waste VRAM.
     .scroll-top only animates on hover — permanent promotion is
     unnecessary; the browser will promote on demand automatically.
     Elements with active per-frame animations retain will-change.
     ────────────────────────────────────────────────────────── */
  .grid-bg {
    will-change: auto;
  }

  .glow {
    will-change: auto;
  }

  .scroll-top {
    will-change: auto;
  }


  /* ── FF-5: Pause glitch layer when drift is zero ─────────────
     At shs-green (--lm-drift-intensity: 0) the layer is already
     invisible via opacity:calc(0 * 0.80) = 0, but the 0.12s
     steps() animation still runs every frame. Pause it.
     Explicitly resume for all non-zero drift states.
     ────────────────────────────────────────────────────────── */
  .logo-mark.shs-green .orp-glitch-layer {
    animation-play-state: paused !important;
  }

  .logo-mark.shs-yellow .orp-glitch-layer,
  .logo-mark.shs-orange .orp-glitch-layer,
  .logo-mark.shs-red    .orp-glitch-layer,
  .logo-mark.shs-black  .orp-glitch-layer {
    animation-play-state: running !important;
  }


  /* ── FF-6: Switch text-rendering on headings ─────────────────
     geometricPrecision can cause extra rasterisation passes in
     Firefox on pages with many animated elements. optimizeLegibility
     retains kerning and ligature quality at lower cost in FF.
     ────────────────────────────────────────────────────────── */
  h1,
  h2,
  h3,
  .section-title,
  .logo,
  .btn,
  .badge {
    text-rendering: optimizeLegibility !important;
  }

} /* end @-moz-document url-prefix() */