/* The browser keeps the actual login snapshot above the authenticated document.
   Only the successful login arrival enables these rules; ordinary navigation skips them. */
@view-transition { navigation: auto; }
@media (hover:none) and (pointer:coarse) {
    @view-transition { navigation: none; }
    html.login-arrival-soft .main-area { animation:none; }
    html.login-turn-active::view-transition-old(root),
    html.login-turn-active::view-transition-new(root) { animation:none; }
}

html.login-turn-active::view-transition { pointer-events: none; }
html.login-turn-active::view-transition-group(root) {
    animation: none;
    perspective: max(1600px, 180vw);
    perspective-origin: left center;
}
html.login-turn-active::view-transition-image-pair(root) {
    isolation: auto;
    transform-style: preserve-3d;
}
html.login-turn-active::view-transition-old(root),
html.login-turn-active::view-transition-new(root) {
    mix-blend-mode: normal;
    backface-visibility: hidden;
    transform-origin: left center;
}
html.login-turn-active::view-transition-old(root) {
    z-index: 2;
    box-shadow: 18px 0 44px rgb(20 48 83 / 18%);
    animation: login-cover-turn 540ms cubic-bezier(.26, .72, .22, 1) both;
}
html.login-turn-active::view-transition-new(root) {
    z-index: 1;
    animation: login-page-settle 540ms cubic-bezier(.26, .72, .22, 1) both;
}
@keyframes login-cover-turn {
    0% { transform: rotateY(0deg); opacity: 1; }
    82% { opacity: 1; }
    100% { transform: rotateY(-96deg); opacity: 0; }
}
@keyframes login-page-settle {
    from { transform: translateX(10px) scale(.994); }
    to { transform: translateX(0) scale(1); }
}

/* Progressive fallback: no snapshot cloning, extra requests, or login delay. */
html.login-arrival-soft .main-area {
    animation: login-arrival-settle 160ms ease-out both;
}
@keyframes login-arrival-settle {
    from { opacity: .92; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 700px) {
    html.login-turn-active::view-transition-old(root),
    html.login-turn-active::view-transition-new(root) { animation-duration: 460ms; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html.login-arrival-soft .main-area { animation: none; }
    html.login-turn-active::view-transition-old(root),
    html.login-turn-active::view-transition-new(root) { animation: none; }
}