can swap themes dynamicallyv0.12.0

3 files changed, 241 insertions, 0 deletions

diff --git a/internal/generator/templates/themes/cathedral/meta.json b/internal/generator/templates/themes/cathedral/meta.json
new file mode 100644
index 0000000..f4a81db
--- /dev/null
+++ b/internal/generator/templates/themes/cathedral/meta.json
@@ -0,0 +1,7 @@
+{
+  "title": "snonux.foo // CATHEDRAL",
+  "header_html": "\u003cdiv class=\"logo\"\u003e\n                \u003cspan class=\"logo-mark\"\u003eSN\u003c/span\u003e\n                \u003cdiv class=\"logo-title\"\u003e\n                    \u003ch1\u003esnonux.foo\u003c/h1\u003e\n                    \u003cp class=\"subtitle\"\u003emicroblog \u0026mdash; \u003ca href=\"https://foo.zone\"\u003efoo.zone\u003c/a\u003e is the real blog\u003c/p\u003e\n                    \u003cp class=\"logo-host\"\u003eServed by NetBSD on a Raspberry Pi 3\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"nav\"\u003e\n                \u003ca href=\"atom.xml\" class=\"header-feed-link\" rel=\"alternate\" title=\"Atom feed\" type=\"application/atom+xml\"\u003eAtom feed\u003c/a\u003e\n                \u003ca href=\"https://foo.zone/about\" class=\"transmit-btn\"\u003eReliquary\u003c/a\u003e\n            \u003c/div\u003e",
+  "splash_inner_html": "\u003ccanvas class=\"splash-gl-canvas\" id=\"splash-gl-canvas\" aria-hidden=\"true\"\u003e\u003c/canvas\u003e\n        \u003cdiv class=\"splash-rose\" aria-hidden=\"true\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"splash-pipes\" aria-hidden=\"true\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"splash-incense\" aria-hidden=\"true\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"splash-inner\"\u003e\n            \u003cdiv class=\"splash-title\"\u003esnonux.foo\u003c/div\u003e\n            \u003cdiv class=\"splash-tag\"\u003eRitual Engine\u003c/div\u003e\n            \u003cdiv class=\"splash-hint\"\u003eClick or Enter to cross the nave\u003c/div\u003e\n        \u003c/div\u003e",
+  "prev_page_text": "\u0026larr; Newer",
+  "next_page_text": "Older \u0026rarr;"
+}
diff --git a/internal/generator/templates/themes/cathedral/theme.css b/internal/generator/templates/themes/cathedral/theme.css
new file mode 100644
index 0000000..5dc6456
--- /dev/null
+++ b/internal/generator/templates/themes/cathedral/theme.css
@@ -0,0 +1,79 @@
+        :root { --gold:#e0c47f; --violet:#6f4fae; --ruby:#8e2f49; --glass:#7bc2ff; --stone:#110f16; --chalk:#f0e8d9; }
+        * { margin:0; padding:0; box-sizing:border-box; }
+        body { font-family:'Spectral',serif; background:#0f0d14; color:var(--chalk); overflow:hidden; height:100vh; }
+        body::before { content:''; position:fixed; inset:0; z-index:998; pointer-events:none;
+            background:
+                radial-gradient(circle at 50% 4%, rgba(224,196,127,0.1) 0%, transparent 24%),
+                linear-gradient(90deg, rgba(123,194,255,0.05), transparent 18%, transparent 82%, rgba(142,47,73,0.06));
+            mix-blend-mode:screen; opacity:0.8; }
+        #three-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:1; }
+        .overlay { position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; }
+        header { padding:16px 28px; background:rgba(11,10,16,0.84); backdrop-filter:blur(10px); border-bottom:1px solid rgba(224,196,127,0.18); display:flex; align-items:center; justify-content:space-between; }
+        .logo { display:flex; align-items:center; gap:14px; }
+        .logo-mark { font-family:'Cinzel',serif; font-size:1.9rem; color:var(--gold); text-shadow:0 0 14px rgba(224,196,127,0.22); }
+        .logo-mark::after { content:'✢'; margin-left:8px; color:#fff3c8; text-shadow:0 0 12px rgba(224,196,127,0.6); }
+        .logo-title h1 { font-family:'Cinzel',serif; font-size:1.5rem; letter-spacing:0.1em; color:var(--chalk); }
+        .logo-title .subtitle { font-size:0.8rem; color:rgba(240,232,217,0.6); margin-top:2px; }
+        .logo-title .subtitle a { color:var(--gold); text-decoration:none; }
+        .logo-title .subtitle a:hover { color:#fff3c8; }
+        .transmit-btn { border:1px solid rgba(224,196,127,0.28); color:var(--gold); padding:8px 16px; text-decoration:none; font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase; transition:all 0.18s; }
+        .transmit-btn:hover { background:rgba(224,196,127,0.12); border-color:rgba(224,196,127,0.52); }
+        a.header-feed-link { color:rgba(224,196,127,0.84); }
+        a.header-feed-link:hover { color:#fff3c8; }
+        .nav-hints { background:rgba(17,14,22,0.72); border-bottom:1px solid rgba(224,196,127,0.08); color:rgba(240,232,217,0.48); padding:5px 28px; display:flex; gap:18px; font-size:0.68rem; letter-spacing:0.08em; flex-wrap:wrap; }
+        .nav-hints kbd { background:rgba(111,79,174,0.16); border:1px solid rgba(224,196,127,0.2); color:var(--gold); padding:0 5px; margin:0 2px; }
+        .content { flex:1; overflow-y:auto; padding:20px 28px; scrollbar-width:thin; scrollbar-color:#7e6231 #18131d; }
+        .page-nav { display:flex; justify-content:center; margin:14px 0; }
+        .page-nav a { border:1px solid rgba(224,196,127,0.2); color:var(--gold); padding:8px 18px; text-decoration:none; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; }
+        .page-nav a:hover { background:rgba(224,196,127,0.08); }
+        .page-nav-footer { flex-shrink:0; padding:8px 28px; display:flex; justify-content:center; background:rgba(11,10,16,0.84); backdrop-filter:blur(10px); border-top:1px solid rgba(224,196,127,0.18); }
+        .post { position:relative; background:
+                linear-gradient(180deg, rgba(30,19,30,0.93), rgba(13,10,17,0.95)),
+                radial-gradient(circle at 14% 0%, rgba(123,194,255,0.08), transparent 28%);
+                border:1px solid rgba(224,196,127,0.08); padding:20px; margin-bottom:14px; cursor:pointer;
+                box-shadow:0 16px 38px rgba(0,0,0,0.28); transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
+        .post::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(123,194,255,0.05), transparent 36%, rgba(142,47,73,0.06) 68%, transparent); }
+        .post:hover { border-color:rgba(224,196,127,0.24); transform:translateY(-1px); box-shadow:0 22px 42px rgba(0,0,0,0.42); }
+        .post-active { border-color:rgba(224,196,127,0.36) !important;
+                       background:linear-gradient(180deg, rgba(42,19,33,0.96), rgba(15,10,18,0.96)) !important;
+                       box-shadow:0 0 0 1px rgba(224,196,127,0.12), 0 22px 44px rgba(0,0,0,0.46), inset 4px 0 0 var(--gold) !important; }
+        .post-header { display:flex; justify-content:space-between; margin-bottom:12px; font-size:0.88rem; }
+        .post-header strong { color:var(--gold); font-family:'Cinzel',serif; }
+        .post-time { color:rgba(240,232,217,0.58); }
+        .post-text { line-height:1.72; font-size:1rem; }
+        .post-text a { color:#cfe2ff; text-decoration:none; border-bottom:1px solid rgba(207,226,255,0.22); }
+        .post-text a:hover { border-color:rgba(207,226,255,0.72); }
+        .post-image { margin-top:10px; border:1px solid rgba(224,196,127,0.12); filter:saturate(0.9) contrast(1.06); }
+        .post-audio { width:100%; margin-top:10px; filter:sepia(0.12) contrast(0.92); }
+        .post-modal { display:none; position:fixed; inset:0; z-index:100; overflow-y:auto; padding:40px 20px; }
+        .post-modal.active { display:block; }
+        .modal-inner { max-width:800px; margin:0 auto; background:rgba(15,11,18,0.98); border:1px solid rgba(224,196,127,0.2); padding:38px; box-shadow:0 28px 84px rgba(0,0,0,0.72); }
+        .modal-close { float:right; background:none; border:none; color:var(--gold); font-family:'Cinzel',serif; font-size:0.8rem; cursor:pointer; letter-spacing:0.14em; }
+        @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} }
+        [data-sno-theme="cathedral"] .splash-overlay {
+            background:
+                radial-gradient(circle at 50% 18%, rgba(224,196,127,0.18) 0%, transparent 30%),
+                linear-gradient(180deg, #17111b 0%, #09080d 100%);
+        }
+        [data-sno-theme="cathedral"] .splash-rose { position:absolute; top:6vh; left:50%; width:min(36vw,240px); height:min(36vw,240px); transform:translateX(-50%); border-radius:50%;
+            background:
+                radial-gradient(circle at center, rgba(255,244,200,0.86) 0 6%, rgba(224,196,127,0.78) 6% 12%, rgba(111,79,174,0.84) 12% 20%, rgba(123,194,255,0.78) 20% 28%, rgba(142,47,73,0.8) 28% 38%, rgba(224,196,127,0.2) 38% 42%, transparent 42%),
+                conic-gradient(from 0deg, rgba(123,194,255,0.68), rgba(142,47,73,0.84), rgba(224,196,127,0.74), rgba(111,79,174,0.74), rgba(123,194,255,0.68));
+            box-shadow:0 0 72px rgba(224,196,127,0.22); opacity:0.78; z-index:1; animation:cathedralRoseSpin 24s linear infinite; }
+        @keyframes cathedralRoseSpin { to { transform:translateX(-50%) rotate(360deg); } }
+        [data-sno-theme="cathedral"] .splash-pipes { position:absolute; inset:auto 0 0 0; height:42vh; z-index:1;
+            background:
+                linear-gradient(90deg,
+                    transparent 0 6%, rgba(12,11,18,0.96) 6% 10%, transparent 10% 14%, rgba(12,11,18,0.96) 14% 18%, transparent 18% 22%, rgba(12,11,18,0.96) 22% 26%,
+                    transparent 26% 74%, rgba(12,11,18,0.96) 74% 78%, transparent 78% 82%, rgba(12,11,18,0.96) 82% 86%, transparent 86% 90%, rgba(12,11,18,0.96) 90% 94%, transparent 94%);
+            opacity:0.94; }
+        [data-sno-theme="cathedral"] .splash-incense { position:absolute; inset:0; z-index:1;
+            background:
+                radial-gradient(circle at 34% 72%, rgba(255,255,255,0.05) 0%, transparent 26%),
+                radial-gradient(circle at 68% 58%, rgba(255,255,255,0.04) 0%, transparent 26%);
+            animation:cathedralSmoke 8s ease-in-out infinite alternate; }
+        @keyframes cathedralSmoke { from { transform:translateY(0) scale(1); } to { transform:translateY(-2%) scale(1.05); } }
+        [data-sno-theme="cathedral"] .splash-title { font-family:'Cinzel',serif; font-size:clamp(1.7rem,5vw,2.5rem); color:#fff4d2; letter-spacing:0.08em; }
+        [data-sno-theme="cathedral"] .splash-tag { color:var(--gold); letter-spacing:0.26em; }
+        [data-sno-theme="cathedral"] .splash-hint { color:rgba(240,232,217,0.82); }
+        [data-sno-theme="cathedral"] .splash-inner { text-shadow:0 2px 28px rgba(0,0,0,0.94); }
diff --git a/internal/generator/templates/themes/cathedral/theme.js b/internal/generator/templates/themes/cathedral/theme.js
new file mode 100644
index 0000000..6247200
--- /dev/null
+++ b/internal/generator/templates/themes/cathedral/theme.js
@@ -0,0 +1,155 @@
+
+    (function(){
+        if(document.documentElement.classList.contains('sno-splash-skip'))return;
+        var cv=document.getElementById('splash-gl-canvas');
+        if(!cv||typeof THREE==='undefined')return;
+        var raf,ren,sc,ca,clock,embers,rose;
+        function cleanup(){window.removeEventListener('resize',sz);if(raf)cancelAnimationFrame(raf);raf=null;if(ren)ren.dispose();ren=null;window._snonuxSplashWebGLCleanup=null;}
+        window._snonuxSplashWebGLCleanup=cleanup;
+        function sz(){var w=cv.clientWidth||2,h=cv.clientHeight||2;if(ren)ren.setSize(w,h,false);if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();}}
+        ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true});ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
+        sc=new THREE.Scene();ca=new THREE.PerspectiveCamera(46,1,0.1,80);ca.position.set(0,6,22);clock=new THREE.Clock();
+        var floor=new THREE.Mesh(new THREE.PlaneGeometry(28,42),new THREE.MeshBasicMaterial({color:0x120f16,transparent:true,opacity:0.95})); floor.rotation.x=-Math.PI/2; floor.position.y=-4; sc.add(floor);
+        for(var i=0;i<8;i++){ var c=new THREE.Mesh(new THREE.CylinderGeometry(0.38,0.52,11,8),new THREE.MeshBasicMaterial({color:0x302737}));
+            c.position.set(i<4?-6.2:6.2,1,-16+(i%4)*8); sc.add(c);}
+        rose=new THREE.Mesh(new THREE.CircleGeometry(3.4,34),new THREE.MeshBasicMaterial({color:0xd9bf78,transparent:true,opacity:0.26})); rose.position.set(0,8,-16); sc.add(rose);
+        var beam=new THREE.Mesh(new THREE.ConeGeometry(3.8,12,20,1,true),new THREE.MeshBasicMaterial({color:0xd9bf78,transparent:true,opacity:0.08,side:THREE.DoubleSide})); beam.position.set(0,4,-6); beam.rotation.x=Math.PI; sc.add(beam);
+        var ep=new Float32Array(240*3); for(i=0;i<ep.length;i+=3){ ep[i]=(Math.random()-0.5)*14; ep[i+1]=Math.random()*8; ep[i+2]=-14+Math.random()*18; }
+        var eg=new THREE.BufferGeometry(); eg.setAttribute('position',new THREE.BufferAttribute(ep,3));
+        embers=new THREE.Points(eg,new THREE.PointsMaterial({color:0xffb35a,size:0.12,transparent:true,opacity:0.24})); sc.add(embers);
+        sz();window.addEventListener('resize',sz);
+        function loop(){ raf=requestAnimationFrame(loop); var t=clock.getElapsedTime(),pos=embers.geometry.attributes.position;
+            for(var i=0;i<pos.count;i++){ var y=pos.getY(i)+0.05; pos.setY(i,y>10?0:y); }
+            pos.needsUpdate=true; rose.rotation.z=t*0.08; beam.material.opacity=0.08+Math.sin(t*1.5)*0.02; ren.render(sc,ca); }
+        raf=requestAnimationFrame(loop);
+    })();
+
+
+    (function() {
+        var _wild = false, _snoTOffset = 0, _snoLastT = 0;
+        var scene, camera, renderer, clock, dust, embers, beams = [], candles = [], rose, halo, chandelier, pipes = [];
+
+        function initThree() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x0f0d14);
+            scene.fog = new THREE.Fog(0x0f0d14, 16, 140);
+            camera = new THREE.PerspectiveCamera(56, window.innerWidth/window.innerHeight, 0.1, 260);
+            camera.position.set(0, 10, 40);
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+            clock = new THREE.Clock();
+
+            scene.add(new THREE.AmbientLight(0x50394b, 0.38));
+            var floor = new THREE.Mesh(new THREE.PlaneGeometry(90, 220, 1, 1), new THREE.MeshPhongMaterial({ color:0x19141c, shininess:12 }));
+            floor.rotation.x = -Math.PI/2; floor.position.y = -3; scene.add(floor);
+            var aisle = new THREE.Mesh(new THREE.PlaneGeometry(10, 210), new THREE.MeshBasicMaterial({ color:0x3d2830, transparent:true, opacity:0.24 }));
+            aisle.rotation.x = -Math.PI/2; aisle.position.set(0,-2.98,-38); scene.add(aisle);
+            rose = new THREE.Mesh(new THREE.CircleGeometry(7.2, 48), new THREE.MeshBasicMaterial({ color:0xd9bf78, transparent:true, opacity:0.18 }));
+            rose.position.set(0, 16, -102); scene.add(rose);
+            halo = new THREE.Mesh(new THREE.CircleGeometry(10.8, 48), new THREE.MeshBasicMaterial({ color:0x71233d, transparent:true, opacity:0.08 }));
+            halo.position.set(0, 16, -103); scene.add(halo);
+            chandelier = new THREE.Mesh(new THREE.TorusGeometry(4.5, 0.18, 12, 44), new THREE.MeshBasicMaterial({ color:0xe0c47f, transparent:true, opacity:0.5 }));
+            chandelier.position.set(0, 18, -16); scene.add(chandelier);
+
+            for (var i = 0; i < 18; i++) {
+                var side = i < 9 ? -1 : 1;
+                var z = -95 + (i % 9) * 12;
+                var col = new THREE.Mesh(new THREE.CylinderGeometry(0.9, 1.05, 20, 10), new THREE.MeshPhongMaterial({ color:0x2d2632 }));
+                col.position.set(side * 13, 7, z); scene.add(col);
+                var pipe = new THREE.Mesh(new THREE.BoxGeometry(1.4, 12 + (i % 5) * 2.8, 1.4), new THREE.MeshPhongMaterial({ color:0x55474b, shininess:28 }));
+                pipe.position.set(side * 18, pipe.geometry.parameters.height * 0.5 - 1, z - 4); scene.add(pipe); pipes.push(pipe);
+                var beam = new THREE.Mesh(new THREE.ConeGeometry(4.4, 26, 22, 1, true), new THREE.MeshBasicMaterial({ color:i % 2 === 0 ? 0x7bc2ff : 0x8e2f49, transparent:true, opacity:0.08, side:THREE.DoubleSide }));
+                beam.position.set(side * 9, 9, z); beam.rotation.x = Math.PI; scene.add(beam); beams.push(beam);
+            }
+
+            for (i = 0; i < 14; i++) {
+                var flame = new THREE.PointLight(i % 3 === 0 ? 0xffd58a : 0xffb35a, 0.52, 18);
+                flame.position.set((i % 2 === 0 ? -4.5 : 4.5) + (Math.random() - 0.5), 1.4, -10 - i * 7.6);
+                scene.add(flame); candles.push(flame);
+            }
+
+            var dp = new Float32Array(1400 * 3);
+            for (i = 0; i < dp.length; i += 3) { dp[i]=(Math.random()-0.5)*42; dp[i+1]=Math.random()*28; dp[i+2]=-120+Math.random()*120; }
+            var dg = new THREE.BufferGeometry(); dg.setAttribute('position', new THREE.BufferAttribute(dp, 3));
+            dust = new THREE.Points(dg, new THREE.PointsMaterial({ color:0xf0e8d9, size:0.12, transparent:true, opacity:0.34 }));
+            scene.add(dust);
+            var ep = new Float32Array(460 * 3);
+            for (i = 0; i < ep.length; i += 3) { ep[i]=(Math.random()-0.5)*24; ep[i+1]=Math.random()*16; ep[i+2]=-100+Math.random()*100; }
+            var eg = new THREE.BufferGeometry(); eg.setAttribute('position', new THREE.BufferAttribute(ep, 3));
+            embers = new THREE.Points(eg, new THREE.PointsMaterial({ color:0xffb35a, size:0.18, transparent:true, opacity:0.0 }));
+            scene.add(embers);
+            window.addEventListener('resize', onResize);
+            animate();
+        }
+
+        function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            var realT = clock.getElapsedTime();
+            _snoTOffset += (realT - _snoLastT) * (_wild ? 9 : 0);
+            _snoLastT = realT;
+            var t = realT + _snoTOffset;
+            var pos = dust.geometry.attributes.position;
+            for (var i = 0; i < pos.count; i++) {
+                var y = pos.getY(i) + (_wild ? 0.12 : 0.02);
+                var x = pos.getX(i) + Math.sin(t * 0.3 + i) * (_wild ? 0.03 : 0.005);
+                pos.setX(i, x); pos.setY(i, y > 26 ? -2 : y);
+            }
+            pos.needsUpdate = true;
+
+            var emberPos = embers.geometry.attributes.position;
+            for (i = 0; i < emberPos.count; i++) {
+                var ey = emberPos.getY(i) + (_wild ? 0.2 : 0.01);
+                emberPos.setY(i, ey > 22 ? 0 : ey);
+                if (_wild) emberPos.setX(i, emberPos.getX(i) + Math.sin(realT * 0.8 + i) * 0.04);
+            }
+            emberPos.needsUpdate = true;
+            embers.material.opacity = _wild ? 0.74 : 0.0;
+
+            rose.rotation.z = realT * (_wild ? 0.9 : 0.08);
+            halo.scale.setScalar(1 + Math.sin(realT * (_wild ? 3.8 : 1.2)) * (_wild ? 0.18 : 0.03));
+            chandelier.rotation.z = Math.sin(realT * (_wild ? 1.6 : 0.24)) * (_wild ? 0.2 : 0.03);
+            chandelier.rotation.x = Math.sin(realT * (_wild ? 1.2 : 0.18)) * (_wild ? 0.12 : 0.02);
+
+            for (i = 0; i < beams.length; i++) beams[i].material.opacity = (_wild ? 0.18 : 0.08) + Math.sin(t * 0.8 + i) * 0.02;
+            for (i = 0; i < candles.length; i++) candles[i].intensity = (_wild ? 1.18 : 0.52) + Math.sin(realT * 5 + i) * 0.12;
+            for (i = 0; i < pipes.length; i++) pipes[i].scale.y = 1 + Math.sin(realT * (_wild ? 4.2 : 0.4) + i) * (_wild ? 0.18 : 0.015);
+
+            camera.position.x = Math.sin(realT * (_wild ? 1.4 : 0.16)) * (_wild ? 3.4 : 0.6);
+            camera.position.y = 10 + Math.sin(realT * 0.3) * (_wild ? 1.8 : 0.4);
+            camera.position.z = _wild ? 35 + Math.sin(realT * 0.6) * 4 : 40;
+            camera.lookAt(0, 5, -48);
+            renderer.render(scene, camera);
+        }
+
+        initThree();
+
+        function veil(css, ms) {
+            var d = document.createElement('div');
+            d.style.cssText = 'position:fixed;inset:0;z-index:998;pointer-events:none;' + css + ';transition:opacity ' + (ms || 240) + 'ms';
+            document.body.appendChild(d);
+            setTimeout(function() { d.style.opacity='0'; setTimeout(function() { d.remove(); }, ms || 240); }, 25);
+        }
+        window.snonuxOpenEffect = function() {
+            var modal = document.getElementById('post-modal');
+            if (modal) { modal.classList.add('sno-modal-zoom'); setTimeout(function() { modal.classList.remove('sno-modal-zoom'); }, 390); }
+            veil('background:radial-gradient(ellipse at center,rgba(224,196,127,0.18),rgba(123,194,255,0.08),transparent 70%)', 260);
+        };
+        window.snonuxCloseEffect = function() { veil('background:rgba(0,0,0,0.3)', 180); };
+        window.snonuxNavEffect = function() { veil('background:linear-gradient(90deg,transparent,rgba(123,194,255,0.12),rgba(224,196,127,0.08),transparent)', 190); };
+        window.snonuxPageEffect = function() { veil('background:radial-gradient(ellipse at center,rgba(142,47,73,0.22),rgba(224,196,127,0.12),transparent 72%)', 260); };
+        window.snonuxScrollEffect = function(dir) {
+            var d = document.createElement('div');
+            d.style.cssText = 'position:fixed;' + (dir === 'down' ? 'top:0;' : 'bottom:0;') + 'left:0;right:0;height:' + (_wild ? '16px' : '6px') + ';z-index:9000;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(224,196,127,0.84),rgba(123,194,255,0.62),rgba(142,47,73,0.54),transparent);transition:transform 0.34s ease,opacity 0.34s ease;';
+            document.body.appendChild(d);
+            setTimeout(function() { d.style.transform = dir === 'down' ? 'translateY(100vh)' : 'translateY(-100vh)'; d.style.opacity='0'; }, 16);
+            setTimeout(function() { d.remove(); }, 400);
+        };
+        window.snonuxWildToggle = function() {
+            _wild = !_wild;
+            var b = document.getElementById('sno-wild-badge');
+            if (b) b.classList.toggle('sno-wild-on', _wild);
+        };
+    })();