2 lines
16 KiB
CSS
2 lines
16 KiB
CSS
.zoom-reveal-bg{animation:zoom-reveal 2.8s cubic-bezier(.25,.46,.45,.94) forwards;transform-origin:center center;opacity:0;transform:scale(.15);filter:blur(24px)}@keyframes zoom-reveal{0%{opacity:0;transform:scale(.15);filter:blur(24px)}35%{opacity:.5;transform:scale(.5);filter:blur(20px)}65%{opacity:.85;transform:scale(.88);filter:blur(6px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.glass-throw-active{perspective:1400px}.glass-piece{will-change:transform,opacity}.sidebar-shell{width:100%;height:100%;min-height:100vh;background:#00000040;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-right:1px solid transparent;box-shadow:4px 0 24px #0000004d;overflow:hidden}.sidebar-animate .sidebar-shell{animation:sidebar-shell-fly 1.2s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:5.2s;opacity:0;transform:translate(-100%)}@keyframes sidebar-shell-fly{0%{opacity:0;transform:translate(-100%);border-color:transparent}70%{opacity:1;transform:translate(0);border-color:transparent}to{opacity:1;transform:translate(0);border-color:#ffffff2e}}.sidebar-inner{overflow:hidden;opacity:0}.sidebar-animate .sidebar-inner{animation:sidebar-inner-draw .7s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:6.1s}@keyframes sidebar-inner-draw{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1}to{opacity:1;clip-path:inset(0 0 0 0)}}.sidebar-nav-item{opacity:0;transform:translate(-12px)}.sidebar-animate .sidebar-nav-item{animation:sidebar-nav-item-in .4s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:calc(6.3s + var(--nav-stagger, 0) * .06s)}@keyframes sidebar-nav-item-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.sidebar-controller{opacity:0}.sidebar-animate .sidebar-controller{animation:sidebar-fade-in .4s ease-out forwards;animation-delay:6.9s}.sidebar-logout-btn{opacity:0;transform:scale(.95)}.sidebar-animate .sidebar-logout-btn{animation:sidebar-logout-pop .45s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:7.1s}@keyframes sidebar-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sidebar-logout-pop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sidebar-logo{opacity:0;transform:translateY(-8px)}.sidebar-animate .sidebar-logo{animation:sidebar-logo-in .5s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:6.15s}@keyframes sidebar-logo-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}aside:not(.sidebar-animate) .sidebar-shell{border-color:#ffffff2e;opacity:1;transform:none}aside:not(.sidebar-animate) .sidebar-inner,aside:not(.sidebar-animate) .sidebar-logo,aside:not(.sidebar-animate) .sidebar-nav-item,aside:not(.sidebar-animate) .sidebar-controller,aside:not(.sidebar-animate) .sidebar-logout-btn{opacity:1;transform:none;animation:none;clip-path:none}.glass-throw-main{animation:glass-throw-main 1.6s cubic-bezier(.25,.46,.45,.94) .15s forwards;opacity:0;transform:translate(20%) scale(.2);filter:blur(14px)}.glass-throw-content{animation:glass-throw-content 1.5s cubic-bezier(.25,.46,.45,.94) .22s forwards;opacity:0;transform:translateY(12%) scale(.25);filter:blur(10px)}.glass-throw-mobile-tabs{animation:glass-throw-top 1.3s cubic-bezier(.25,.46,.45,.94) .08s forwards;opacity:0;transform:translateY(-90%) scale(.28);filter:blur(10px)}.glass-throw-mobile-tabs-2{animation:glass-throw-top 1.35s cubic-bezier(.25,.46,.45,.94) .18s forwards;opacity:0;transform:translateY(-90%) scale(.28);filter:blur(10px)}.glass-throw-tabbar{animation:glass-throw-bottom 1.4s cubic-bezier(.25,.46,.45,.94) .2s forwards;opacity:0;transform:translateY(85%) scale(.25);filter:blur(10px)}@keyframes glass-throw-sidebar{0%{opacity:0;transform:translate(-100%) scale(.25);filter:blur(12px)}45%{opacity:.9;transform:translate(-15%) scale(.85);filter:blur(8px)}to{opacity:1;transform:translate(0) scale(1);filter:blur(0)}}@keyframes glass-throw-main{0%{opacity:0;transform:translate(20%) scale(.2);filter:blur(14px)}50%{opacity:.85;transform:translate(0) scale(.9);filter:blur(6px)}to{opacity:1;transform:translate(0) scale(1);filter:blur(0)}}@keyframes glass-throw-content{0%{opacity:0;transform:translateY(12%) scale(.25);filter:blur(10px)}50%{opacity:.9;transform:translateY(0) scale(.9);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes glass-throw-top{0%{opacity:0;transform:translateY(-90%) scale(.28);filter:blur(10px)}50%{opacity:.9;transform:translateY(0) scale(.95);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes glass-throw-bottom{0%{opacity:0;transform:translateY(85%) scale(.25);filter:blur(10px)}50%{opacity:.9;transform:translateY(0) scale(.95);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.oomph-flash{background:radial-gradient(ellipse at center,rgba(255,255,255,.08) 0%,transparent 65%);animation:oomph-flash .7s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes oomph-flash{0%{opacity:0}25%{opacity:.9}to{opacity:0}}.reveal-flash-glitch{background:radial-gradient(ellipse at center,rgba(255,255,255,.12) 0%,transparent 70%);animation:reveal-flash-sequence 2.8s ease-out forwards}@keyframes reveal-flash-sequence{0%{opacity:0}12%{opacity:.6}18%{opacity:0}42%{opacity:.4}48%{opacity:0}70%{opacity:.35}78%{opacity:0}to{opacity:0}}.app-panel-container{position:absolute;inset:0;z-index:100}.panel-slide-enter-active{transition:opacity .25s ease}.panel-slide-leave-active{transition:transform .3s ease,opacity .3s ease}.panel-slide-enter-from{opacity:0}.panel-slide-leave-to{transform:translate(40px) scale(.97);opacity:0}.perspective-container-wrapper{position:relative;overflow:hidden;height:100%}.perspective-container{perspective:2000px;perspective-origin:50% 50%;position:relative;height:100%;overflow:hidden}.view-wrapper{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity;opacity:1}.depth-forward-enter-active.view-wrapper,.depth-forward-leave-active.view-wrapper{transition:all .8s cubic-bezier(.25,.46,.45,.94)}.depth-forward-enter-from.view-wrapper{opacity:0;transform:translateZ(-800px) scale(.75);filter:blur(4px)}.depth-forward-enter-to.view-wrapper,.depth-forward-leave-from.view-wrapper{opacity:1;transform:translateZ(0) scale(1);filter:blur(0px)}.depth-forward-leave-to.view-wrapper{opacity:0;transform:translateZ(400px) scale(1.2);filter:blur(8px)}.depth-back-enter-active.view-wrapper,.depth-back-leave-active.view-wrapper{transition:all .8s cubic-bezier(.25,.46,.45,.94)}.depth-back-enter-from.view-wrapper{opacity:0;transform:translateZ(400px) scale(1.2);filter:blur(8px)}.depth-back-enter-to.view-wrapper,.depth-back-leave-from.view-wrapper{opacity:1;transform:translateZ(0) scale(1);filter:blur(0px)}.depth-back-leave-to.view-wrapper{opacity:0;transform:translateZ(-800px) scale(.75);filter:blur(4px)}@media(min-width:768px){.depth-forward-enter-from.view-wrapper{transform:translateZ(-800px) scale(.75) rotateX(5deg)}.depth-forward-leave-to.view-wrapper,.depth-back-enter-from.view-wrapper{transform:translateZ(400px) scale(1.2) rotateX(-4deg)}.depth-back-leave-to.view-wrapper{transform:translateZ(-800px) scale(.75) rotateX(5deg)}}.chat-open-enter-active.view-wrapper,.chat-open-leave-active.view-wrapper{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}.chat-open-enter-from.view-wrapper{opacity:0;transform:translate(-60px) scale(.96)}.chat-open-enter-to.view-wrapper,.chat-open-leave-from.view-wrapper{opacity:1;transform:translate(0) scale(1)}.chat-open-leave-to.view-wrapper{opacity:0;transform:translate(60px) scale(.96)}.chat-close-enter-active.view-wrapper,.chat-close-leave-active.view-wrapper{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}.chat-close-enter-from.view-wrapper{opacity:0;transform:translate(60px) scale(.96)}.chat-close-enter-to.view-wrapper,.chat-close-leave-from.view-wrapper{opacity:1;transform:translate(0) scale(1)}.chat-close-leave-to.view-wrapper{opacity:0;transform:translate(-60px) scale(.96)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.slide-left-enter-active.view-wrapper,.slide-left-leave-active.view-wrapper{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}.slide-left-enter-from.view-wrapper{transform:translate(100%);opacity:0}.slide-left-enter-to.view-wrapper,.slide-left-leave-from.view-wrapper{transform:translate(0);opacity:1}.slide-left-leave-to.view-wrapper{transform:translate(-100%);opacity:0}.slide-right-enter-active.view-wrapper,.slide-right-leave-active.view-wrapper{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}.slide-right-enter-from.view-wrapper{transform:translate(-100%);opacity:0}.slide-right-enter-to.view-wrapper,.slide-right-leave-from.view-wrapper{transform:translate(0);opacity:1}.slide-right-leave-to.view-wrapper{transform:translate(100%);opacity:0}.slide-down-enter-active.view-wrapper{transition:all .5s cubic-bezier(.25,.46,.45,.94)}.slide-down-leave-active.view-wrapper{transition:transform .5s cubic-bezier(.25,.46,.45,.94),opacity .5s cubic-bezier(.4,0,.2,1)}.slide-down-enter-from.view-wrapper{opacity:0;transform:translateY(40vh)}.slide-down-enter-to.view-wrapper,.slide-down-leave-from.view-wrapper{opacity:1;transform:translateY(0)}.slide-down-leave-to.view-wrapper{opacity:0;transform:translateY(-30vh)}.slide-up-enter-active.view-wrapper{transition:all .5s cubic-bezier(.25,.46,.45,.94)}.slide-up-leave-active.view-wrapper{transition:transform .5s cubic-bezier(.25,.46,.45,.94),opacity .5s cubic-bezier(.4,0,.2,1)}.slide-up-enter-from.view-wrapper{opacity:0;transform:translateY(-40vh)}.slide-up-enter-to.view-wrapper,.slide-up-leave-from.view-wrapper{opacity:1;transform:translateY(0)}.slide-up-leave-to.view-wrapper{opacity:0;transform:translateY(30vh)}.dashboard-view .bg-perspective-container{position:fixed;inset:0;z-index:-10;perspective:1000px;perspective-origin:50% 50%;overflow:hidden;left:0!important;right:0!important;width:100%!important;min-width:100%!important;background:#000}.dashboard-view .bg-layer{position:absolute;inset:0;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;transition:all .45s cubic-bezier(.68,-.55,.265,1.55);transform-style:preserve-3d;will-change:transform,opacity}.dashboard-view .bg-layer:first-of-type{opacity:1;transform:translateZ(0) scale(1)}.dashboard-view .bg-layer:nth-of-type(2){opacity:0;transform:translateZ(-200px) scale(.9) rotateY(-15deg)}.dashboard-view .bg-layer.bg-transitioning-out{opacity:0;transform:translateZ(200px) scale(1.15) rotateY(15deg)!important}.dashboard-view .bg-layer.bg-transitioning-in{opacity:1;transform:translateZ(0) scale(1.05) rotateY(0)!important}.bg-glitch-layer-1,.bg-glitch-layer-2,.bg-glitch-scan{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:0}.bg-glitch-layer-1{background-size:cover;background-position:center;mix-blend-mode:lighten;filter:brightness(1.8) contrast(2) saturate(1.5) hue-rotate(180deg);will-change:transform,clip-path,opacity}.bg-glitch-layer-2{background-size:cover;background-position:center;mix-blend-mode:color-dodge;filter:brightness(2) contrast(2) saturate(2) hue-rotate(90deg);will-change:transform,clip-path,opacity}.bg-glitch-scan{background:linear-gradient(90deg,#f0f3,#0ff3,#ff03,#0ff3,#f0f3),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 2px,transparent 2px,transparent 4px);will-change:transform,opacity}.bg-glitch-layer-1.glitch-active{animation:bg-glitch-shift .375s steps(15,end) forwards}.bg-glitch-layer-2.glitch-active{animation:bg-glitch-shift-2 .375s steps(12,end) forwards}.bg-glitch-scan.glitch-active{animation:bg-glitch-scan .375s linear forwards}@keyframes bg-glitch-shift{0%{transform:translate(0);clip-path:inset(0% 0 0 0);opacity:0}5%{opacity:.5}12%{transform:translate(15px,-8px);clip-path:inset(12% 0 70% 0)}20%{transform:translate(-20px,10px);clip-path:inset(45% 0 35% 0)}28%{transform:translate(18px,-5px);clip-path:inset(68% 0 15% 0)}36%{transform:translate(-15px,12px);clip-path:inset(20% 0 60% 0)}44%{transform:translate(22px,-10px);clip-path:inset(52% 0 28% 0)}52%{transform:translate(-18px,8px);clip-path:inset(10% 0 75% 0)}60%{transform:translate(12px,-6px);clip-path:inset(58% 0 22% 0)}68%{transform:translate(-10px,15px);clip-path:inset(32% 0 48% 0)}76%{transform:translate(16px,-4px);clip-path:inset(72% 0 12% 0)}84%{transform:translate(-12px,7px);clip-path:inset(18% 0 65% 0)}92%{transform:translate(8px,-3px);clip-path:inset(42% 0 40% 0)}96%{opacity:.4}to{transform:translate(0);clip-path:inset(0% 0 0 0);opacity:0}}@keyframes bg-glitch-shift-2{0%{transform:translate(0) skew(0);clip-path:inset(0% 0 0 0);opacity:0}8%{opacity:.5}15%{transform:translate(-18px,10px) skew(4deg);clip-path:inset(25% 0 55% 0)}23%{transform:translate(22px,-12px) skew(-5deg);clip-path:inset(50% 0 30% 0)}31%{transform:translate(-16px,8px) skew(3deg);clip-path:inset(72% 0 12% 0)}39%{transform:translate(20px,-15px) skew(-4deg);clip-path:inset(18% 0 65% 0)}47%{transform:translate(-22px,12px) skew(5deg);clip-path:inset(42% 0 38% 0)}55%{transform:translate(18px,-8px) skew(-3deg);clip-path:inset(62% 0 20% 0)}63%{transform:translate(-14px,14px) skew(4deg);clip-path:inset(30% 0 52% 0)}71%{transform:translate(16px,-6px) skew(-2deg);clip-path:inset(8% 0 78% 0)}79%{transform:translate(-12px,10px) skew(3deg);clip-path:inset(55% 0 28% 0)}87%{transform:translate(10px,-4px) skew(-2deg);clip-path:inset(35% 0 45% 0)}95%{opacity:.4}to{transform:translate(0) skew(0);clip-path:inset(0% 0 0 0);opacity:0}}@keyframes bg-glitch-scan{0%{opacity:0;transform:translate(-120%)}5%{opacity:.5}15%{opacity:.55;transform:translate(-80%)}30%{opacity:.6;transform:translate(-40%)}50%{opacity:.6;transform:translate(0)}70%{opacity:.55;transform:translate(40%)}85%{opacity:.5;transform:translate(80%)}95%{opacity:.45}to{opacity:0;transform:translate(120%)}}.dashboard-view .bg-fullwidth{min-width:100%;width:100%;background-size:cover!important;background-position:center center!important}.dashboard-glitch-layer{position:absolute;inset:0;pointer-events:none;z-index:5;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0}.dashboard-glitch-1{mix-blend-mode:screen;filter:hue-rotate(22deg) saturate(1.35);animation:dashboard-glitch-shift 5s steps(10,end) infinite;background-size:cover!important;background-position:center center!important}.dashboard-glitch-2{mix-blend-mode:screen;filter:hue-rotate(-30deg) saturate(1.45);animation:dashboard-glitch-shift-2 5s steps(9,end) infinite;background-size:cover!important;background-position:center center!important}.dashboard-glitch-scan{position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(180deg,#ffffff29,#0000 60%),repeating-linear-gradient(180deg,#ffffff0d 0 2px,#0000 2px 4px),radial-gradient(ellipse at center,#0000 40%,#00000059);opacity:0;animation:dashboard-glitch-scan 5s ease-out infinite}@keyframes dashboard-glitch-shift{0%,82%{transform:translate(0);clip-path:inset(0% 0 0 0);opacity:0}82.1%{opacity:.28}84%{transform:translate(6px,-2px);clip-path:inset(8% 0 70% 0)}86%{transform:translate(-5px,2px);clip-path:inset(42% 0 40% 0)}88%{transform:translate(3px);clip-path:inset(68% 0 10% 0)}91%{transform:translate(-4px,3px);clip-path:inset(18% 0 60% 0)}93%{transform:translate(5px,-3px);clip-path:inset(55% 0 20% 0)}95%{transform:translate(-3px,1px);clip-path:inset(10% 0 80% 0)}to{transform:translate(0);clip-path:inset(0% 0 0 0);opacity:0}}@keyframes dashboard-glitch-shift-2{0%,82%{transform:translate(0);clip-path:inset(0% 0 0 0);opacity:0}82.1%{opacity:.24}84%{transform:translate(-6px,2px);clip-path:inset(12% 0 65% 0)}86%{transform:translate(5px,-1px) skew(.6deg);clip-path:inset(36% 0 42% 0)}89%{transform:translate(-3px,2px);clip-path:inset(72% 0 8% 0)}92%{transform:translate(4px,-3px);clip-path:inset(22% 0 58% 0)}95%{transform:translate(-4px,1px);clip-path:inset(50% 0 26% 0)}to{transform:translate(0);clip-path:inset(0% 0 0 0);opacity:0}}@keyframes dashboard-glitch-scan{0%,82%{opacity:0;transform:translateY(-20%)}84%{opacity:.5}90%{opacity:.35}to{opacity:0;transform:translateY(115%)}}
|