/* 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: 0; pointer-events: none; overflow: hidden; background: var(--mte-bg, #000); transition: opacity .3s ease, bottom .35s ease, transform .38s cubic-bezier(.22,.61,.36,1); transform-origin: 50% 45%; contain: strict; } /* Room for the player bar while media plays (JS measures .plyr-playlist). */ #mte-wallpaper { bottom: var(--mte-player-h, 0px); } /* Page-travel choreography: the background breathes out on send and settles back in on arrival. Loop-safe: entering is removed after it runs. */ html.mte-leaving #mte-wallpaper { opacity: 0; transform: scale(.965); } html.mte-entering #mte-wallpaper { animation: mtewx-arrive .6s cubic-bezier(.22,.61,.36,1); } @keyframes mtewx-arrive { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } } #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="city"] .fx-stars, html[data-mte-wallpaper="synthwave"] .fx-stars, html[data-mte-wallpaper="beam"] .fx-stars, html[data-mte-wallpaper="fireworks"] .fx-stars, html[data-mte-wallpaper="fireworks"] .fx-fireworks { display: block; } html[data-mte-wallpaper="starfield"] .fx-meteors, html[data-mte-wallpaper="city"] .fx-meteors { display: block; } html[data-mte-wallpaper="fireflies"] .fx-flies { display: block; } html[data-mte-wallpaper="beam"] .fx-beam { display: block; } html[data-mte-wallpaper="petals"] .fx-petals { display: block; } html[data-mte-wallpaper="embers"] .fx-embers { 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; --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; --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; } .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="city"] .fx-meteors .m1 { left: 68%; animation: mtewx-meteor 12s linear infinite; animation-delay: 2s; } html[data-mte-wallpaper="city"] .fx-meteors .m2 { left: 30%; animation: mtewx-meteor 18s linear infinite; animation-delay: 8s; } html[data-mte-wallpaper="city"] .fx-meteors i:nth-child(n+3) { display: none; } @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: 8s; } .fx-flies .f2 { left: 28%; top: 38%; color: var(--color-primary); --dx: -70px; --dy: 60px; animation-duration: 10s; } .fx-flies .f3 { left: 46%; top: 72%; color: #38BDF8; --dx: 80px; --dy: -50px; animation-duration: 7s; } .fx-flies .f4 { left: 63%; top: 30%; color: #34D399; --dx: -50px; --dy: 80px; animation-duration: 9s; } .fx-flies .f5 { left: 78%; top: 58%; color: #ffe08a; --dx: -80px; --dy: -70px; animation-duration: 11s; } .fx-flies .f6 { left: 88%; top: 24%; color: #8B5CF6; --dx: -60px; --dy: 90px; animation-duration: 8s; } @keyframes mtewx-fly { 0% { transform: translate(0, 0); opacity: .15; } 50% { opacity: 1; } 100% { transform: translate(var(--dx, 40px), var(--dy, -60px)); opacity: .25; } } /* 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 13s 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 13s linear infinite; animation-delay: -6.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); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, transparent 92%); } .fx-synth .floor b { position: absolute; left: 0; right: 0; top: -112px; bottom: -112px; display: block; background: repeating-linear-gradient(0deg, rgba(34,211,238,.45) 0 2px, transparent 2px 56px); animation: mtewx-gridmove 1.1s linear infinite; } @keyframes mtewx-gridmove { from { transform: translateY(0); } to { transform: translateY(56px); } } .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); } /* Petals: soft accent-tinted drift (blossom fall, minimal). */ .fx-petals i { position: absolute; top: -8%; border-radius: 62% 38% 60% 40%; background: radial-gradient(ellipse at 35% 30%, rgba(255,255,255,.9), var(--color-primary) 58%, transparent 76%); opacity: 0; animation: mtewx-petal linear infinite; } .fx-petals .p1 { left: 6%; width: 12px; height: 15px; animation-duration: 14s; animation-delay: -2s; } .fx-petals .p2 { left: 16%; width: 10px; height: 13px; background: radial-gradient(ellipse at 35% 30%, #fff, #f9a8d4 60%, transparent 78%); animation-duration: 17s; animation-delay: -9s; } .fx-petals .p3 { left: 27%; width: 15px; height: 18px; animation-duration: 12s; animation-delay: -6s; } .fx-petals .p4 { left: 38%; width: 11px; height: 14px; animation-duration: 19s; animation-delay: -12s; } .fx-petals .p5 { left: 49%; width: 13px; height: 16px; background: radial-gradient(ellipse at 35% 30%, #fff, #f9a8d4 60%, transparent 78%); animation-duration: 15s; animation-delay: -4s; } .fx-petals .p6 { left: 60%; width: 10px; height: 12px; animation-duration: 18s; animation-delay: -14s; } .fx-petals .p7 { left: 71%; width: 14px; height: 17px; animation-duration: 13s; animation-delay: -8s; } @keyframes mtewx-petal { 0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: .85; } 50% { transform: translate3d(4vw, 48vh, 0) rotate(200deg); } 92% { opacity: .7; } 100% { transform: translate3d(-3vw, 108vh, 0) rotate(380deg); opacity: 0; } } /* Embers: glowing sparks rising (fireworks, calmed down). */ .fx-embers i { position: absolute; bottom: -4%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px 2px currentColor; opacity: 0; animation: mtewx-ember linear infinite; } .fx-embers .e1 { left: 8%; color: var(--color-primary); --ex: 24px; animation-duration: 9s; animation-delay: -2s; } .fx-embers .e2 { left: 18%; color: #ffb347; --ex: -20px; animation-duration: 11s; animation-delay: -6s; } .fx-embers .e3 { left: 27%; color: #fff; --ex: 30px; animation-duration: 8s; animation-delay: -4s; } .fx-embers .e4 { left: 36%; color: var(--color-primary); --ex: -26px; animation-duration: 12s; animation-delay: -9s; } .fx-embers .e5 { left: 46%; color: #ffb347; --ex: 18px; animation-duration: 10s; animation-delay: -3s; } .fx-embers .e6 { left: 55%; color: #fff; --ex: -32px; animation-duration: 7s; animation-delay: -5s; } .fx-embers .e7 { left: 64%; color: var(--color-primary); --ex: 28px; animation-duration: 13s; animation-delay: -8s; } .fx-embers .e8 { left: 72%; color: #ffb347; --ex: -18px; animation-duration: 9s; animation-delay: -1s; } .fx-embers .e9 { left: 80%; color: #fff; --ex: 22px; animation-duration: 11s; animation-delay: -7s; } .fx-embers .e10 { left: 88%; color: var(--color-primary); --ex: -28px; animation-duration: 8s; animation-delay: -5s; } .fx-embers .e11 { left: 94%; color: #ffb347; --ex: 16px; animation-duration: 12s; animation-delay: -10s; } .fx-embers .e12 { left: 41%; color: #fff; --ex: -22px; animation-duration: 10s; animation-delay: -6s; } @keyframes mtewx-ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translate(var(--ex, 20px), -104vh); opacity: 0; } } /* Fireworks: single canvas, capped bursts (see JS). */ .fx-fireworks { display: none; } .fx-fireworks canvas, canvas.mte-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .fx-meteors i, .fx-beam i, .fx-petals i, .fx-embers i { will-change: transform; } /* Low-end devices: drop the heaviest extras automatically. */ html[data-mte-perf="low"] .mte-wallpaper__grain, html[data-mte-perf="low"] .fx-meteors .m4, html[data-mte-perf="low"] .fx-flies .f5, html[data-mte-perf="low"] .fx-flies .f6, html[data-mte-perf="low"] .fx-embers .e11, html[data-mte-perf="low"] .fx-embers .e12 { display: none; } /* While media plays, every live wallpaper gets faster; glow follows volume. */ html[data-mte-playing="1"] .fx-meteors i { animation-duration: 2.8s !important; } html[data-mte-playing="1"] .fx-flies i { animation-duration: 5s !important; } html[data-mte-playing="1"] .fx-beam i { animation-duration: 8s !important; } html[data-mte-playing="1"] .fx-synth .floor { animation-duration: .55s !important; } html[data-mte-playing="1"] .fx-petals i { animation-duration: 9s !important; } html[data-mte-playing="1"] .fx-embers i { animation-duration: 6s !important; } html[data-mte-playing="1"] .fx-stars .s1 { animation-duration: 30s, 1.6s !important; } html[data-mte-playing="1"] .fx-stars .s2 { animation-duration: 55s, 2.2s !important; } html[data-mte-playing="1"] .fx-stars .s3 { animation-duration: 80s, 3s !important; } html[data-mte-playing="1"] .fx-flies i { box-shadow: 0 0 calc(16px * var(--mte-vol, 1)) calc(4px * var(--mte-vol, 1)) currentColor; } html[data-mte-playing="1"] .fx-embers i { box-shadow: 0 0 calc(14px * var(--mte-vol, 1)) calc(4px * var(--mte-vol, 1)) currentColor; } /* City Nights: flat moonlit skyline. Tints derive from --mte-bg so any background blends in. Back row is one clipped silhouette; front row is five flat towers with lit windows; the moon breathes slowly. */ html[data-mte-wallpaper="city"] .fx-city { display: block; } .fx-city .back { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: #23252c; clip-path: polygon(0 100%, 0 58%, 5% 58%, 5% 40%, 11% 40%, 11% 52%, 17% 52%, 17% 30%, 23% 30%, 23% 48%, 30% 48%, 30% 36%, 36% 36%, 36% 55%, 43% 55%, 43% 42%, 50% 42%, 50% 58%, 57% 58%, 57% 34%, 63% 34%, 63% 50%, 70% 50%, 70% 40%, 76% 40%, 76% 56%, 83% 56%, 83% 44%, 89% 44%, 89% 58%, 95% 58%, 95% 48%, 100% 48%, 100% 100%); } @supports (background: color-mix(in srgb, red 10%, transparent)) { .fx-city .back { background: color-mix(in srgb, var(--mte-bg, #000) 86%, #ffffff); } } .fx-city .b1, .fx-city .b2, .fx-city .b3, .fx-city .b4, .fx-city .b5 { position: absolute; bottom: 0; background: #101216; } @supports (background: color-mix(in srgb, red 10%, transparent)) { .fx-city .b1, .fx-city .b2, .fx-city .b3, .fx-city .b4, .fx-city .b5 { background: color-mix(in srgb, var(--mte-bg, #000) 92%, #ffffff); } } .fx-city .b1 { left: 4%; width: 15%; height: 30%; } .fx-city .b2 { left: 23%; width: 19%; height: 39%; } .fx-city .b3 { left: 46%; width: 13%; height: 24%; background: #0b0c10; } .fx-city .b4 { left: 63%; width: 17%; height: 33%; } .fx-city .b5 { left: 84%; width: 12%; height: 27%; background: #0b0c10; } .fx-city .b1::before, .fx-city .b2::before, .fx-city .b4::before { content: ""; position: absolute; inset: 12% 12% 10%; background-image: radial-gradient(circle, rgba(255,203,130,.55) 1px, transparent 1.7px); background-size: 13px 17px; opacity: .5; } .fx-city .moon { position: absolute; right: 11%; top: 9%; width: min(18vmin, 120px); height: min(18vmin, 120px); border-radius: 50%; background: radial-gradient(circle at 38% 34%, #ffffff 0%, #e3e7ee 55%, #b7bdc9 100%); box-shadow: 0 0 70px 24px rgba(220,228,244,.14); animation: mtewx-moon 18s ease-in-out infinite alternate; } @keyframes mtewx-moon { from { box-shadow: 0 0 60px 18px rgba(220,228,244,.1); } to { box-shadow: 0 0 90px 30px rgba(220,228,244,.18); } } /* 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="city"] .mte-wallpaper__static, html[data-mte-wallpaper="fireflies"] .mte-wallpaper__static, html[data-mte-wallpaper="fireworks"] .mte-wallpaper__static, html[data-mte-wallpaper="beam"] .mte-wallpaper__static, html[data-mte-wallpaper="petals"] .mte-wallpaper__static, html[data-mte-wallpaper="embers"] .mte-wallpaper__static, html[data-mte-wallpaper="synthwave"] .mte-wallpaper__static { background: var(--mte-bg, #000); } /* Room for the player bar: the layer ends above it while media plays. */ #mte-wallpaper { bottom: var(--mte-player-h, 0px); } /* Lift page chrome above the fixed layer only when a wallpaper is active. Header/sidebar/player/mobile-menu already stack above it; content and footer need the explicit lift. */ html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) .site-content { position: relative; z-index: 1; } html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) .site-footer { 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-leaving #mte-wallpaper { opacity: 1; transform: none; } html[data-mte-respect="1"][data-mte-explicit="0"].mte-entering #mte-wallpaper { 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; } }