/**
 * Logozavr — full-page Activity-style transitions (MPA / TWA / WebView).
 * No shared chrome (header/dock stay normal document content).
 */

@view-transition {
    navigation: auto;
}

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

::view-transition-old(root) {
    animation-name: lg-vt-fade-out;
}

::view-transition-new(root) {
    animation-name: lg-vt-fade-in;
}

@keyframes lg-vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes lg-vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Soft cover while the next document loads (handoff + click feedback) */
#lg-nav-cover {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: #f8fafc;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

html.lg-nav-cover #lg-nav-cover,
html.lg-nav-leaving #lg-nav-cover {
    opacity: 1;
    visibility: visible;
}

html.lg-nav-cover-out #lg-nav-cover {
    opacity: 0;
    visibility: hidden;
}

.lg-nav-cover__mark {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(15, 45, 82, 0.1);
    background: #fff center / 56px 56px no-repeat;
    /* Fallback if critical CSS icon URL did not apply */
    background-image: url("/assets/svg/icon.svg");
}

/* Внешнее кольцо — корпоративный синий (#0f2d52), вращение против часовой стрелки */
.lg-nav-cover__mark::before {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 2.5px solid rgba(15, 45, 82, 0.12);
    border-top-color: #0f2d52;
    border-right-color: #0f2d52;
    animation: lgNavSpinCcw 1.35s linear infinite;
    pointer-events: none;
    box-sizing: border-box;
    will-change: transform;
}

/* Внутреннее кольцо — изумруд (#059669), вращение по часовой стрелке */
.lg-nav-cover__mark::after {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    border: 2.5px solid rgba(5, 150, 105, 0.15);
    border-bottom-color: #059669;
    border-left-color: #059669;
    animation: lgNavSpinCw 0.95s linear infinite;
    pointer-events: none;
    box-sizing: border-box;
    will-change: transform;
}

@keyframes lgNavSpinCw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes lgNavSpinCcw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    #lg-nav-cover {
        transition: none;
    }

    .lg-nav-cover__mark {
        box-shadow: none;
    }

    .lg-nav-cover__mark::before,
    .lg-nav-cover__mark::after {
        animation: none;
    }
}