@view-transition {
    navigation: auto;
}

body.login-page .login-shell,
body.client-page .client-app,
body.draft-mode-page .draft-container {
    view-transition-name: pf-page-shell;
}

body.login-page .container,
body.client-page .left-panel {
    view-transition-name: pf-command-panel;
}

body.login-page .event-panel,
body.client-page .content-area {
    view-transition-name: pf-feature-panel;
}

body.modern-story-page .story-app-shell,
body.raid-game-context .battle-container,
body.raid-game-context #loading-screen {
    view-transition-name: pf-story-raid-shell;
}

body.modern-story-page .side-panel,
body.raid-game-context .statistics-panel {
    view-transition-name: pf-story-raid-side;
}

body.modern-story-page .story-map,
body.raid-game-context #stage-background {
    view-transition-name: pf-story-raid-main;
}

::view-transition-group(root) {
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(root) {
    animation: pf-root-out 560ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: pf-root-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

::view-transition-group(pf-page-shell) {
    animation-duration: 680ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(pf-page-shell),
::view-transition-old(pf-command-panel),
::view-transition-old(pf-feature-panel) {
    animation: pf-panel-out 460ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(pf-page-shell),
::view-transition-new(pf-command-panel),
::view-transition-new(pf-feature-panel) {
    animation: pf-panel-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

::view-transition-group(pf-command-panel),
::view-transition-group(pf-feature-panel),
::view-transition-group(pf-story-raid-shell),
::view-transition-group(pf-story-raid-side),
::view-transition-group(pf-story-raid-main) {
    animation-duration: 720ms;
}

@keyframes pf-root-out {
    to {
        opacity: 0;
        filter: blur(10px) saturate(0.82);
        transform: scale(0.985);
    }
}

@keyframes pf-root-in {
    from {
        opacity: 0;
        filter: blur(12px) saturate(1.16);
        transform: scale(1.015);
    }
}

@keyframes pf-panel-out {
    to {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(-18px) scale(0.98);
    }
}

@keyframes pf-panel-in {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(24px) scale(1.02);
    }
}

body.login-page.pf-login-redirecting .login-shell {
    pointer-events: none;
    animation: pf-login-shell-out 560ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.login-page.pf-login-redirecting #video-background {
    animation: pf-login-video-out 560ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.client-page.pf-login-arriving .client-app,
body.client-page.pf-login-arriving .social-sidebar,
body.client-page.pf-raid-to-client-arriving .client-app,
body.client-page.pf-raid-to-client-arriving .social-sidebar,
body.client-page.pf-raid-to-client-arriving .pass-widgets-container {
    animation: pf-client-arrive 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.client-page.pf-login-arriving::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    background: rgba(3, 8, 14, 0.64);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: pf-login-arrival-cover 980ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.client-page.pf-login-arriving #bg-video {
    animation: pf-login-client-video-in 980ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.client-page.pf-login-arriving:not(.pf-login-video-ready) #bg-video {
    opacity: 0;
}

body.modern-story-page.pf-story-to-raid-leaving .story-app-shell,
body.modern-story-page.pf-story-to-raid-leaving .stage-details,
body.raid-game-context.pf-raid-to-story-leaving .battle-container,
body.raid-game-context.pf-raid-to-story-leaving #loading-screen,
body.raid-game-context.pf-raid-to-story-leaving #game-over-container,
body.raid-game-context.pf-raid-to-client-leaving .battle-container,
body.raid-game-context.pf-raid-to-client-leaving #loading-screen,
body.raid-game-context.pf-raid-to-client-leaving #game-over-container {
    pointer-events: none;
    animation: pf-story-raid-leave 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.raid-game-context.pf-story-to-raid-arriving .battle-container,
body.raid-game-context.pf-story-to-raid-arriving #loading-screen,
body.modern-story-page.pf-raid-to-story-arriving .story-app-shell {
    animation: pf-story-raid-arrive 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.client-page.pf-client-to-draft-leaving .client-app,
body.client-page.pf-client-to-draft-leaving .social-sidebar {
    pointer-events: none;
    animation: pf-client-draft-leave 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.draft-mode-page.pf-client-to-draft-arriving .draft-container,
body.draft-mode-page.pf-client-to-draft-arriving .draft-settings-btn {
    animation: pf-client-draft-arrive 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pf-login-shell-out {
    to {
        opacity: 0;
        filter: blur(10px) saturate(0.9);
        transform: translateY(-14px) scale(0.99);
    }
}

@keyframes pf-login-video-out {
    to {
        filter: saturate(1.12) contrast(1.04) brightness(0.78) blur(3px);
        transform: scale(1.015);
    }
}

@keyframes pf-client-arrive {
    from {
        opacity: 0;
        filter: blur(14px) saturate(1.12);
        transform: translateY(24px) scale(1.015);
    }
}

@keyframes pf-login-arrival-cover {
    0%,
    32% {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
}

@keyframes pf-login-client-video-in {
    from {
        filter: brightness(0.36) saturate(0.72) blur(8px);
        transform: scale(1.018);
    }

    to {
        filter: brightness(0.5) saturate(0.8) blur(0);
        transform: scale(1);
    }
}

@keyframes pf-story-raid-leave {
    to {
        opacity: 0;
        filter: blur(12px) saturate(0.86) brightness(0.74);
        transform: translateY(-18px) scale(0.985);
    }
}

@keyframes pf-story-raid-arrive {
    from {
        opacity: 0;
        filter: blur(14px) saturate(1.16) brightness(1.1);
        transform: translateY(24px) scale(1.018);
    }
}

@keyframes pf-client-draft-leave {
    to {
        opacity: 0;
        filter: blur(12px) saturate(0.9) brightness(0.68);
        transform: translateY(-18px) scale(0.985);
    }
}

@keyframes pf-client-draft-arrive {
    from {
        opacity: 0;
        filter: blur(14px) saturate(1.14) brightness(1.08);
        transform: translateY(24px) scale(1.018);
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*),
    body.login-page.pf-login-redirecting .login-shell,
    body.login-page.pf-login-redirecting #video-background,
    body.client-page.pf-login-arriving::before,
    body.client-page.pf-login-arriving #bg-video,
    body.client-page.pf-login-arriving .client-app,
    body.client-page.pf-login-arriving .social-sidebar,
    body.client-page.pf-raid-to-client-arriving .client-app,
    body.client-page.pf-raid-to-client-arriving .social-sidebar,
    body.client-page.pf-raid-to-client-arriving .pass-widgets-container,
    body.modern-story-page.pf-story-to-raid-leaving .story-app-shell,
    body.modern-story-page.pf-story-to-raid-leaving .stage-details,
    body.raid-game-context.pf-raid-to-story-leaving .battle-container,
    body.raid-game-context.pf-raid-to-story-leaving #loading-screen,
    body.raid-game-context.pf-raid-to-story-leaving #game-over-container,
    body.raid-game-context.pf-raid-to-client-leaving .battle-container,
    body.raid-game-context.pf-raid-to-client-leaving #loading-screen,
    body.raid-game-context.pf-raid-to-client-leaving #game-over-container,
    body.raid-game-context.pf-story-to-raid-arriving .battle-container,
    body.raid-game-context.pf-story-to-raid-arriving #loading-screen,
    body.modern-story-page.pf-raid-to-story-arriving .story-app-shell,
    body.client-page.pf-client-to-draft-leaving .client-app,
    body.client-page.pf-client-to-draft-leaving .social-sidebar,
    body.draft-mode-page.pf-client-to-draft-arriving .draft-container,
    body.draft-mode-page.pf-client-to-draft-arriving .draft-settings-btn {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
    }
}