/* Inter font */ body { font-family: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #FAFAFA; } .dark body { background-color: #111827; } /* Material Symbols */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Fade-in animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.3s ease-out; } /* Skeleton shimmer */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* Input focus */ input:focus { outline: none; } /* Button transitions */ button { transition: all 0.15s ease; } /* Spin animation */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* No scrollbar utility */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ========== Login Card Holographic Laser Effect ========== */ .login-card-holo { --pointer-x: 50%; --pointer-y: 50%; --pointer-from-center: 0; --pointer-from-top: 0.5; --pointer-from-left: 0.5; --background-x: 50%; --background-y: 50%; --card-opacity: 0; --sunpillar-1: hsl(2, 100%, 73%); --sunpillar-2: hsl(53, 100%, 69%); --sunpillar-3: hsl(93, 100%, 69%); --sunpillar-4: hsl(176, 100%, 76%); --sunpillar-5: hsl(228, 100%, 74%); --sunpillar-6: hsl(283, 100%, 73%); } .login-card-holo:hover { --card-opacity: 1; } .login-shine { position: absolute; inset: 0; border-radius: 0 24px 24px 0; pointer-events: none; z-index: 8; overflow: hidden; mix-blend-mode: color-dodge; /* Syncap scattered logos mask - 7 logos at normal angle (no rotation), parallax on hover */ --logo-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTggNjQwIj4KICA8ZyBmaWxsPSJ3aGl0ZSI+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMCw2MCkgc2NhbGUoMC4wODUpIj48cGF0aCBkPSJNNDAuOTc2NiAyMzAuNUgyNjMuNzkzTDMxOC44NTcgMTc2LjcxN0wzNDcuNjcgMTQ5LjgyNUMzNDcuNjcgMTQ5LjgyNSAzNjIuNTAyIDEzNy4wNTQgMzc2LjQ4MiAxMzAuNjE3QzM5NS4xMDYgMTIyLjA0MSA0MjguOTg1IDEyMi45MzMgNDI4Ljk4NSAxMjIuOTMzSDQ4MS40ODhINTMzLjk5QzUzMy45OSAxMjIuOTMzIDU2NS4zMSAxMjMuODI5IDU4My45MzIgMTE1LjI1QzU5OS4zNDggMTA4LjE0OCA2MTcuMjI3IDkyLjIgNjE3LjIyNyA5Mi4yTDY0Ny45NiA2MS40NjY3TDcwOS40MjcgMEg0ODUuMzI5SDM3My4yODFIMzE3LjI1NkMzMTcuMjU2IDAgMjk0LjczOSAwLjYwMTkwNSAyNzQuMDM4IDcuNjgzMzNDMjQ0LjU4NyAxNy43NTc4IDIwNi4xNjggNTcuNjI1IDIwNi4xNjggNTcuNjI1TDE1MS4xMDQgMTE1LjI1TDQwLjk3NjYgMjMwLjVaIi8+PHBhdGggZD0iTTY2OC40NDkgMjMwLjVINDQ1LjYzM0wzOTAuNTY5IDI4NC4yODNMMzYxLjc1NiAzMTEuMTc1QzM2MS43NTYgMzExLjE3NSAzNDYuOTI0IDMyMy45NDYgMzMyLjk0NCAzMzAuMzgzQzMxNC4zMiAzMzguOTU5IDI4MC40NDEgMzM4LjA2NyAyODAuNDQxIDMzOC4wNjdIMjI3LjkzOEgxNzUuNDM1QzE3NS40MzUgMzM4LjA2NyAxNDQuMTE2IDMzNy4xNzEgMTI1LjQ5NCAzNDUuNzVDMTEwLjA3NyAzNTIuODUyIDkyLjE5OTMgMzY4LjggOTIuMTk5MyAzNjguOEw2MS40NjU5IDM5OS41MzNMLTAuMDAwNzMyNDIyIDQ2MUgyMjQuMDk2SDMzNi4xNDVIMzkyLjE2OUMzOTIuMTY5IDQ2MSA0MTQuNjg3IDQ2MC4zOTggNDM1LjM4OCA0NTMuMzE3QzQ2NC44MzkgNDQzLjI0MiA1MDMuMjU4IDQwMy4zNzUgNTAzLjI1OCA0MDMuMzc1TDU1OC4zMjEgMzQ1Ljc1TDY2OC40NDkgMjMwLjVaIi8+PC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEwLDMwKSBzY2FsZSgwLjEpIj48cGF0aCBkPSJNNDAuOTc2NiAyMzAuNUgyNjMuNzkzTDMxOC44NTcgMTc2LjcxN0wzNDcuNjcgMTQ5LjgyNUMzNDcuNjcgMTQ5LjgyNSAzNjIuNTAyIDEzNy4wNTQgMzc2LjQ4MiAxMzAuNjE3QzM5NS4xMDYgMTIyLjA0MSA0MjguOTg1IDEyMi45MzMgNDI4Ljk4NSAxMjIuOTMzSDQ4MS40ODhINTMzLjk5QzUzMy45OSAxMjIuOTMzIDU2NS4zMSAxMjMuODI5IDU4My45MzIgMTE1LjI1QzU5OS4zNDggMTA4LjE0OCA2MTcuMjI3IDkyLjIgNjE3LjIyNyA5Mi4yTDY0Ny45NiA2MS40NjY3TDcwOS40MjcgMEg0ODUuMzI5SDM3My4yODFIMzE3LjI1NkMzMTcuMjU2IDAgMjk0LjczOSAwLjYwMTkwNSAyNzQuMDM4IDcuNjgzMzNDMjQ0LjU4NyAxNy43NTc4IDIwNi4xNjggNTcuNjI1IDIwNi4xNjggNTcuNjI1TDE1MS4xMDQgMTE1LjI1TDQwLjk3NjYgMjMwLjVaIi8+PHBhdGggZD0iTTY2OC40NDkgMjMwLjVINDQ1LjYzM0wzOTAuNTY5IDI4NC4yODNMMzYxLjc1NiAzMTEuMTc1QzM2MS43NTYgMzExLjE3NSAzNDYuOTI0IDMyMy45NDYgMzMyLjk0NCAzMzAuMzgzQzMxNC4zMiAzMzguOTU5IDI4MC40NDEgMzM4LjA2NyAyODAuNDQxIDMzOC4wNjdIMjI3LjkzOEgxNzUuNDM1QzE3NS40MzUgMzM4LjA2NyAxNDQuMTE2IDMzNy4xNzEgMTI1LjQ5NCAzNDUuNzVDMTEwLjA3NyAzNTIuODUyIDkyLjE5OTMgMzY4LjggOTIuMTk5MyAzNjguOEw2MS40NjU5IDM5OS41MzNMLTAuMDAwNzMyNDIyIDQ2MUgyMjQuMDk2SDMzNi4xNDVIMzkyLjE2OUMzOTIuMTY5IDQ2MSA0MTQuNjg3IDQ2MC4zOTggNDM1LjM4OCA0NTMuMzE3QzQ2NC44MzkgNDQzLjI0MiA1MDMuMjU4IDQwMy4zNzUgNTAzLjI1OCA0MDMuMzc1TDU1OC4zMjEgMzQ1Ljc1TDY2OC40NDkgMjMwLjVaIi8+PC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYwLDIwMCkgc2NhbGUoMC4wOCkiPjxwYXRoIGQ9Ik00MC45NzY2IDIzMC41SDI2My43OTNMMzE4Ljg1NyAxNzYuNzE3TDM0Ny42NyAxNDkuODI1QzM0Ny42NyAxNDkuODI1IDM2Mi41MDIgMTM3LjA1NCAzNzYuNDgyIDEzMC42MTdDMzk1LjEwNiAxMjIuMDQxIDQyOC45ODUgMTIyLjkzMyA0MjguOTg1IDEyMi45MzNINDgxLjQ4OEg1MzMuOTlDNTMzLjk5IDEyMi45MzMgNTY1LjMxIDEyMy44MjkgNTgzLjkzMiAxMTUuMjVDNTk5LjM0OCAxMDguMTQ4IDYxNy4yMjcgOTIuMiA2MTcuMjI3IDkyLjJMNjQ3Ljk2IDYxLjQ2NjdMNzA5LjQyNyAwSDQ4NS4zMjlIMzczLjI4MUgzMTcuMjU2QzMxNy4yNTYgMCAyOTQuNzM5IDAuNjAxOTA1IDI3NC4wMzggNy42ODMzM0MyNDQuNTg3IDE3Ljc1NzggMjA2LjE2OCA1Ny42MjUgMjA2LjE2OCA1Ny42MjVMMTUxLjEwNCAxMTUuMjVMNDAuOTc2NiAyMzAuNVoiLz48cGF0aCBkPSJNNjY4LjQ0OSAyMzAuNUg0NDUuNjMzTDM5MC41NjkgMjg0LjI4M0wzNjEuNzU2IDMxMS4xNzVDMzYxLjc1NiAzMTEuMTc1IDM0Ni45MjQgMzIzLjk0NiAzMzIuOTQ0IDMzMC4zODNDMzE0LjMyIDMzOC45NTkgMjgwLjQ0MSAzMzguMDY3IDI4MC40NDEgMzM4LjA2N0gyMjcuOTM4SDE3NS40MzVDMTc1LjQzNSAzMzguMDY3IDE0NC4xMTYgMzM3LjE3MSAxMjUuNDk0IDM0NS43NUMxMTAuMDc3IDM1Mi44NTIgOTIuMTk5MyAzNjguOCA5Mi4xOTkzIDM2OC44TDYxLjQ2NTkgMzk5LjUzM0wtMC4wMDA3MzI0MjIgNDYxSDIyNC4wOTZIMzM2LjE0NUgzOTIuMTY5QzM5Mi4xNjkgNDYxIDQxNC42ODcgNDYwLjM5OCA0MzUuMzg4IDQ1My4zMTdDNDY0LjgzOSA0NDMuMjQyIDUwMy4yNTggNDAzLjM3NSA1MDMuMjU4IDQwMy4zNzVMNTU4LjMyMSAzNDUuNzVMNjY4LjQ0OSAyMzAuNVoiLz48L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDAsMjQwKSBzY2FsZSgwLjExKSI+PHBhdGggZD0iTTQwLjk3NjYgMjMwLjVIMjYzLjc5M0wzMTguODU3IDE3Ni43MTdMMzQ3LjY3IDE0OS44MjVDMzQ3LjY3IDE0OS44MjUgMzYyLjUwMiAxMzcuMDU0IDM3Ni40ODIgMTMwLjYxN0MzOTUuMTA2IDEyMi4wNDEgNDI4Ljk4NSAxMjIuOTMzIDQyOC45ODUgMTIyLjkzM0g0ODEuNDg4SDUzMy45OUM1MzMuOTkgMTIyLjkzMyA1NjUuMzEgMTIzLjgyOSA1ODMuOTMyIDExNS4yNUM1OTkuMzQ4IDEwOC4xNDggNjE3LjIyNyA5Mi4yIDYxNy4yMjcgOTIuMkw2NDcuOTYgNjEuNDY2N0w3MDkuNDI3IDBINDg1LjMyOUgzNzMuMjgxSDMxNy4yNTZDMzE3LjI1NiAwIDI5NC43MzkgMC42MDE5MDUgMjc0LjAzOCA3LjY4MzMzQzI0NC41ODcgMTcuNzU3OCAyMDYuMTY4IDU3LjYyNSAyMDYuMTY4IDU3LjYyNUwxNTEuMTA0IDExNS4yNUw0MC45NzY2IDIzMC41WiIvPjxwYXRoIGQ9Ik02NjguNDQ5IDIzMC41SDQ0NS42MzNMMzkwLjU2OSAyODQuMjgzTDM2MS43NTYgMzExLjE3NUMzNjEuNzU2IDMxMS4xNzUgMzQ2LjkyNCAzMjMuOTQ2IDMzMi45NDQgMzMwLjM4M0MzMTQuMzIgMzM4Ljk1OSAyODAuNDQxIDMzOC4wNjcgMjgwLjQ0MSAzMzguMDY3SDIyNy45MzhIMTc1LjQzNUMxNzUuNDM1IDMzOC4wNjcgMTQ0LjExNiAzMzcuMTcxIDEyNS40OTQgMzQ1Ljc1QzExMC4wNzcgMzUyLjg1MiA5Mi4xOTkzIDM2OC44IDkyLjE5OTMgMzY4LjhMNjEuNDY1OSAzOTkuNTMzTC0wLjAwMDczMjQyMiA0NjFIMjI0LjA5NkgzMzYuMTQ1SDM5Mi4xNjlDMzkyLjE2OSA0NjEgNDE0LjY4NyA0NjAuMzk4IDQzNS4zODggNDUzLjMxN0M0NjQuODM5IDQ0My4yNDIgNTAzLjI1OCA0MDMuMzc1IDUwMy4yNTggNDAzLjM3NUw1NTguMzIxIDM0NS43NUw2NjguNDQ5IDIzMC41WiIvPjwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDM4MCkgc2NhbGUoMC4wNzUpIj48cGF0aCBkPSJNNDAuOTc2NiAyMzAuNUgyNjMuNzkzTDMxOC44NTcgMTc2LjcxN0wzNDcuNjcgMTQ5LjgyNUMzNDcuNjcgMTQ5LjgyNSAzNjIuNTAyIDEzNy4wNTQgMzc2LjQ4MiAxMzAuNjE3QzM5NS4xMDYgMTIyLjA0MSA0MjguOTg1IDEyMi45MzMgNDI4Ljk4NSAxMjIuOTMzSDQ4MS40ODhINTMzLjk5QzUzMy45OSAxMjIuOTMzIDU2NS4zMSAxMjMuODI5IDU4My45MzIgMTE1LjI1QzU5OS4zNDggMTA4LjE0OCA2MTcuMjI3IDkyLjIgNjE3LjIyNyA5Mi4yTDY0Ny45NiA2MS40NjY3TDcwOS40MjcgMEg0ODUuMzI5SDM3My4yODFIMzE3LjI1NkMzMTcuMjU2IDAgMjk0LjczOSAwLjYwMTkwNSAyNzQuMDM4IDcuNjgzMzNDMjQ0LjU4NyAxNy43NTc4IDIwNi4xNjggNTcuNjI1IDIwNi4xNjggNTcuNjI1TDE1MS4xMDQgMTE1LjI1TDQwLjk3NjYgMjMwLjVaIi8+PHBhdGggZD0iTTY2OC40NDkgMjMwLjVINDQ1LjYzM0wzOTAuNTY5IDI4NC4yODNMMzYxLjc1NiAzMTEuMTc1QzM2MS43NTYgMzExLjE3NSAzNDYuOTI0IDMyMy45NDYgMzMyLjk0NCAzMzAuMzgzQzMxNC4zMiAzMzguOTU5IDI4MC40NDEgMzM4LjA2NyAyODAuNDQxIDMzOC4wNjdIMjI3LjkzOEgxNzUuNDM1QzE3NS40MzUgMzM4LjA2NyAxNDQuMTE2IDMzNy4xNzEgMTI1LjQ5NCAzNDUuNzVDMTEwLjA3NyAzNTIuODUyIDkyLjE5OTMgMzY4LjggOTIuMTk5MyAzNjguOEw2MS40NjU5IDM5OS41MzNMLTAuMDAwNzMyNDIyIDQ2MUgyMjQuMDk2SDMzNi4xNDVIMzkyLjE2OUMzOTIuMTY5IDQ2MSA0MTQuNjg3IDQ2MC4zOTggNDM1LjM4OCA0NTMuMzE3QzQ2NC44MzkgNDQzLjI0MiA1MDMuMjU4IDQwMy4zNzUgNTAzLjI1OCA0MDMuMzc1TDU1OC4zMjEgMzQ1Ljc1TDY2OC40NDkgMjMwLjVaIi8+PC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLDQ0MCkgc2NhbGUoMC4wOSkiPjxwYXRoIGQ9Ik00MC45NzY2IDIzMC41SDI2My43OTNMMzE4Ljg1NyAxNzYuNzE3TDM0Ny42NyAxNDkuODI1QzM0Ny42NyAxNDkuODI1IDM2Mi41MDIgMTM3LjA1NCAzNzYuNDgyIDEzMC42MTdDMzk1LjEwNiAxMjIuMDQxIDQyOC45ODUgMTIyLjkzMyA0MjguOTg1IDEyMi45MzNINDgxLjQ4OEg1MzMuOTlDNTMzLjk5IDEyMi45MzMgNTY1LjMxIDEyMy44MjkgNTgzLjkzMiAxMTUuMjVDNTk5LjM0OCAxMDguMTQ4IDYxNy4yMjcgOTIuMiA2MTcuMjI3IDkyLjJMNjQ3Ljk2IDYxLjQ2NjdMNzA5LjQyNyAwSDQ4NS4zMjlIMzczLjI4MUgzMTcuMjU2QzMxNy4yNTYgMCAyOTQuNzM5IDAuNjAxOTA1IDI3NC4wMzggNy42ODMzM0MyNDQuNTg3IDE3Ljc1NzggMjA2LjE2OCA1Ny42MjUgMjA2LjE2OCA1Ny42MjVMMTUxLjEwNCAxMTUuMjVMNDAuOTc2NiAyMzAuNVoiLz48cGF0aCBkPSJNNjY4LjQ0OSAyMzAuNUg0NDUuNjMzTDM5MC41NjkgMjg0LjI4M0wzNjEuNzU2IDMxMS4xNzVDMzYxLjc1NiAzMTEuMTc1IDM0Ni45MjQgMzIzLjk0NiAzMzIuOTQ0IDMzMC4zODNDMzE0LjMyIDMzOC45NTkgMjgwLjQ0MSAzMzguMDY3IDI4MC40NDEgMzM4LjA2N0gyMjcuOTM4SDE3NS40MzVDMTc1LjQzNSAzMzguMDY3IDE0NC4xMTYgMzM3LjE3MSAxMjUuNDk0IDM0NS43NUMxMTAuMDc3IDM1Mi44NTIgOTIuMTk5MyAzNjguOCA5Mi4xOTkzIDM2OC44TDYxLjQ2NTkgMzk5LjUzM0wtMC4wMDA3MzI0MjIgNDYxSDIyNC4wOTZIMzM2LjE0NUgzOTIuMTY5QzM5Mi4xNjkgNDYxIDQxNC42ODcgNDYwLjM5OCA0MzUuMzg4IDQ1My4zMTdDNDY0LjgzOSA0NDMuMjQyIDUwMy4yNTggNDAzLjM3NSA1MDMuMjU4IDQwMy4zNzVMNTU4LjMyMSAzNDUuNzVMNjY4LjQ0OSAyMzAuNVoiLz48L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAsNTAwKSBzY2FsZSgwLjA4KSI+PHBhdGggZD0iTTQwLjk3NjYgMjMwLjVIMjYzLjc5M0wzMTguODU3IDE3Ni43MTdMMzQ3LjY3IDE0OS44MjVDMzQ3LjY3IDE0OS44MjUgMzYyLjUwMiAxMzcuMDU0IDM3Ni40ODIgMTMwLjYxN0MzOTUuMTA2IDEyMi4wNDEgNDI4Ljk4NSAxMjIuOTMzIDQyOC45ODUgMTIyLjkzM0g0ODEuNDg4SDUzMy45OUM1MzMuOTkgMTIyLjkzMyA1NjUuMzEgMTIzLjgyOSA1ODMuOTMyIDExNS4yNUM1OTkuMzQ4IDEwOC4xNDggNjE3LjIyNyA5Mi4yIDYxNy4yMjcgOTIuMkw2NDcuOTYgNjEuNDY2N0w3MDkuNDI3IDBINDg1LjMyOUgzNzMuMjgxSDMxNy4yNTZDMzE3LjI1NiAwIDI5NC43MzkgMC42MDE5MDUgMjc0LjAzOCA3LjY4MzMzQzI0NC41ODcgMTcuNzU3OCAyMDYuMTY4IDU3LjYyNSAyMDYuMTY4IDU3LjYyNUwxNTEuMTA0IDExNS4yNUw0MC45NzY2IDIzMC41WiIvPjxwYXRoIGQ9Ik02NjguNDQ5IDIzMC41SDQ0NS42MzNMMzkwLjU2OSAyODQuMjgzTDM2MS43NTYgMzExLjE3NUMzNjEuNzU2IDMxMS4xNzUgMzQ2LjkyNCAzMjMuOTQ2IDMzMi45NDQgMzMwLjM4M0MzMTQuMzIgMzM4Ljk1OSAyODAuNDQxIDMzOC4wNjcgMjgwLjQ0MSAzMzguMDY3SDIyNy45MzhIMTc1LjQzNUMxNzUuNDM1IDMzOC4wNjcgMTQ0LjExNiAzMzcuMTcxIDEyNS40OTQgMzQ1Ljc1QzExMC4wNzcgMzUyLjg1MiA5Mi4xOTkzIDM2OC44IDkyLjE5OTMgMzY4LjhMNjEuNDY1OSAzOTkuNTMzTC0wLjAwMDczMjQyMiA0NjFIMjI0LjA5NkgzMzYuMTQ1SDM5Mi4xNjlDMzkyLjE2OSA0NjEgNDE0LjY4NyA0NjAuMzk4IDQzNS4zODggNDUzLjMxN0M0NjQuODM5IDQ0My4yNDIgNTAzLjI1OCA0MDMuMzc1IDUwMy4yNTggNDAzLjM3NUw1NTguMzIxIDM0NS43NUw2NjguNDQ5IDIzMC41WiIvPjwvZz4KICA8L2c+Cjwvc3ZnPgo="); -webkit-mask-image: var(--logo-mask); mask-image: var(--logo-mask); -webkit-mask-mode: luminance; mask-mode: luminance; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 120% 120%; mask-size: 120% 120%; /* Parallax: mask shifts opposite to pointer for depth effect */ -webkit-mask-position: calc(50% + (var(--pointer-from-left, 0.5) - 0.5) * -30px) calc(50% + (var(--pointer-from-top, 0.5) - 0.5) * -30px); mask-position: calc(50% + (var(--pointer-from-left, 0.5) - 0.5) * -30px) calc(50% + (var(--pointer-from-top, 0.5) - 0.5) * -30px); transition: filter 0.8s ease, mask-position 0.15s ease, -webkit-mask-position 0.15s ease; filter: brightness(0.66) contrast(1.33) saturate(0.33) opacity(0.5); animation: holo-bg 18s linear infinite; animation-play-state: running; --space: 5%; --angle: -45deg; background: transparent; background-image: repeating-linear-gradient( 0deg, var(--sunpillar-1) calc(var(--space) * 1), var(--sunpillar-2) calc(var(--space) * 2), var(--sunpillar-3) calc(var(--space) * 3), var(--sunpillar-4) calc(var(--space) * 4), var(--sunpillar-5) calc(var(--space) * 5), var(--sunpillar-6) calc(var(--space) * 6), var(--sunpillar-1) calc(var(--space) * 7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0,0%,0%,0.1) 12%, hsla(0,0%,0%,0.15) 20%, hsla(0,0%,0%,0.25) 120% ); background-position: 0 var(--background-y), var(--background-x) var(--background-y), center; background-blend-mode: color, hard-light; background-size: 500% 500%, 300% 300%, 200% 200%; background-repeat: repeat; } .login-shine::before, .login-shine::after { content: ''; position: absolute; inset: 0; border-radius: 0 24px 24px 0; background-position: center; background-size: cover; opacity: 0; transition: opacity 0.8s ease; } .login-shine::before { background-image: linear-gradient( 45deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3) ), radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%); background-size: 250% 250%, 100% 100%; background-position: var(--pointer-x) var(--pointer-y), center; background-blend-mode: color-dodge; filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2)) saturate(calc(0.5 + var(--pointer-from-center))); mix-blend-mode: luminosity; } .login-shine::after { background-image: repeating-linear-gradient( 0deg, var(--sunpillar-1) calc(var(--space) * 1), var(--sunpillar-2) calc(var(--space) * 2), var(--sunpillar-3) calc(var(--space) * 3), var(--sunpillar-4) calc(var(--space) * 4), var(--sunpillar-5) calc(var(--space) * 5), var(--sunpillar-6) calc(var(--space) * 6), var(--sunpillar-1) calc(var(--space) * 7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12% ); background-position: 0 var(--background-y), calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5); background-size: 200% 300%, 700% 700%; mix-blend-mode: difference; filter: brightness(0.8) contrast(1.5); } .login-card-holo:hover .login-shine { filter: brightness(0.85) contrast(1.5) saturate(0.5); animation-play-state: paused; } .login-card-holo:hover .login-shine::before, .login-card-holo:hover .login-shine::after { opacity: 1; } .login-glare { position: absolute; inset: 0; border-radius: 0 24px 24px 0; pointer-events: none; z-index: 9; overflow: hidden; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(248, 25%, 80%) 12%, hsla(207, 40%, 30%, 0.8) 90% ); mix-blend-mode: overlay; filter: brightness(0.8) contrast(1.2); opacity: calc(0.8 * var(--card-opacity)); transition: opacity 0.4s ease; } @keyframes holo-bg { 0% { background-position: 0 var(--background-y), 0 0, center; } 100% { background-position: 0 var(--background-y), 90% 90%, center; } }