.atmosphere{position:absolute;z-index:0;display:none;inset:32px 0 27px;pointer-events:none}.working-light{position:absolute;top:0;left:-30%;width:28%;height:3px;background:linear-gradient(90deg,transparent,#49bdd0,#fff 76%,#71e7f8 86%,transparent);filter:drop-shadow(0 0 4px #49bdd0);animation:studio-light 2s linear infinite}@keyframes studio-light{to{left:105%}}.mockup-surface[data-direction=signal] .working-light{width:14%;height:2px;background:linear-gradient(90deg,transparent,#31c7e8 50%,#fff 54%,transparent);filter:none;animation:signal-scan 1.25s linear infinite}@keyframes signal-scan{to{left:105%}}.mockup-surface[data-direction=signal-comet] .working-light{left:-34%;width:34%;height:4px;background:radial-gradient(circle at 88% 50%,#fff 0 2px,#7cecff 3px,transparent 7px),linear-gradient(90deg,transparent,rgba(49,199,232,.08),rgba(49,199,232,.75));filter:drop-shadow(0 0 6px #31c7e8);animation:signal-comet 2s ease-in-out infinite}@keyframes signal-comet{0%{left:-34%;opacity:0}12%,88%{opacity:1}100%{left:100%;opacity:0}}.mockup-surface[data-direction=signal-twin] .working-light{left:-44%;width:44%;height:3px;background:linear-gradient(90deg,transparent,#fff 18%,#31c7e8 21%,transparent 27% 66%,#31c7e8 72%,#fff 75%,transparent 82%);filter:drop-shadow(0 0 3px #31c7e8);animation:signal-twin 1.65s cubic-bezier(.4,0,.6,1) infinite alternate}@keyframes signal-twin{to{left:100%;transform:scaleX(.72)}}.mockup-surface:is([data-direction=veil],[data-direction=starlight],[data-direction=aurora]) .working-light{display:none}.mockup-surface[data-direction=veil] .atmosphere{display:block;inset:-20% -55%;background:linear-gradient(112deg,transparent 31%,rgba(75,186,212,.18) 39%,rgba(255,255,255,.78) 48%,rgba(79,196,220,.28) 57%,transparent 67%);filter:drop-shadow(0 0 8px rgba(73,189,208,.25));animation:veil-pass 4.8s ease-in-out infinite}@keyframes veil-pass{0%{transform:translateX(-28%);opacity:.35}30%,70%{opacity:.92}100%{transform:translateX(28%);opacity:.4}}.mockup-surface[data-direction=starlight] .atmosphere{display:block;background:radial-gradient(circle at 10% 22%,#fff 0 2px,rgba(91,224,243,.68) 3px,transparent 11px),radial-gradient(circle at 27% 72%,#fff 0 2px,rgba(73,205,229,.6) 3px,transparent 13px),radial-gradient(circle at 45% 38%,#fff 0 3px,rgba(123,238,249,.58) 4px,transparent 14px),radial-gradient(circle at 64% 18%,#fff 0 2px,rgba(72,188,214,.62) 3px,transparent 12px),radial-gradient(circle at 78% 68%,#fff 0 3px,rgba(95,142,211,.5) 4px,transparent 14px),radial-gradient(circle at 92% 42%,#fff 0 2px,rgba(98,220,235,.6) 3px,transparent 10px);filter:drop-shadow(0 0 4px rgba(73,189,208,.45));animation:glint-drift 4.2s ease-in-out infinite alternate}@keyframes glint-drift{0%{transform:translate(-5%,4%);opacity:.62}48%{opacity:.94}100%{transform:translate(6%,-5%);opacity:.7}}.mockup-surface[data-direction=aurora] .atmosphere{display:block;inset:32px -18% 27px;background:radial-gradient(ellipse at 25% 85%,rgba(64,202,222,.22),transparent 48%),radial-gradient(ellipse at 72% 10%,rgba(101,104,196,.17),transparent 52%),linear-gradient(120deg,transparent,rgba(106,232,237,.07),transparent);animation:aurora-wash 10s ease-in-out infinite alternate}@keyframes aurora-wash{0%{transform:translateX(-5%) scale(1.05);filter:saturate(.8)}100%{transform:translateX(5%) scale(1.13);filter:saturate(1.18)}}.mockup-surface.effect-reset :is(.atmosphere,.working-light){animation:none!important}@media(prefers-reduced-motion:reduce){.mockup-surface[data-direction=veil] .atmosphere{transform:none;opacity:.55}.mockup-surface[data-direction=starlight] .atmosphere{transform:none;opacity:.78}.mockup-surface[data-direction=aurora] .atmosphere{transform:none}}
.mockup-surface:is([data-direction=fireflies],[data-direction=prism-rain],[data-direction=rune-ripple],[data-direction=moon-tide],[data-direction=pixel-dust],[data-direction=ribbon-drift],[data-direction=depth-bloom],[data-direction=frost-sweep]) .working-light{display:none}
.mockup-surface[data-direction=fireflies] .atmosphere{display:block;background:radial-gradient(circle at 12% 20%,#fffbd1 0 2px,#8eff99 3px,transparent 12px),radial-gradient(circle at 31% 68%,#fff 0 2px,#b7ff79 3px,transparent 10px),radial-gradient(circle at 54% 35%,#fffbd1 0 2px,#6effc7 3px,transparent 13px),radial-gradient(circle at 75% 72%,#fff 0 2px,#b7ff79 3px,transparent 11px),radial-gradient(circle at 91% 27%,#fffbd1 0 2px,#6effc7 3px,transparent 12px);animation:firefly-swarm 3.6s steps(6,end) infinite}@keyframes firefly-swarm{0%{transform:translate(-3%,2%);opacity:.58}50%{transform:translate(4%,-3%);opacity:1}100%{transform:translate(-1%,4%);opacity:.7}}
.mockup-surface[data-direction=prism-rain] .atmosphere{display:block;background:repeating-linear-gradient(100deg,transparent 0 7%,rgba(76,220,255,.42) 8%,rgba(174,112,255,.34) 9%,rgba(255,255,255,.72) 10%,transparent 11% 18%);background-size:180% 100%;animation:prism-rain 2.8s linear infinite}@keyframes prism-rain{to{background-position:180% 0}}
.mockup-surface[data-direction=rune-ripple] .atmosphere{display:block;background:repeating-radial-gradient(circle at 50% 58%,transparent 0 24px,rgba(232,197,119,.42) 26px,rgba(255,244,204,.68) 28px,transparent 31px 48px);mix-blend-mode:multiply;animation:rune-ripple 3s ease-out infinite}@keyframes rune-ripple{0%{transform:scale(.72);opacity:.88}100%{transform:scale(1.25);opacity:.3}}
.mockup-surface[data-direction=moon-tide] .atmosphere{display:block;inset:32px -10% 27px;background:radial-gradient(ellipse at 18% 90%,rgba(83,224,244,.58),transparent 45%),radial-gradient(ellipse at 80% 0,rgba(105,101,225,.46),transparent 48%);animation:moon-tide 4.6s ease-in-out infinite alternate}@keyframes moon-tide{to{transform:translateX(9%) scale(1.08);filter:hue-rotate(18deg)}}
.mockup-surface[data-direction=pixel-dust] .atmosphere{display:block;background:repeating-conic-gradient(from 15deg at 50% 50%,rgba(255,255,255,.78) 0 1deg,transparent 1deg 12deg);background-size:38px 38px;opacity:.55;animation:pixel-dust 1.8s steps(8,end) infinite}@keyframes pixel-dust{to{background-position:38px -38px;opacity:.9}}
.mockup-surface[data-direction=ribbon-drift] .atmosphere{display:block;inset:32px -35% 27px;background:linear-gradient(118deg,transparent 25%,rgba(66,219,235,.62) 36%,rgba(255,255,255,.82) 43%,rgba(153,105,230,.48) 51%,transparent 63%);animation:ribbon-drift 3.4s cubic-bezier(.45,0,.55,1) infinite alternate}@keyframes ribbon-drift{to{transform:translateX(32%) skewX(-8deg)}}
.mockup-surface[data-direction=border-orbit] .working-light{left:-18%;width:18%;height:5px;border-radius:50%;background:radial-gradient(circle,#fff 0 2px,#5eeaff 3px,transparent 8px);filter:drop-shadow(0 0 7px #30cfe9);animation:border-orbit 2.2s linear infinite}@keyframes border-orbit{0%{left:-18%;top:0}50%{left:100%;top:0}51%{left:100%;top:calc(100% - 5px)}100%{left:-18%;top:calc(100% - 5px)}}
.mockup-surface[data-direction=depth-bloom] .atmosphere{display:block;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.72) 0 4%,rgba(68,211,230,.38) 10%,rgba(103,96,210,.24) 22%,transparent 45%);animation:depth-bloom 3.2s ease-in-out infinite alternate}@keyframes depth-bloom{to{transform:scale(1.3);filter:blur(3px);opacity:.55}}
.mockup-surface[data-direction=heartbeat] .working-light{left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#61dbec 38%,#fff 50%,#61dbec 62%,transparent);animation:heartbeat 1.4s ease-in-out infinite}@keyframes heartbeat{0%,100%{opacity:.28;transform:scaleX(.35)}35%{opacity:1;transform:scaleX(1)}52%{opacity:.4;transform:scaleX(.62)}68%{opacity:.9;transform:scaleX(.9)}}
.working-light{display:none}.mockup-surface[data-activity-effects=true] .working-light{display:block}
.mockup-surface[data-direction=frost-sweep] .atmosphere{display:block;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.7) 42%,rgba(169,237,247,.55) 48%,transparent 62%),repeating-linear-gradient(35deg,transparent 0 12px,rgba(255,255,255,.16) 13px 14px);background-size:220% 100%,100% 100%;animation:frost-sweep 3.8s linear infinite}@keyframes frost-sweep{to{background-position:-220% 0,0 0}}