/* Shared panel identities allow native navigation to slide between auth pages. */
@view-transition { navigation: auto; }
.ks-auth-shell { grid-template-columns:1fr 1fr; }
.ks-auth-form { grid-column:1; grid-row:1; background:#f7f6f2; view-transition-name:auth-form; }
.ks-auth-photo { grid-column:2; grid-row:1; view-transition-name:auth-photo; }
.ks-auth-login .ks-auth-form { grid-column:2; }
.ks-auth-login .ks-auth-photo { grid-column:1; }
.ks-auth-form .card { animation:auth-form-arrive .65s cubic-bezier(.22,1,.36,1) both; }
.ks-auth-photo>img { object-position:center; }
.ks-auth-photo:before { content:""; position:absolute; inset:-20%; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 65% 25%,#f1d8a830,transparent 55%); animation:auth-light 8s ease-in-out infinite alternate; }
.ks-auth-story { z-index:2; }
::view-transition-group(auth-form),::view-transition-group(auth-photo) { animation-duration:.85s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(auth-photo),::view-transition-new(auth-photo) { height:100%; object-fit:cover; }
@keyframes auth-form-arrive { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes auth-light { from { opacity:.3; transform:translate(-3%,0); } to { opacity:1; transform:translate(3%,3%); } }
@media(max-width:767px) { .ks-auth-shell { display:flex; } .ks-auth-form { width:100%; } ::view-transition-group(auth-form) { animation-duration:.35s; } }
@media(prefers-reduced-motion:reduce) { @view-transition { navigation:none; } .ks-auth-form .card,.ks-auth-photo:before { animation:none; } }

/* The story travels independently from the image and form between both routes. */
.ks-auth-story { view-transition-name:auth-story; max-width:560px; bottom:52px; }
.ks-auth-story h2 { font-size:clamp(30px,3vw,46px); max-width:20ch; line-height:1.12; text-wrap:balance; }
.ks-auth-story p { line-height:1.6; max-width:34ch; margin-bottom:18px; }
.ks-auth-story-detail { max-width:34ch; margin-top:22px; font-size:14px; line-height:1.7; color:#eee9df; text-wrap:pretty; }
.ks-auth-register .ks-auth-story { top:104px; bottom:auto; }
.ks-auth-register .ks-auth-photo:after { background:linear-gradient(180deg,#0809089c, #08090866 35%,transparent 70%); }
.ks-auth-register .ks-auth-photo>img { object-position:center 65%; }
::view-transition-group(auth-form),::view-transition-group(auth-photo) { animation-duration:1.1s; animation-timing-function:cubic-bezier(.76,0,.24,1); }
::view-transition-group(auth-story) { z-index:5; animation-duration:1.25s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(auth-story) { animation:auth-story-out .35s ease both; }
::view-transition-new(auth-story) { animation:auth-story-in .8s .18s both; }
::view-transition-old(auth-photo) { animation:auth-image-out .65s both; }
::view-transition-new(auth-photo) { animation:auth-image-in 1.1s both; }
@keyframes auth-story-out { to { opacity:0; filter:blur(3px); } }
@keyframes auth-story-in { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:blur(0); } }
@keyframes auth-image-out { to { opacity:0; scale:1.04; } }
@keyframes auth-image-in { from { opacity:0; scale:1.06; } to { opacity:1; scale:1; } }
@media(prefers-reduced-motion:reduce) { ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; } }

.ks-auth-form{position:relative}.ks-auth-form>.ks-auth-languages{position:absolute;top:36px;right:32px;padding:0!important;flex:none}

/* Cyrillic headings use a lighter editorial face and shorter line lengths. */
html:lang(uk) .ks-auth-story h2 {
    font-family:"Cormorant Garamond", Georgia, serif;
    font-weight:400;
    font-size:clamp(32px,3.2vw,48px);
    line-height:1.08;
    letter-spacing:-.025em;
    max-width:20ch;
    text-wrap:balance;
}
html:lang(uk) .ks-auth-heading {
    font-family:"Cormorant Garamond", Georgia, serif;
    font-weight:500;
    letter-spacing:-.02em;
}
html:lang(uk) .ks-auth-story p { letter-spacing:.12em; max-width:40ch; }
html:lang(uk) .ks-auth-story-detail { max-width:36ch; }

/* Keep form titles subordinate to the task, including longer translations. */
.ks-auth-heading{font-size:clamp(30px,2.6vw,42px);line-height:1.15;text-wrap:balance}