/* Musiveo Theme Extended — live wallpaper engine. Printed INLINE in (see head_vars) so the rules always match the running PHP, immune to optimizer/CDN stylesheet staleness. Bases use --mte-bg to blend with the selected background. */ /* ---------- Wallpaper layer (behind content, above body bg) ---------- */ #mte-wallpaper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--mte-bg, #000); transition: opacity .35s ease; contain: strict; } #mte-wallpaper[hidden] { display: none !important; } #mte-wallpaper.mte-fading { opacity: 0; } /* Layer is hidden until a wallpaper is chosen (dataset set in ). */ #mte-wallpaper { display: none; } html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) #mte-wallpaper { display: block; } .mte-wallpaper__static { position: absolute; inset: 0; } .mte-wallpaper__specks { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.7), transparent 60%), radial-gradient(2px 2px at 54% 18%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 71% 42%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.5px 1.5px at 86% 74%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,.65), transparent 60%), radial-gradient(2px 2px at 93% 28%, rgba(255,255,255,.75), transparent 60%); background-size: 640px 640px; } html.mte-motion .mte-wallpaper__specks { animation: mtewx-speck 5s ease-in-out infinite alternate; } @keyframes mtewx-speck { from { opacity: .55; } to { opacity: 1; } } .mte-wallpaper__grain { position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } .mte-wallpaper__vignette { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.62) 100%); } /* ---------- Pure-CSS live FX (no JavaScript required to animate) ---------- */ .mte-fx { display: none; position: absolute; inset: 0; overflow: hidden; } html[data-mte-wallpaper="starfield"] .fx-stars, html[data-mte-wallpaper="starfall"] .fx-stars, html[data-mte-wallpaper="synthwave"] .fx-stars, html[data-mte-wallpaper="aurora_waves"] .fx-stars, html[data-mte-wallpaper="beam"] .fx-stars, html[data-mte-wallpaper="nebula_drift"] .fx-stars { display: block; } html[data-mte-wallpaper="starfield"] .fx-meteors, html[data-mte-wallpaper="starfall"] .fx-meteors { display: block; } html[data-mte-wallpaper="fireflies"] .fx-flies { display: block; } html[data-mte-wallpaper="nebula_drift"] .fx-nebula { display: block; } html[data-mte-wallpaper="aurora_waves"] .fx-aurora { display: block; } html[data-mte-wallpaper="beam"] .fx-beam { display: block; } html[data-mte-wallpaper="synthwave"] .fx-synth { display: block; } /* Page rules say no live here: static base only. */ html[data-mte-live="0"] .mte-fx { display: none !important; } /* Star maps: static shadow lists (see :root vars below). Drift tile is seamless: shadows span 0..2560px and ::after repeats them at -2560px. */ :root { --mte-s1: 2347px 1743px #FFF , 906px 1118px #FFF , 747px 1441px #FFF , 554px 1594px #FFF , 485px 537px #FFF , 1106px 67px #FFF , 1322px 541px #FFF , 1667px 1256px #FFF , 1735px 1229px #FFF , 1233px 1254px #FFF , 274px 1928px #FFF , 170px 1325px #FFF , 1547px 1342px #FFF , 1370px 1752px #FFF , 1683px 1564px #FFF , 1669px 928px #FFF , 91px 1183px #FFF , 226px 956px #FFF , 110px 1423px #FFF , 2283px 217px #FFF , 1890px 1200px #FFF , 134px 1734px #FFF , 1008px 759px #FFF , 2358px 1411px #FFF , 1812px 1480px #FFF , 828px 1880px #FFF , 1997px 1583px #FFF , 1658px 1906px #FFF , 2061px 1383px #FFF , 2444px 1242px #FFF , 474px 681px #FFF , 356px 815px #FFF , 1579px 1936px #FFF , 2556px 1850px #FFF , 466px 346px #FFF , 1497px 1933px #FFF , 1851px 746px #FFF , 2276px 1015px #FFF , 2333px 399px #FFF , 687px 450px #FFF , 1920px 1660px #FFF , 431px 1835px #FFF , 1174px 1424px #FFF , 1752px 488px #FFF , 2416px 271px #FFF , 1724px 703px #FFF , 1937px 541px #FFF , 2365px 796px #FFF , 1179px 1290px #FFF , 640px 852px #FFF , 975px 1992px #FFF , 1339px 1069px #FFF , 396px 714px #FFF , 555px 814px #FFF , 2311px 280px #FFF , 106px 1211px #FFF , 1082px 1460px #FFF , 2230px 710px #FFF , 440px 443px #FFF , 2430px 1810px #FFF; --mte-s2: 273px 1851px #FFF , 2406px 1119px #FFF , 967px 1764px #FFF , 1349px 302px #FFF , 1028px 527px #FFF , 1466px 1201px #FFF , 1024px 143px #FFF , 820px 450px #FFF , 1262px 467px #FFF , 732px 1880px #FFF , 1018px 158px #FFF , 360px 584px #FFF , 1302px 1631px #FFF , 349px 128px #FFF , 1966px 966px #FFF , 298px 950px #FFF , 1982px 388px #FFF , 1367px 386px #FFF , 142px 82px #FFF , 1126px 519px #FFF , 2488px 968px #FFF , 2525px 921px #FFF , 2255px 1928px #FFF , 1292px 1907px #FFF , 687px 516px #FFF , 607px 322px #FFF , 2407px 189px #FFF , 257px 54px #FFF , 2008px 1295px #FFF , 130px 1125px #FFF , 1908px 925px #FFF , 981px 1838px #FFF , 376px 194px #FFF , 2116px 411px #FFF , 1376px 253px #FFF; --mte-s3: 760px 1959px #FFF , 1345px 1120px #FFF , 1186px 86px #FFF , 2144px 1012px #FFF , 1571px 517px #FFF , 1825px 334px #FFF , 726px 1746px #FFF , 2533px 1646px #FFF , 789px 1707px #FFF , 232px 504px #FFF , 1762px 390px #FFF , 551px 1845px #FFF , 1057px 1920px #FFF , 1889px 505px #FFF , 2249px 367px #FFF , 1488px 972px #FFF , 1312px 1594px #FFF , 2508px 1817px #FFF , 174px 743px #FFF , 2530px 822px #FFF; } .fx-stars i { position: absolute; top: 0; left: 0; border-radius: 50%; } .fx-stars .s1 { width: 1px; height: 1px; box-shadow: var(--mte-s1); } .fx-stars .s2 { width: 2px; height: 2px; box-shadow: var(--mte-s2); } .fx-stars .s3 { width: 2px; height: 2px; box-shadow: var(--mte-s3); } .fx-stars .s1::after, .fx-stars .s2::after, .fx-stars .s3::after { content: ""; position: absolute; top: 0; left: -2560px; border-radius: 50%; box-shadow: inherit; } .fx-stars .s1::after { width: 1px; height: 1px; } .fx-stars .s2::after, .fx-stars .s3::after { width: 2px; height: 2px; } .fx-stars .s1 { animation: mtewx-drift 60s linear infinite, mtewx-twinkle 3.4s ease-in-out infinite alternate; } .fx-stars .s2 { animation: mtewx-drift 110s linear infinite, mtewx-twinkle 4.8s ease-in-out infinite alternate-reverse; } .fx-stars .s3 { animation: mtewx-drift 160s linear infinite, mtewx-twinkle 6.5s ease-in-out infinite alternate; } @keyframes mtewx-drift { from { transform: translateX(0); } to { transform: translateX(2560px); } } @keyframes mtewx-twinkle { from { opacity: .3; } to { opacity: 1; } } /* Meteors: gradient streaks falling diagonally. */ .fx-meteors i { position: absolute; top: -15%; width: 2px; height: 150px; border-radius: 2px; background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,0)); transform: rotate(32deg); opacity: 0; } html[data-mte-wallpaper="starfield"] .fx-meteors .m1 { left: 72%; animation: mtewx-meteor 9s linear infinite; animation-delay: 1.5s; } html[data-mte-wallpaper="starfield"] .fx-meteors .m2 { left: 34%; animation: mtewx-meteor 14s linear infinite; animation-delay: 6s; } html[data-mte-wallpaper="starfield"] .fx-meteors i:nth-child(n+3) { display: none; } html[data-mte-wallpaper="starfall"] .fx-meteors .m1 { left: 78%; animation: mtewx-meteor 4s linear infinite; animation-delay: .4s; } html[data-mte-wallpaper="starfall"] .fx-meteors .m2 { left: 60%; animation: mtewx-meteor 5.4s linear infinite; animation-delay: 1.8s; } html[data-mte-wallpaper="starfall"] .fx-meteors .m3 { left: 44%; animation: mtewx-meteor 3.4s linear infinite; animation-delay: 2.6s; } html[data-mte-wallpaper="starfall"] .fx-meteors .m4 { left: 26%; animation: mtewx-meteor 6.2s linear infinite; animation-delay: .9s; } html[data-mte-wallpaper="starfall"] .fx-meteors .m5 { left: 12%; animation: mtewx-meteor 4.7s linear infinite; animation-delay: 3.4s; } html[data-mte-wallpaper="starfall"] .fx-meteors .m6 { left: 88%; animation: mtewx-meteor 5.9s linear infinite; animation-delay: 4.4s; } @keyframes mtewx-meteor { 0% { opacity: 0; transform: rotate(32deg) translate3d(0, 0, 0); } 5% { opacity: 1; } 13% { opacity: 0; transform: rotate(32deg) translate3d(-30vw, 46vh, 0); } 100% { opacity: 0; transform: rotate(32deg) translate3d(-30vw, 46vh, 0); } } /* Fireflies: slow drifting glowing dust. */ .fx-flies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px 3px currentColor; animation: mtewx-fly ease-in-out infinite alternate; } .fx-flies .f1 { left: 12%; top: 64%; color: #ffe08a; --dx: 60px; --dy: -90px; animation-duration: 11s; } .fx-flies .f2 { left: 28%; top: 38%; color: var(--color-primary); --dx: -70px; --dy: 60px; animation-duration: 14s; } .fx-flies .f3 { left: 46%; top: 72%; color: #38BDF8; --dx: 80px; --dy: -50px; animation-duration: 9s; } .fx-flies .f4 { left: 63%; top: 30%; color: #34D399; --dx: -50px; --dy: 80px; animation-duration: 12s; } .fx-flies .f5 { left: 78%; top: 58%; color: #ffe08a; --dx: -80px; --dy: -70px; animation-duration: 15s; } .fx-flies .f6 { left: 88%; top: 24%; color: #8B5CF6; --dx: -60px; --dy: 90px; animation-duration: 10s; } .fx-flies .f7 { left: 20%; top: 22%; color: #ffd319; --dx: 70px; --dy: 70px; animation-duration: 13s; } .fx-flies .f8 { left: 55%; top: 50%; color: var(--color-primary); --dx: 50px; --dy: -80px; animation-duration: 16s; } .fx-flies .f9 { left: 36%; top: 84%; color: #7dd3fc; --dx: -60px; --dy: -60px; animation-duration: 11s; } @keyframes mtewx-fly { 0% { transform: translate(0, 0); opacity: .15; } 50% { opacity: 1; } 100% { transform: translate(var(--dx, 40px), var(--dy, -60px)); opacity: .25; } } /* Nebula: breathing tinted clouds (first follows the accent). Soft edges come from the gradients themselves — no blur filter, so frames stay cheap. */ .fx-nebula i { position: absolute; border-radius: 50%; } .fx-nebula .n1 { width: 54vmax; height: 54vmax; left: -13vmax; top: -15vmax; background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); opacity: .22; animation: mtewx-neb-a 26s ease-in-out infinite alternate; } .fx-nebula .n2 { width: 48vmax; height: 48vmax; right: -14vmax; bottom: -16vmax; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); opacity: .24; animation: mtewx-neb-b 33s ease-in-out infinite alternate; } .fx-nebula .n3 { width: 40vmax; height: 40vmax; left: 30vw; top: 44vh; background: radial-gradient(circle, #2563eb 0%, transparent 70%); opacity: .18; animation: mtewx-neb-c 39s ease-in-out infinite alternate; } @keyframes mtewx-neb-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.15); } } @keyframes mtewx-neb-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-6vmax, -5vmax) scale(1); } } @keyframes mtewx-neb-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-5vmax, 5vmax) scale(1.2); } } /* Aurora: flowing light ribbons. Gradient falloff only — no blur filter. */ .fx-aurora i { position: absolute; border-radius: 50%; } .fx-aurora .a1 { width: 62vmax; height: 26vmax; left: -12vmax; top: 4vh; background: radial-gradient(closest-side, var(--color-primary), transparent 72%); opacity: .3; animation: mtewx-aur-a 22s ease-in-out infinite alternate; } .fx-aurora .a2 { width: 56vmax; height: 24vmax; right: -14vmax; top: 30vh; background: radial-gradient(closest-side, #8B5CF6, transparent 72%); opacity: .3; animation: mtewx-aur-b 29s ease-in-out infinite alternate; } .fx-aurora .a3 { width: 64vmax; height: 22vmax; left: 8vw; bottom: -8vmax; background: radial-gradient(closest-side, #22d3ee, transparent 72%); opacity: .26; animation: mtewx-aur-c 25s ease-in-out infinite alternate; } @keyframes mtewx-aur-a { from { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); } to { transform: translate3d(9vmax, 5vmax, 0) rotate(5deg) scale(1.18); } } @keyframes mtewx-aur-b { from { transform: translate3d(0, 0, 0) scale(1.12); } to { transform: translate3d(-8vmax, 6vmax, 0) scale(1); } } @keyframes mtewx-aur-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, -5vmax, 0) scale(1.15); } } /* Beam: slow sweeping light bar. */ .fx-beam i { position: absolute; top: -40%; height: 180%; transform: rotate(18deg); } .fx-beam .b1 { left: 0; width: 26vw; opacity: .12; background: linear-gradient(90deg, transparent, var(--color-primary) 50%, transparent); animation: mtewx-beam 17s linear infinite; } .fx-beam .b2 { left: 0; width: 8vw; opacity: .1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 50%, transparent); animation: mtewx-beam 17s linear infinite; animation-delay: -8.5s; } @keyframes mtewx-beam { from { transform: rotate(18deg) translateX(-45vw); } to { transform: rotate(18deg) translateX(135vw); } } /* Synthwave: retro sun + scrolling neon grid, pure CSS. */ .fx-synth .sun { position: absolute; left: 50%; bottom: 38%; width: min(30vmin, 260px); height: min(30vmin, 260px); transform: translateX(-50%); border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #ffd319 0%, #ff2975 55%, #8c1eff 100%); box-shadow: 0 0 60px 10px rgba(255,41,117,.25); animation: mtewx-sun 7s ease-in-out infinite alternate; } .fx-synth .sun::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 12px, #05030c 12px 15px); -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 42%); mask-image: linear-gradient(180deg, transparent 42%, #000 42%); } @keyframes mtewx-sun { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.04); } } .fx-synth .floor { position: absolute; left: -25%; right: -25%; top: 62%; bottom: -30%; transform: perspective(320px) rotateX(58deg); transform-origin: 50% 0; background: repeating-linear-gradient(90deg, rgba(255,45,120,.4) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgba(34,211,238,.45) 0 2px, transparent 2px 56px); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, transparent 92%); animation: mtewx-grid 1.1s linear infinite; } .fx-synth .floor::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,45,120,.9); box-shadow: 0 0 18px rgba(255,45,120,.8); } @keyframes mtewx-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 56px; } } /* Static bases blend with the selected background. */ html[data-mte-wallpaper="midnight"] .mte-wallpaper__static { background: radial-gradient(90% 55% at 50% -10%, rgba(255,255,255,.06) 0%, transparent 60%), linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); } @supports (background: color-mix(in srgb, red 10%, transparent)) { html[data-mte-wallpaper="midnight"] .mte-wallpaper__static { background: radial-gradient(55% 40% at 50% 108%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 70%), radial-gradient(90% 55% at 50% -10%, rgba(255,255,255,.06) 0%, transparent 60%), linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); } } html[data-mte-wallpaper="orb"] .mte-wallpaper__static { background: radial-gradient(42% 30% at 50% 16%, rgba(255,255,255,.05) 0%, transparent 70%), linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); } @supports (background: color-mix(in srgb, red 10%, transparent)) { html[data-mte-wallpaper="orb"] .mte-wallpaper__static { background: radial-gradient(46% 34% at 50% 18%, color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 70%), radial-gradient(42% 30% at 50% 16%, rgba(255,255,255,.05) 0%, transparent 70%), linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); } } html[data-mte-wallpaper="matte"] .mte-wallpaper__static { background: var(--mte-bg, #000); } html[data-mte-wallpaper="matte"] .mte-wallpaper__grain { opacity: .13; } html[data-mte-wallpaper="nebula_static"] .mte-wallpaper__static { background: radial-gradient(45% 38% at 22% 24%, rgba(139,92,246,.4) 0%, transparent 70%), radial-gradient(38% 32% at 78% 68%, rgba(56,189,248,.26) 0%, transparent 70%), radial-gradient(30% 26% at 62% 30%, rgba(217,70,239,.18) 0%, transparent 70%), radial-gradient(55% 40% at 50% 105%, rgba(139,92,246,.14) 0%, transparent 70%), linear-gradient(165deg, var(--mte-bg-2, #0a0a0b), var(--mte-bg, #000) 75%); } html[data-mte-wallpaper="starfield"] .mte-wallpaper__static, html[data-mte-wallpaper="starfall"] .mte-wallpaper__static, html[data-mte-wallpaper="fireflies"] .mte-wallpaper__static, html[data-mte-wallpaper="nebula_drift"] .mte-wallpaper__static, html[data-mte-wallpaper="aurora_waves"] .mte-wallpaper__static, html[data-mte-wallpaper="beam"] .mte-wallpaper__static, html[data-mte-wallpaper="synthwave"] .mte-wallpaper__static { background: var(--mte-bg, #000); } /* Lift page content above the fixed layer only when a wallpaper is active. */ html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) .site-content { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { html[data-mte-respect="1"][data-mte-explicit="0"].mte-motion .mte-wallpaper__specks { animation: none; } html[data-mte-respect="1"][data-mte-explicit="0"] .mte-fx i, html[data-mte-respect="1"][data-mte-explicit="0"] .mte-fx .sun, html[data-mte-respect="1"][data-mte-explicit="0"] .mte-fx .floor { animation: none !important; } }