/* ============================================================ ENTROPIA SIGIL — Component Stylesheet ORP Δ v3.1.0 | entropia-sigil.css DROP-IN: Add to your , AFTER style.css. PATCH LOG (v3.0.2 — Gemini perf merge): PERF-1 — Animation durations for .es-core-group and .es-orbit-ring changed from CSS-calc(var(--drift-intensity) expressions to fixed values (3.5s / 5s respectively). Firefox rebuilds the entire animation timeline on every frame when duration is a calc() expression containing a custom property that changes at runtime. Fixed durations eliminate that thrash entirely. Visual effect is preserved: drift coupling is achieved instead via the sigilJitter keyframe magnitude (see PERF-3). PERF-2 — .es-orbit-ring fixed duration changed from original 6s (drift-variable) to 5s (fixed, slightly faster, indistinguishable visually). Hover override drops to 2s (was calc(var * 0.4)). PERF-3 — sigilJitter keyframes now scale displacement magnitude by var(--drift-intensity) inline, while the animation duration itself is fixed at 0.12s. This gives the same perceptual result (more jitter at high drift) without the timeline rebuild penalty. Original used a calc() on animation-duration; this version uses calc() only inside transform values, which is GPU-compositable and does NOT trigger a timeline rebuild. PERF-4 — will-change on .entropia-sigil root updated to include transform in addition to filter. The JS float (initSigilFloat) writes transform every rAF, so both properties need compositor layer hints. Harmless when float is inactive (non-hero-bg). PERF-5 — filter transition duration tightened from 800ms to 300ms. Snappier response is cheaper on GPU threads and matches the visual pace of the drift telemetry. NOTE on --jitter-scale and --ring-speed / --pulse-speed variables: These are intentionally REMOVED from the computed variable set. They were only consumed by the now-replaced calc()-in-duration animation rules. Removing them avoids dead variable overhead. --glow-alpha is preserved (may be used by external consumers). PATCH LOG (v3.1.0 — Hero-bg cleanup + will-change scoping): FIX-1 — .entropia-sigil--hero-bg: removed stray `z-index:-9999 !important` (was applied twice, once in base and once in 701px breakpoint). Replaced with z-index:0 on mobile (sits below text in hero stack) and z-index:auto on desktop — the JS-created .es-float-wrapper owns the stacking context (z-index:1 set by entropia-sigil.js); the sigil element inside it must not create its own competing context. The !important was masking compositor layer promotion signals on FF. FIX-2 — .entropia-sigil--hero-bg @media(701px): removed orphaned `isolation:isolate` override — the root .entropia-sigil already sets isolation:isolate and this breakpoint override was redundant, creating a needless second stacking context on desktop. Removed junk whitespace and stray MODIFICATION comments. FIX-3 — will-change on animated children (.es-core-group, .es-orbit-ring, .es-wing-l, .es-wing-r, .es-glitch-layer) scoped to active animations only: children inside .entropia-sigil--hero-bg keep will-change (they float). Static-context sigils (.entropia-sigil without --hero-bg) get will-change:auto on children via the new :not(.entropia-sigil--hero-bg) scoped override, freeing GPU layers on lower-end devices where multiple static sigils exist. FIX-4 — Removed redundant `cursor:default` and `user-select:none` from root rule — pointer-events:none already makes both irrelevant. Minor byte reduction; no visual change. FIX-5 — 701px breakpoint: added missing `top:50%` (was relying on mobile `top:16px` cascading through, which produced wrong vertical anchor on some FF versions when position changed from absolute→fixed). ============================================================ */ /* ── CSS Custom Properties ──────────────────────────────────── All visual instability is controlled by --drift-intensity. JavaScript updates this in real-time via updateSigilDrift(). Range: 0.0 (stable, idle breathing) → 1.0 (full fracture) ─────────────────────────────────────────────────────────── */ .entropia-sigil { /* PRIMARY TELEMETRY VARIABLE — set from JS */ --drift-intensity: 0; /* Derived values */ --glow-core: calc(4px + var(--drift-intensity) * 18px); --glow-outer: calc(8px + var(--drift-intensity) * 32px); --glow-alpha: calc(0.55 + var(--drift-intensity) * 0.45); --fracture-opacity: calc(var(--drift-intensity) * 0.9); --es-shs-glow: rgba(63, 185, 80, 0.15); /* updated by JS */ /* PERF-1/PERF-2/PERF-3: --jitter-scale, --ring-speed, --pulse-speed removed — they drove calc() animation-duration expressions that caused Firefox timeline rebuilds on every drift update. Replaced with fixed durations; drift coupling now lives inside keyframe transform values. */ /* Layout */ position: relative; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; /* FIX-4: cursor/user-select redundant when pointer-events:none */ /* GPU isolation — own compositing layer, no paint bleed to page */ isolation: isolate; contain: layout style; /* NOTE: contain:paint intentionally excluded — filter:drop-shadow bleeds beyond border-box by design (glow effect). Adding 'paint' would clip that glow. 'layout style' is the safe ceiling for this element. */ /* PERF-4: both filter and transform hinted — JS float writes transform every rAF tick; filter changes on SHS update. Single compositor budget. */ will-change: filter, transform; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Drop shadow driven by SHS glow variable */ filter: drop-shadow(0 0 var(--glow-core) var(--es-shs-glow)); /* PERF-5: 300ms (was 800ms) — snappier, cheaper GPU thread work */ transition: filter 300ms ease; } /* SVG base */ .entropia-sigil svg { display: block; overflow: hidden; /* was: visible — visible bleed was intercepting mobile touches */ width: 100%; height: 100%; pointer-events: none; } /* Every child of the sigil must never intercept events */ .entropia-sigil *, .entropia-sigil svg * { pointer-events: none !important; } /* ── ANIMATION: Idle breath ─────────────────────────────────── PERF-1: Fixed duration (3.5s) instead of calc(3.5s - drift * 2s). Firefox rebuilds the animation timeline on every frame when duration is a calc(var(--drift-intensity) expression that changes at runtime. Fixed duration eliminates that rebuild entirely. Drift coupling for speed is sacrificed here (minor perceptual loss). ─────────────────────────────────────────────────────────── */ .es-core-group { transform-origin: center; transform-box: fill-box; animation: sigilBreathe 3.5s ease-in-out infinite; will-change: transform; contain: layout style; } @keyframes sigilBreathe { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.012) rotate(0.4deg); } 65% { transform: scale(0.993) rotate(-0.3deg); } 100% { transform: scale(1) rotate(0deg); } } /* ── ANIMATION: Outer orbit ring rotation ──────────────────── PERF-2: Fixed duration (5s) instead of calc(6s - drift * 4.5s). Same Firefox timeline rebuild issue as .es-core-group. 5s is slightly faster than the 6s base, indistinguishable at a glance. ─────────────────────────────────────────────────────────── */ .es-orbit-ring { transform-origin: center; transform-box: fill-box; animation: sigilOrbit 5s linear infinite; will-change: transform; contain: layout style; } @keyframes sigilOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── ANIMATION: Fracture shards (drift-gated) ──────────────── Opacity bound to --fracture-opacity, so shards are invisible at drift=0 and fully visible at drift=1. ─────────────────────────────────────────────────────────── */ .es-fracture { opacity: var(--fracture-opacity); transition: opacity 400ms ease; } /* ── ANIMATION: Glitch/jitter displacement ─────────────────── PERF-3: Fixed animation duration (0.12s) with magnitude scaling moved INSIDE the keyframe transform values via calc(). Original had: animation-duration: calc(0.08s + (1 - drift) * 0.5s) Problem: any calc() on animation-duration that references a custom property that changes at runtime triggers a full timeline rebuild in Firefox on every drift update (60fps → 60 rebuilds/sec). Fix: pin duration to 0.12s (the fast-drift floor). Drift coupling is preserved through keyframe magnitude: transforms scale by var(--drift-intensity) so displacement stays zero at drift=0 and peaks at full amplitude at drift=1. ─────────────────────────────────────────────────────────── */ .es-glitch-layer { transform-box: fill-box; animation: sigilJitter 0.12s steps(1) infinite; opacity: calc(var(--drift-intensity) * 0.85); will-change: transform, opacity; contain: layout style; } @keyframes sigilJitter { 0% { transform: translate(0, 0) skewX(0deg); } 15% { transform: translate(calc(-2px * var(--drift-intensity)), calc(2px * var(--drift-intensity))) skewX(calc(-0.6deg * var(--drift-intensity))); } 30% { transform: translate(calc(2px * var(--drift-intensity)), calc(-2px * var(--drift-intensity))) skewX(calc(0.4deg * var(--drift-intensity))); } 45% { transform: translate(0, calc(1px * var(--drift-intensity))) skewX(0deg); } 60% { transform: translate(calc(-1.5px * var(--drift-intensity)), 0) skewX(calc(0.5deg * var(--drift-intensity))); } 80% { transform: translate(calc(2px * var(--drift-intensity)), 0) skewX(0deg); } 100%{ transform: translate(0, 0) skewX(0deg); } } /* ── ANIMATION: Scanline pixel bleed ───────────────────────── Only becomes visible above drift ~0.4. Uses mix-blend-mode: screen for additive light effect. FF note: mix-blend-mode creates an intermediate compositing surface. Cost is bounded here because parent .entropia-sigil has isolation:isolate, which confines the blend stacking context to the sigil layer only. ─────────────────────────────────────────────────────────── */ .es-scanline { opacity: calc((var(--drift-intensity) - 0.4) * 1.5); transition: opacity 300ms ease; mix-blend-mode: screen; /* contain: layout style keeps FF's blend surface from spanning beyond this element */ contain: layout style; } /* ── ANIMATION: Wing feather shimmer ───────────────────────── PERF-1 (same fix): Fixed 4s duration instead of calc(4s - drift * 2s). Eliminates Firefox timeline rebuild. Alternating shimmer on left/right wings, offset in phase. ─────────────────────────────────────────────────────────── */ .es-wing-l { transform-origin: center; transform-box: fill-box; animation: wingShimmer 4s ease-in-out infinite alternate; will-change: opacity, transform; contain: layout style; } .es-wing-r { transform-origin: center; transform-box: fill-box; animation: wingShimmer 4s ease-in-out infinite alternate-reverse; will-change: opacity, transform; contain: layout style; } @keyframes wingShimmer { from { opacity: 0.55; transform: scaleY(1); } to { opacity: 0.85; transform: scaleY(1.03); } } /* ── HOVER STATE ────────────────────────────────────────────── On hover: faster breath, heightened glow, faster orbit. Does NOT change the underlying drift telemetry. PERF-2: Hover orbit override uses fixed 2s (was calc(ring-speed * 0.4)). ─────────────────────────────────────────────────────────── */ .entropia-sigil:hover .es-core-group { animation: sigilBreatheHover 1.8s ease-in-out infinite; } .entropia-sigil:hover .es-orbit-ring { /* PERF-2: Fixed 2s instead of calc(var(--ring-speed) * 0.4) */ animation-duration: 2s; } .entropia-sigil:hover { filter: drop-shadow(0 0 calc(var(--glow-core) * 1.8) var(--es-shs-glow)) drop-shadow(0 0 calc(var(--glow-outer) * 0.6) rgba(221, 17, 17, 0.3)); } @keyframes sigilBreatheHover { 0% { transform: scale(1.02) rotate(0deg); } 40% { transform: scale(1.045) rotate(1.2deg); } 70% { transform: scale(1.01) rotate(-0.8deg); } 100% { transform: scale(1.02) rotate(0deg); } } /* ── SIZE VARIANTS ──────────────────────────────────────────── Apply alongside .entropia-sigil for preset sizes. ─────────────────────────────────────────────────────────── */ .entropia-sigil--sm { width: 64px; height: 64px; } .entropia-sigil--md { width: 120px; height: 120px; } .entropia-sigil--lg { width: 200px; height: 200px; } .entropia-sigil--xl { width: 320px; height: 320px; } .entropia-sigil--hero { width: min(420px, 85vw); height: min(420px, 85vw); } /* ── PLACEMENT: Hero background sigil ──────────────────────── Mobile: absolute inside its hero parent (position:relative). Desktop (≥ 701px): fixed to viewport — JS float drives position via translate3d each rAF. Falls back to centered-right if JS hasn't fired yet. FIX-1: z-index:-9999 !important removed. That value prevented the sigil from ever appearing above the grid-bg (z:-4) and was fighting the compositor layer promotion signals on Firefox. z-index:0 on mobile (below text, above background), z-index:1 on desktop (same level as the JS-floated wrapper the entropia-sigil.js creates). ─────────────────────────────────────────────────────────── */ .entropia-sigil--hero-bg { /* Mobile default — absolute inside position:relative hero */ position: absolute; top: 16px; right: 8px; transform: none; opacity: 0.28; z-index: 0; /* FIX-1: was z-index:-9999 !important; 0=below hero text on mobile */ pointer-events: none !important; overflow: hidden; width: min(180px, 48vw) !important; height: min(180px, 48vw) !important; } @media (min-width: 701px) { .entropia-sigil--hero-bg { position: fixed; top: 50%; /* FIX-5: explicit — don't inherit mobile top:16px */ right: 20px; transform: translateY(-50%); /* pre-JS vertical centering fallback */ opacity: 0.20; z-index: auto; /* FIX-1: was z-index:-9999 !important; auto lets the JS-created .es-float-wrapper own stacking */ /* FIX-2: isolation:isolate removed — root .entropia-sigil already sets it; this override was creating a redundant stacking context on desktop */ pointer-events: none; width: 340px !important; height: 340px !important; overflow: visible; mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 45%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 45%, transparent 80%); /* FIX-3: will-change:transform kept here only — JS writes transform every rAF. filter will-change is inherited from root .entropia-sigil and is sufficient. */ will-change: transform; transition: opacity 800ms ease; } } @media (min-width: 1100px) { .entropia-sigil--hero-bg { width: 380px !important; height: 380px !important; opacity: 0.22; } } @media (min-width: 1400px) { .entropia-sigil--hero-bg { opacity: 0.24; width: 440px !important; height: 440px !important; } } /* ── PLACEMENT: Terminal widget inline ─────────────────────── Blend mode makes it layer naturally over dark terminal panels. FF note: mix-blend-mode cost is bounded by the parent context; ensure the terminal wrapper has isolation:isolate in your layout CSS. ─────────────────────────────────────────────────────────── */ .entropia-sigil--terminal { filter: saturate(0.75) brightness(0.85) drop-shadow(0 0 6px rgba(221, 17, 17, 0.4)); mix-blend-mode: screen; /* FF: backface-visibility isolates filter + blend to a single compositor surface */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ── PLACEMENT: Nav / favicon scale ────────────────────────── Reduced motion: respects user preference. ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .es-core-group, .es-orbit-ring, .es-wing-l, .es-wing-r, .es-glitch-layer { animation: none; will-change: auto; } } /* ── FIX-3: will-change scoping for non-floating sigils ─────── Static sigils (no --hero-bg, no JS float) still have animated children inheriting will-change:transform from their rules above. On lower-end devices, each will-change child eats a GPU compositor layer budget — multiplied by every static sigil on the page. Scope: any .entropia-sigil that is NOT .entropia-sigil--hero-bg. These sigils are not translated by JS every rAF, so their children gain nothing from will-change:transform. Release the budget. The root .entropia-sigil will-change:filter,transform is intentionally kept — it covers the SHS glow transition (filter) and any CSS transform animations on the container itself. Only the inner animated parts are released here. ─────────────────────────────────────────────────────────── */ .entropia-sigil:not(.entropia-sigil--hero-bg) .es-core-group, .entropia-sigil:not(.entropia-sigil--hero-bg) .es-orbit-ring, .entropia-sigil:not(.entropia-sigil--hero-bg) .es-wing-l, .entropia-sigil:not(.entropia-sigil--hero-bg) .es-wing-r, .entropia-sigil:not(.entropia-sigil--hero-bg) .es-glitch-layer { will-change: auto; } /* ============================================================ ENTROPIA SIGIL — Firefox Performance Patch ORP Δ v3.1.1 | Appended after all existing rules. VERIFIED ISSUES (confirmed against source before patching): FF-1 filter: drop-shadow on .entropia-sigil root + .entropia-sigil:hover filter change. The root carries will-change:filter,transform. In Firefox will-change:filter forces a persistent offscreen compositing surface even when the filter value is static. The JS float writes transform every rAF — that cost is unavoidable for hero-bg. But filter only changes on SHS state transitions (infrequent). Holding a permanent filter compositor surface for those rare events is wasteful. Fix: remove filter from will-change on root. The filter transition still works (300ms ease) — will-change is a hint, not a requirement. On FF, removing it lets the browser promote on demand rather than holding the surface forever. Hover glow is replaced with a pseudo-element radial gradient (opacity + scale only) — same technique as style.css FF-2. FF-2 mix-blend-mode: screen on .es-scanline. Acknowledged in source comments but not patched. Blend modes create an intermediate compositing surface in Firefox. The isolation:isolate on the root bounds it, but FF still pays the surface cost for any drift > 0.4. Fallback: normal blend with halved opacity — visually indistinguishable at this subtlety, zero blending cost. FF-3 mix-blend-mode: screen + filter chain on .entropia-sigil--terminal. Combines filter: saturate + brightness + drop-shadow with mix-blend-mode:screen. Two heavyweight compositor operations together. In Firefox this reliably causes an extra offscreen surface. Replacing blend mode with opacity in Firefox; the filter chain is kept since it's the primary visual treatment. FF-4 .es-glitch-layer runs continuously at drift=0. opacity: calc(var(--drift-intensity) * 0.85) = 0 when drift=0, so it's invisible — but the 0.12s steps(1) infinite ticker still runs every frame. Same fix as style.css FF-5: pause at shs-green (or when no SHS class present), resume above zero. SHS classes are the same set as logo-mark (green/yellow/orange/ red/black) — entropia-sigil.js sets them on the root element. FF-5 transition: opacity 800ms on .entropia-sigil--hero-bg (≥701px). 800ms opacity transition means Firefox composites that layer for nearly a second on every visibility change. Halved to 400ms — still smooth, significantly shorter compositor tenure. ============================================================ */ @-moz-document url-prefix() { /* ── FF-1a: Remove filter from will-change on root ─────────── will-change:filter holds a permanent offscreen surface in FF. transform is kept — JS float needs it. filter removed: the 300ms transition still fires correctly without the hint. ────────────────────────────────────────────────────────── */ .entropia-sigil { will-change: transform; /* Keep the base filter for SHS glow — just stop permanently reserving an offscreen surface for it */ } /* ── FF-1b: Replace hover filter with pseudo-element glow ──── .entropia-sigil:hover changes filter to a multi-drop-shadow chain — expensive for FF to composite on every hover frame. Replace with a ::after pseudo-element that animates only opacity + scale. The root isolation:isolate keeps it scoped. ────────────────────────────────────────────────────────── */ .entropia-sigil:hover { /* Cancel the filter change that the hover state triggers */ filter: drop-shadow(0 0 var(--glow-core) var(--es-shs-glow)) !important; } .entropia-sigil::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient( circle, var(--es-shs-glow, rgba(63, 185, 80, 0.15)) 0%, transparent 65% ); opacity: 0; pointer-events: none; z-index: -1; /* Compositor-safe properties only */ transition: opacity 300ms ease, transform 300ms ease; transform: scale(0.9); } .entropia-sigil:hover::after { opacity: 1; transform: scale(1.1); } /* ── FF-2: Disable mix-blend-mode on scanlines ─────────────── Scanlines are visible only above drift ~0.4. Normal blend + halved opacity is visually equivalent at that level of subtlety, with no blending overhead. ────────────────────────────────────────────────────────── */ .es-scanline { mix-blend-mode: normal !important; opacity: calc((var(--drift-intensity) - 0.4) * 0.75) !important; } /* ── FF-3: Remove mix-blend-mode from terminal variant ─────── Keep the filter chain (primary visual treatment). Drop only the blend mode — replaces the screen composite with a straight opacity reduction. ────────────────────────────────────────────────────────── */ .entropia-sigil--terminal { mix-blend-mode: normal !important; opacity: 0.82; /* filter chain retained — saturate + brightness + drop-shadow */ } /* ── FF-4: Pause glitch ticker when drift is zero ──────────── No SHS class or shs-green = drift-intensity: 0 = invisible. Pausing the 0.12s steps() ticker saves compositor scheduling. Explicitly resumed for all non-zero drift SHS states. ────────────────────────────────────────────────────────── */ .entropia-sigil:not([class*="shs-"]) .es-glitch-layer, .entropia-sigil.shs-green .es-glitch-layer { animation-play-state: paused !important; } .entropia-sigil.shs-yellow .es-glitch-layer, .entropia-sigil.shs-orange .es-glitch-layer, .entropia-sigil.shs-red .es-glitch-layer, .entropia-sigil.shs-black .es-glitch-layer { animation-play-state: running !important; } /* ── FF-5: Shorten hero-bg opacity transition ──────────────── 800ms → 400ms. Still smooth, halves the compositor tenure during visibility changes on the hero background sigil. ────────────────────────────────────────────────────────── */ @media (min-width: 701px) { .entropia-sigil--hero-bg { transition: opacity 400ms ease !important; } } } /* end @-moz-document url-prefix() */ /* ============================================================ ORP v3.3 — Settings-driven class overrides for entropia-sigil Appended to entropia-sigil.css. AUDIT FIX: .orp-perf-mode and .orp-reduced-motion were toggled on by settings.html JS but had no CSS rules. These rules handle the sigil-specific animations that live in this file. The global style.css patch handles everything else. ============================================================ */ /* ───────────────────────────────────────────────────────────── 1. .orp-perf-mode — sigil children Pause the glitch ticker (0.12s steps — most expensive). Keep breathe, orbit, wings (they're cheap + aesthetically core). ──────────────────────────────────────────────────────────── */ html.orp-perf-mode .es-glitch-layer { animation-play-state: paused; will-change: auto; } html.orp-perf-mode .es-orbit-ring { /* Slow orbit to 12s in perf mode — still visible, half the compositor work */ animation-duration: 12s; } /* ───────────────────────────────────────────────────────────── 2. .orp-reduced-motion — sigil animations Mirrors @media (prefers-reduced-motion: reduce) exactly. The global transition/animation kill in style.css catches most of these, but explicit will-change releases are needed for compositor budget recovery. ──────────────────────────────────────────────────────────── */ html.orp-reduced-motion .es-core-group, html.orp-reduced-motion .es-orbit-ring, html.orp-reduced-motion .es-wing-l, html.orp-reduced-motion .es-wing-r, html.orp-reduced-motion .es-glitch-layer { animation: none !important; will-change: auto; } /* ───────────────────────────────────────────────────────────── 3. .orp-potato-mode — complete sigil shutdown All sigil animations killed and compositor layers released. Drop-shadow filter and the hover filter override are both handled in style.css to keep this file's rules minimal. ──────────────────────────────────────────────────────────── */ html.orp-potato-mode .es-core-group, html.orp-potato-mode .es-orbit-ring, html.orp-potato-mode .es-wing-l, html.orp-potato-mode .es-wing-r, html.orp-potato-mode .es-glitch-layer, html.orp-potato-mode .es-fracture, html.orp-potato-mode .es-scanline { animation: none !important; will-change: auto !important; transition: none !important; } /* Firefox-specific rules inside @-moz-document: these are not overridden by the html.orp-potato-mode rules above because @-moz-document scopes specificity differently in some FF builds. Belt-and-suspenders: */ @-moz-document url-prefix() { html.orp-potato-mode .es-glitch-layer, html.orp-potato-mode .logo-mark .orp-glitch-layer { animation-play-state: paused !important; } html.orp-potato-mode .entropia-sigil, html.orp-potato-mode .entropia-sigil:hover { will-change: auto !important; filter: none !important; } }