asdsad

CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css

@@ -4,6 +4,7 @@ body {
 }
 
 body {
+    overflow: hidden;
     background:
         radial-gradient(circle at top, rgba(255, 221, 177, 0.30), transparent 26%),
         radial-gradient(circle at 80% 18%, rgba(132, 216, 166, 0.18), transparent 20%),
@@ -42,12 +43,62 @@ body {
 
 .kb-login-shell {
     position: relative;
+    isolation: isolate;
     display: grid;
     place-items: center;
     min-height: calc(100vh - 80px);
     padding: 24px;
 }
 
+.kb-login-curtains {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.kb-login-curtain {
+    position: absolute;
+    left: 50%;
+    width: 180vmax;
+    height: 180vmax;
+    opacity: 0.72;
+    border-radius: 999px;
+    transform-origin: 0 50%;
+    animation-duration: 1.1s;
+    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    animation-fill-mode: both;
+}
+
+.kb-login-curtain-top,
+.kb-login-curtain-bottom {
+    top: 50%;
+    margin-top: -90vmax;
+}
+
+.kb-login-curtain-top-a {
+    background: linear-gradient(135deg, rgba(236, 101, 105, 0.84), rgba(238, 175, 129, 0.76));
+    animation-name: kbLoginCurtainTopA;
+}
+
+.kb-login-curtain-top-b {
+    background: linear-gradient(135deg, rgba(255, 196, 104, 0.66), rgba(255, 138, 76, 0.6));
+    animation-name: kbLoginCurtainTopB;
+    animation-delay: 0.08s;
+}
+
+.kb-login-curtain-bottom-a {
+    background: linear-gradient(135deg, rgba(96, 184, 212, 0.7), rgba(55, 69, 181, 0.82));
+    animation-name: kbLoginCurtainBottomA;
+    animation-delay: 0.12s;
+}
+
+.kb-login-curtain-bottom-b {
+    background: linear-gradient(135deg, rgba(72, 125, 255, 0.5), rgba(36, 74, 179, 0.76));
+    animation-name: kbLoginCurtainBottomB;
+    animation-delay: 0.18s;
+}
+
 .kb-login-ambient {
     position: absolute;
     inset: 0;
@@ -70,6 +121,17 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
     backdrop-filter: blur(24px);
+    opacity: 0;
+    transform: translateY(28px) scale(0.98);
+    animation: kbLoginPanelReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
+    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+}
+
+.kb-login-panel:hover,
+.kb-login-panel:focus-within {
+    transform: translateY(-2px);
+    box-shadow: 0 30px 90px rgba(2, 6, 23, 0.5);
+    border-color: rgba(255, 255, 255, 0.18);
 }
 
 .kb-login-copy {
@@ -129,10 +191,12 @@ body {
     color: #082032 !important;
     font-weight: 700;
     box-shadow: none !important;
+    transition: transform 160ms ease, filter 160ms ease, background-color 160ms ease, border-color 160ms ease;
 }
 
 #kc-form-login .pf-v5-c-button:hover,
 #kc-login:hover {
+    transform: translateY(-1px);
     filter: brightness(1.03);
 }
 
@@ -162,6 +226,70 @@ body {
     border-radius: 14px !important;
 }
 
+@keyframes kbLoginPanelReveal {
+    from {
+        opacity: 0;
+        transform: translateY(28px) scale(0.98);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes kbLoginCurtainTopA {
+    from {
+        transform: rotate(46deg) translateX(0);
+    }
+
+    to {
+        transform: rotate(46deg) translateX(22vmax);
+    }
+}
+
+@keyframes kbLoginCurtainTopB {
+    from {
+        transform: rotate(136deg) translateX(0);
+    }
+
+    to {
+        transform: rotate(136deg) translateX(18vmax);
+    }
+}
+
+@keyframes kbLoginCurtainBottomA {
+    from {
+        transform: rotate(-44deg) translateX(0);
+    }
+
+    to {
+        transform: rotate(-44deg) translateX(22vmax);
+    }
+}
+
+@keyframes kbLoginCurtainBottomB {
+    from {
+        transform: rotate(-134deg) translateX(0);
+    }
+
+    to {
+        transform: rotate(-134deg) translateX(18vmax);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kb-login-curtain,
+    .kb-login-panel {
+        animation: none;
+    }
+
+    .kb-login-panel {
+        opacity: 1;
+        transform: none;
+    }
+}
+
 @media (max-width: 640px) {
     #kc-content-wrapper {
         padding-top: 20px;