/* * Splash screen i animacje wejścia — wyłącznie ekran `/logowanie`. * Dołączane w `pages/security/login.html.twig`, nie w `base_auth.html.twig`. */ :root { --login-ease: cubic-bezier(.22, .61, .36, 1); --login-rise: 18px; } /* dopóki splash pracuje, treść pod spodem nie może zostać przewinięta */ .login-splash-active { overflow: hidden; } .login-splash { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--zpd-bg-inverse); transition: opacity .55s var(--login-ease), visibility .55s; } .login-splash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--zpd-color-leaf-500) 24%, transparent), transparent 62%); opacity: 0; animation: login-glow 2.4s var(--login-ease) infinite; } .login-splash[hidden] { display: none; } .login-splash--done { opacity: 0; visibility: hidden; pointer-events: none; } .login-splash__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 30px; padding: 24px; } /* logo jest ciemne (jak w `.auth-brand`), więc na ciemnym tle odwracamy je do bieli */ .login-splash__logo { width: clamp(180px, 34vw, 240px); height: auto; filter: invert(1); animation: login-logo-in .7s var(--login-ease) both; } .login-splash__bar { overflow: hidden; width: 148px; height: 3px; background: color-mix(in srgb, var(--zpd-text-on-inverse) 16%, transparent); border-radius: 999px; animation: login-fade-up .6s var(--login-ease) .16s both; } .login-splash__bar span { display: block; width: 40%; height: 100%; background: var(--zpd-color-leaf-400); border-radius: inherit; animation: login-sweep 1.25s var(--login-ease) infinite; } /* * Animacje wejścia treści. Startują dopiero po zdjęciu splasha * (`.login-ready` na ``), żeby nie odegrały się „pod” overlayem — * do tego czasu strona pod spodem jest przezroczysta. */ .login-splash-active .auth-page { opacity: 0; } .login-ready .auth-page { opacity: 1; } /* kolumna boczna wjeżdża jako całość, jej treść dodatkowo stagguje */ .login-ready .auth-aside { animation: login-aside-in 1.1s var(--login-ease) both; } .login-ready .auth-aside::before { animation: login-veil-in 1.4s var(--login-ease) .2s both; } .login-ready .auth-aside > .auth-brand, .login-ready .auth-aside__eyebrow, .login-ready .auth-aside h2, .login-ready .auth-aside__text, .login-ready .auth-aside__footer { animation: login-fade-up .9s var(--login-ease) both; } .login-ready .auth-aside > .auth-brand { animation-delay: .18s; } .login-ready .auth-aside__eyebrow { animation-delay: .3s; } .login-ready .auth-aside h2 { animation-delay: .38s; } .login-ready .auth-aside__text { animation-delay: .48s; } .login-ready .auth-aside__footer { animation-delay: .58s; } .login-ready .auth-card { animation: login-card-in .9s var(--login-ease) both; } .login-ready .auth-card > * { animation: login-fade-up .8s var(--login-ease) both; } .login-ready .auth-card > :nth-child(1) { animation-delay: .16s; } .login-ready .auth-card > :nth-child(2) { animation-delay: .24s; } .login-ready .auth-card > :nth-child(3) { animation-delay: .32s; } .login-ready .auth-card > :nth-child(4) { animation-delay: .4s; } .login-ready .auth-card > :nth-child(5) { animation-delay: .48s; } /* pola formularza po kolei — `.auth-form` to grid, więc dzieci są w DOM-owej kolejności */ .login-ready .auth-form > * { animation: login-fade-up .7s var(--login-ease) both; } .login-ready .auth-form > :nth-child(1) { animation-delay: .46s; } .login-ready .auth-form > :nth-child(2) { animation-delay: .54s; } .login-ready .auth-form > :nth-child(3) { animation-delay: .62s; } .login-ready .auth-form > :nth-child(4) { animation-delay: .7s; } .login-ready .auth-form > :nth-child(5) { animation-delay: .78s; } .login-ready .auth-form > :nth-child(6) { animation-delay: .86s; } @keyframes login-fade-up { from { opacity: 0; transform: translateY(var(--login-rise)); } to { opacity: 1; transform: none; } } @keyframes login-card-in { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes login-aside-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } @keyframes login-veil-in { from { opacity: 0; } to { opacity: 1; } } @keyframes login-logo-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes login-glow { 0%, 100% { opacity: .25; } 50% { opacity: .6; } } @keyframes login-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } } @media (prefers-reduced-motion: reduce) { .login-splash, .login-splash::after, .login-splash__logo, .login-splash__bar, .login-splash__bar span, .login-ready .login-reveal, .login-ready .auth-aside, .login-ready .auth-aside::before, .login-ready .auth-card, .login-ready .auth-card > *, .login-ready .auth-form > * { animation: none !important; opacity: 1; transform: none; } .login-splash { transition: none; } }