/* INSTRUMENTALITY LAYER v2 — drop-in overlay (psychedelic + digital surrealism) * Pairs with instrumentality.js. Drop both in frontend/public/ then add to * frontend/public/index.html : * * */ /* ============================================================ ROOT — fragments overlay ============================================================ */ #instrumentality-root { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; contain: strict; } #instrumentality-root .inst-layer { position: absolute; inset: 0; pointer-events: none; will-change: opacity, transform, filter; } #instrumentality-root .inst-bg { mix-blend-mode: screen; opacity: 0.55; } #instrumentality-root .inst-mid { mix-blend-mode: screen; opacity: 0.85; } #instrumentality-root .inst-fx { mix-blend-mode: screen; opacity: 0; filter: url(#inst-displace); } /* Surreal warp layer — slow melting turbulence over everything */ #instrumentality-root .inst-warp { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0; background: radial-gradient(ellipse at 30% 20%, hsl(280 100% 50% / 0.30), transparent 55%), radial-gradient(ellipse at 75% 70%, hsl(160 100% 45% / 0.25), transparent 55%), radial-gradient(ellipse at 50% 50%, hsl(0 100% 55% / 0.20), transparent 60%); filter: url(#inst-melt) blur(2px); animation: inst-warp-drift 28s linear infinite; transition: opacity 2.2s ease; } /* Aura / chromatic bleed shell — sits above warp, below fragments */ #instrumentality-root .inst-aura { position: absolute; inset: -10%; pointer-events: none; opacity: 0; background: conic-gradient(from 0deg at 50% 50%, hsl(0 100% 55% / 0.18), hsl(22 100% 50% / 0.18), hsl(280 100% 55% / 0.18), hsl(160 100% 45% / 0.18), hsl(0 100% 55% / 0.18)); mix-blend-mode: color-dodge; filter: blur(80px) saturate(1.4); animation: inst-aura-spin 60s linear infinite; transition: opacity 1.6s ease; } html.pro-mode #instrumentality-root .inst-bg, html.pro-mode #instrumentality-root .inst-mid, html.pro-mode #instrumentality-root .inst-fx { mix-blend-mode: multiply; } html.pro-mode #instrumentality-root .inst-warp { mix-blend-mode: multiply; } /* ============================================================ FRAGMENT BASE ============================================================ */ .inst-frag { position: absolute; display: block; will-change: transform, opacity, filter; color: hsl(22 100% 50%); filter: drop-shadow(0 0 6px currentColor); opacity: 0; animation: inst-drift var(--dur, 22s) linear forwards, inst-breathe var(--dur, 22s) ease-in-out forwards; } .inst-frag svg { display: block; width: 100%; height: 100%; overflow: visible; } .inst-frag svg *:not(text) { stroke: currentColor; fill: none; vector-effect: non-scaling-stroke; } .inst-frag.filled svg path, .inst-frag.filled svg polygon, .inst-frag.filled svg circle { fill: currentColor; fill-opacity: 0.12; } @keyframes inst-drift { from { transform: translate3d(var(--x0,0), var(--y0,0), 0) rotate(var(--r0,0deg)) scale(var(--s,1)); } to { transform: translate3d(var(--x1,0), var(--y1,0), 0) rotate(var(--r1,0deg)) scale(var(--s,1)); } } @keyframes inst-breathe { 0% { opacity: 0; } 15% { opacity: var(--peak, 0.7); } 85% { opacity: var(--peak, 0.7); } 100% { opacity: 0; } } /* ============================================================ DISSONANCE MODIFIERS ============================================================ */ .inst-jitter { animation: inst-drift var(--dur, 22s) linear forwards, inst-breathe var(--dur, 22s) ease-in-out forwards, inst-shake 0.12s steps(2) infinite; } @keyframes inst-shake { 0% { translate: 0 0; } 25% { translate: 1px -1px; } 50% { translate: -2px 1px; } 75% { translate: 1px 2px; } 100% { translate: 0 0; } } .inst-echo { filter: drop-shadow(2px 0 0 hsl(0 100% 55% / 0.55)) drop-shadow(-2px 0 0 hsl(180 100% 50% / 0.55)) drop-shadow(0 0 8px currentColor); } .inst-flicker { animation: inst-drift var(--dur, 22s) linear forwards, inst-flicker-pulse var(--dur, 22s) steps(40) forwards; } @keyframes inst-flicker-pulse { 0%, 100% { opacity: 0; } 10%, 18%, 22%, 60%, 64%, 88% { opacity: 0; } 12%, 20%, 30%, 62%, 70%, 90% { opacity: var(--peak, 0.7); } } /* Psychedelic hue rotation */ .inst-psy { animation: inst-drift var(--dur, 22s) linear forwards, inst-breathe var(--dur, 22s) ease-in-out forwards, inst-hue 6s linear infinite; } @keyframes inst-hue { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 8px currentColor); } 50% { filter: hue-rotate(180deg) drop-shadow(0 0 14px currentColor); } 100% { filter: hue-rotate(360deg) drop-shadow(0 0 8px currentColor); } } /* Digital-surrealism melt: SVG turbulence displacement */ .inst-melt svg { filter: url(#inst-melt); } /* Inverted mirror — duplicate, mirrored, low opacity */ .inst-mirror::after { content: ""; position: absolute; inset: 0; background: inherit; transform: scaleX(-1); opacity: 0.4; pointer-events: none; } /* ============================================================ FX BURSTS ============================================================ */ #instrumentality-root.glitch-burst .inst-fx { animation: inst-glitch 0.55s steps(8) 1; } @keyframes inst-glitch { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 0.95; transform: translate(-6px, 3px) skewX(2deg); } 35% { opacity: 0.7; transform: translate(5px, -4px) skewX(-3deg); } 55% { opacity: 0.9; transform: translate(-3px, 2px) skewY(1deg); } 75% { opacity: 0.6; transform: translate(3px, 0) skewY(-2deg); } 100% { opacity: 0; transform: translate(0,0); } } #instrumentality-root.glitch-burst .inst-mid .inst-frag { animation-play-state: paused; filter: drop-shadow(4px 0 0 hsl(0 100% 55%)) drop-shadow(-4px 0 0 hsl(180 100% 55%)) drop-shadow(0 0 12px currentColor) hue-rotate(90deg) saturate(2); } /* Cognitive dissonance pulse — whole layer hue-cycles for a beat */ #instrumentality-root.dissonance .inst-mid, #instrumentality-root.dissonance .inst-bg { animation: inst-dissonance 1.4s ease-in-out 1; } @keyframes inst-dissonance { 0% { filter: none; } 35% { filter: hue-rotate(180deg) saturate(2.4) contrast(1.3); } 70% { filter: hue-rotate(-90deg) saturate(1.8) blur(1px); } 100% { filter: none; } } /* ============================================================ CHAOS STATE (past 82% scroll) ============================================================ */ #instrumentality-root.chaos .inst-mid { opacity: 1; } #instrumentality-root.chaos .inst-bg { opacity: 0.9; } #instrumentality-root.chaos .inst-warp { opacity: 0.55; } #instrumentality-root.chaos .inst-aura { opacity: 0.65; } #instrumentality-root.chaos::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, hsl(0 100% 55% / 0.22), transparent 60%), repeating-linear-gradient(0deg, transparent 0 3px, hsl(0 0% 100% / 0.05) 3px 4px); mix-blend-mode: screen; animation: inst-shake 0.18s steps(2) infinite; } #instrumentality-root.chaos::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, hsl(0 100% 55% / 0.04) 0 1px, transparent 1px 7px); mix-blend-mode: difference; pointer-events: none; animation: inst-rgb-roll 4s linear infinite; } @keyframes inst-rgb-roll { from { transform: translateX(-30px); } to { transform: translateX(30px); } } /* Entity reveal (rare focal moment) */ .inst-entity { filter: drop-shadow(0 0 24px currentColor) drop-shadow(0 0 60px currentColor); } /* ============================================================ SURREAL FILTERS — keyframes ============================================================ */ @keyframes inst-warp-drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.05); } 100% { transform: translate(0,0) scale(1); } } @keyframes inst-aura-spin { to { transform: rotate(360deg); } } /* ============================================================ LILITH FOOTER — final image at bottom of page ============================================================ */ #lilith-footer { position: relative; width: 100%; margin: 0; padding: 80px 0 0; background: radial-gradient(ellipse at 50% 100%, hsl(0 100% 30% / 0.55), transparent 65%), linear-gradient(to bottom, transparent, #050505 35%, #1a0204 100%); overflow: hidden; isolation: isolate; z-index: 1; } #lilith-footer::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.25) 3px 3px); mix-blend-mode: multiply; pointer-events: none; z-index: 3; } #lilith-footer .lf-skybleed { position: absolute; left: 0; right: 0; top: 0; height: 70%; background: radial-gradient(ellipse at 50% 80%, hsl(0 100% 50% / 0.45), transparent 60%), radial-gradient(ellipse at 30% 30%, hsl(280 80% 30% / 0.50), transparent 55%), radial-gradient(ellipse at 80% 20%, hsl(220 90% 20% / 0.45), transparent 60%); filter: blur(20px); z-index: 0; } #lilith-footer .lf-stars { position: absolute; inset: 0 0 30% 0; background-image: radial-gradient(1px 1px at 20% 30%, white, transparent), radial-gradient(1px 1px at 60% 20%, white, transparent), radial-gradient(1px 1px at 80% 45%, white, transparent), radial-gradient(2px 2px at 35% 15%, hsl(0 0% 90%), transparent), radial-gradient(1px 1px at 15% 60%, white, transparent), radial-gradient(1px 1px at 90% 10%, white, transparent), radial-gradient(1px 1px at 50% 50%, white, transparent), radial-gradient(1px 1px at 70% 70%, white, transparent); background-size: 600px 400px; opacity: 0.7; z-index: 1; animation: inst-stars 9s ease-in-out infinite; } @keyframes inst-stars { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } } #lilith-footer .lf-img-wrap { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; width: 100%; filter: drop-shadow(0 -10px 80px hsl(0 100% 45% / 0.6)); animation: inst-lilith-breathe 8s ease-in-out infinite; } #lilith-footer img.lf-lilith { width: 100%; max-width: 1400px; height: auto; display: block; pointer-events: none; mix-blend-mode: normal; filter: contrast(1.05) saturate(0.9); } @keyframes inst-lilith-breathe { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 -10px 80px hsl(0 100% 45% / 0.6)) hue-rotate(0deg); } 50% { transform: translateY(-6px) scale(1.005); filter: drop-shadow(0 -14px 100px hsl(0 100% 55% / 0.75)) hue-rotate(-8deg); } } #lilith-footer .lf-caption { position: relative; z-index: 4; text-align: center; font-family: "Noto Serif Display", serif; color: hsl(0 0% 80%); font-style: italic; letter-spacing: 0.3em; font-size: 11px; padding: 24px 16px 12px; opacity: 0.7; text-transform: uppercase; } #lilith-footer .lf-caption .jp { display: block; font-family: "Noto Sans JP", sans-serif; font-style: normal; font-size: 10px; letter-spacing: 0.6em; margin-top: 6px; color: hsl(22 100% 60%); opacity: 0.7; } #lilith-footer .lf-sig { position: relative; z-index: 4; display: flex; justify-content: space-between; padding: 4px 24px 16px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: hsl(22 100% 50%); opacity: 0.55; letter-spacing: 0.25em; } /* On chaos, the footer goes psychedelic too */ #instrumentality-root.chaos ~ #lilith-footer .lf-img-wrap, html.inst-chaos #lilith-footer .lf-img-wrap { animation: inst-lilith-chaos 3.4s ease-in-out infinite; } @keyframes inst-lilith-chaos { 0%, 100% { filter: drop-shadow(0 -10px 80px hsl(0 100% 50% / 0.7)) hue-rotate(0deg); } 33% { filter: drop-shadow(8px -10px 0 hsl(0 100% 55% / 0.6)) drop-shadow(-8px -10px 0 hsl(180 100% 55% / 0.6)) hue-rotate(60deg); } 66% { filter: drop-shadow(-6px -10px 0 hsl(280 100% 55% / 0.6)) drop-shadow(6px -10px 0 hsl(60 100% 55% / 0.6)) hue-rotate(-90deg) saturate(1.6); } } @media (prefers-reduced-motion: reduce) { #instrumentality-root { display: none; } #lilith-footer .lf-img-wrap { animation: none; } } /* ============================================================ MOBILE TUNING — keep overlay readable, drop expensive filters ============================================================ */ @media (max-width: 768px) { #instrumentality-root .inst-bg { opacity: 0.40; } #instrumentality-root .inst-mid { opacity: 0.70; } #instrumentality-root .inst-warp { filter: blur(2px); opacity: 0; } #instrumentality-root .inst-aura { filter: blur(60px) saturate(1.2); } #instrumentality-root.chaos .inst-warp { opacity: 0.35; } #instrumentality-root.chaos .inst-aura { opacity: 0.45; } /* kill the most expensive per-fragment filter on phones */ .inst-frag.inst-melt svg { filter: none; } .inst-frag.inst-psy { animation-duration: var(--dur, 22s), var(--dur, 22s), 10s; } .inst-entity { filter: drop-shadow(0 0 14px currentColor); } #lilith-footer { padding-top: 48px; } #lilith-footer .lf-caption { font-size: 10px; letter-spacing: 0.22em; padding: 18px 12px 8px; } #lilith-footer .lf-caption .jp { font-size: 9px; letter-spacing: 0.4em; } #lilith-footer .lf-sig { font-size: 8px; padding: 4px 12px 14px; letter-spacing: 0.18em; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center; } }