body{isolation:isolate}.ambient-rings{position:absolute;inset:0 0 auto;height:1200px;overflow:hidden;pointer-events:none;z-index:-1;mask-image:linear-gradient(#000,transparent)}
.ambient-rings i{position:absolute;top:90px;left:45%;width:900px;height:900px;border:1px solid #b7f78b12;border-radius:46% 54% 52% 48%;animation:ring-drift 24s linear infinite;transform-origin:50% 50%}
.ambient-rings i:nth-child(2){width:1100px;height:1100px;top:0;left:38%;animation-direction:reverse;animation-duration:32s}.ambient-rings i:nth-child(3){width:700px;height:700px;top:190px;left:53%;animation-duration:28s}
@keyframes ring-drift{to{transform:rotate(360deg)}}
.brand-mark{position:relative;display:inline-flex;overflow:hidden;border-radius:12px;flex:none}.brand-mark::after{content:'';position:absolute;inset:-40% -80%;background:linear-gradient(115deg,transparent 42%,#fff8 50%,transparent 58%);transform:translateX(-65%);pointer-events:none;animation:logo-sweep 4.5s ease-in-out infinite}
@keyframes logo-sweep{0%,65%{transform:translateX(-65%);opacity:0}68%{opacity:1}90%,100%{transform:translateX(65%);opacity:0}}
.page-lens{position:fixed;left:0;top:0;width:48px;height:48px;border-radius:50%;pointer-events:none;z-index:9999;border:1px solid #b7f78b55;background:radial-gradient(circle,transparent 40%,#b7f78b08 72%);box-shadow:0 0 18px #b7f78b0c,inset 0 0 12px #b7f78b12;backdrop-filter:contrast(1.04) saturate(1.06);opacity:0;transition:width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),opacity .2s,box-shadow .38s,backdrop-filter .38s;will-change:transform}
.page-lens.is-active{opacity:1}.page-lens.is-image{width:200px;height:200px;box-shadow:0 0 50px #b7f78b0c,inset 0 0 28px #b7f78b12;backdrop-filter:contrast(1.08) saturate(1.12)}
.motion-control{display:flex;justify-content:flex-end;padding-block:10px}.motion-control button{font:inherit;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);padding:8px 12px;border-radius:6px;cursor:pointer}
body.effects-paused .ambient-rings i,body.effects-paused .brand-mark::after,body.effects-background .ambient-rings i,body.effects-background .brand-mark::after{animation-play-state:paused}body.effects-paused .page-lens{opacity:0}
@media(max-width:700px){.ambient-rings i{animation:none}}
@media(hover:none),(pointer:coarse){.page-lens{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-rings i,.brand-mark::after{animation:none}.page-lens{display:none}*{scroll-behavior:auto!important}}