/* ============================================================
   AKORA APP LAUNCH V2
   Native PWA splash -> living Akora Y handoff
   ============================================================ */

html.akora-launch-pending {
    background:
        #f7f9f7;
}


html.akora-launch-pending body {
    overflow:
        hidden;
}


html.akora-launch-pending body > :not(#akora-launch-screen) {
    visibility:
        hidden !important;
}


.akora-launch-screen {
    position:
        fixed;

    inset:
        0;

    z-index:
        2147483000;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        #f7f9f7;

    color:
        #101c18;

    opacity:
        1;

    visibility:
        visible;
}


.akora-launch-screen.is-exiting {
    pointer-events:
        none;

    animation:
        akora-launch-v2-exit
        420ms
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        )
        forwards;
}


.akora-launch-center {
    display:
        flex;

    width:
        min(
            82vw,
            310px
        );

    flex-direction:
        column;

    align-items:
        center;

    transform:
        translateY(
            -3vh
        );
}


.akora-launch-mark-wrap {
    position:
        relative;

    display:
        grid;

    width:
        144px;

    height:
        144px;

    place-items:
        center;
}


.akora-launch-halo {
    position:
        absolute;

    inset:
        10px;

    border-radius:
        999px;

    background:
        radial-gradient(
            circle,
            rgba(
                8,
                116,
                86,
                0.09
            )
            0%,
            rgba(
                8,
                116,
                86,
                0.035
            )
            48%,
            rgba(
                8,
                116,
                86,
                0
            )
            74%
        );

    opacity:
        0;

    transform:
        scale(
            0.82
        );
}


.akora-launch-logo {
    width:
        106px;

    height:
        106px;

    overflow:
        visible;
}


/*
 * V2 intentionally begins with the COMPLETE Akora mark visible.
 * Android/Chromium has just shown the same static app mark.
 * This prevents the native splash from appearing to be replaced
 * by a second unrelated loading screen.
 */
.akora-launch-arm {
    fill:
        none;

    stroke:
        #087456;

    stroke-width:
        4.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    opacity:
        1;
}


.akora-launch-arm-left,
.akora-launch-arm-right {
    stroke-dasharray:
        14.142;

    stroke-dashoffset:
        0;
}


.akora-launch-arm-bottom {
    stroke-dasharray:
        11;

    stroke-dashoffset:
        0;
}


.akora-launch-node {
    fill:
        #087456;

    opacity:
        1;

    transform-box:
        fill-box;

    transform-origin:
        center;

    transform:
        translate(
            0,
            0
        )
        scale(
            1
        );
}


.akora-launch-junction {
    fill:
        #14b88c;

    opacity:
        0;

    transform-box:
        fill-box;

    transform-origin:
        center;
}


.akora-launch-brand {
    margin-top:
        3px;

    font-family:
        "Manrope",
        "DM Sans",
        sans-serif;

    font-size:
        29px;

    font-weight:
        800;

    letter-spacing:
        -1.6px;

    opacity:
        1;

    transform:
        translateY(
            0
        );
}


.akora-launch-links {
    margin-top:
        2px;

    color:
        #087456;

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.34em;

    text-transform:
        uppercase;

    opacity:
        1;

    transform:
        translateY(
            0
        );
}


/*
 * Phase 1:
 * The native still mark lands on this identical static frame.
 *
 * Phase 2:
 * Endpoint dots activate and travel into the center.
 *
 * Phase 3:
 * The three dots travel back to their endpoints while
 * rebuilding the Y behind them.
 */
.akora-launch-screen.is-running
.akora-launch-halo {
    animation:
        akora-launch-v2-halo
        1580ms
        ease-in-out
        80ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-node-left {
    animation:
        akora-launch-v2-node-left
        1450ms
        cubic-bezier(
            0.22,
            0.78,
            0.2,
            1
        )
        120ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-node-right {
    animation:
        akora-launch-v2-node-right
        1450ms
        cubic-bezier(
            0.22,
            0.78,
            0.2,
            1
        )
        190ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-node-bottom {
    animation:
        akora-launch-v2-node-bottom
        1450ms
        cubic-bezier(
            0.22,
            0.78,
            0.2,
            1
        )
        260ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-arm-left {
    animation:
        akora-launch-v2-arm-left
        1370ms
        cubic-bezier(
            0.22,
            0.78,
            0.2,
            1
        )
        210ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-arm-right {
    animation:
        akora-launch-v2-arm-right
        1370ms
        cubic-bezier(
            0.22,
            0.78,
            0.2,
            1
        )
        280ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-arm-bottom {
    animation:
        akora-launch-v2-arm-bottom
        1370ms
        cubic-bezier(
            0.22,
            0.78,
            0.2,
            1
        )
        350ms
        forwards;
}


.akora-launch-screen.is-running
.akora-launch-junction {
    animation:
        akora-launch-v2-junction
        430ms
        ease
        1550ms
        forwards;
}


@keyframes akora-launch-v2-node-left {
    0% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }

    9% {
        transform:
            translate(
                0,
                0
            )
            scale(
                1.18
            );
    }

    17% {
        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }

    43% {
        opacity:
            1;

        transform:
            translate(
                10px,
                10px
            )
            scale(
                0.84
            );
    }

    51% {
        opacity:
            1;

        transform:
            translate(
                10px,
                10px
            )
            scale(
                0.84
            );
    }

    100% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }
}


@keyframes akora-launch-v2-node-right {
    0% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }

    9% {
        transform:
            translate(
                0,
                0
            )
            scale(
                1.18
            );
    }

    17% {
        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }

    43% {
        opacity:
            1;

        transform:
            translate(
                -10px,
                10px
            )
            scale(
                0.84
            );
    }

    51% {
        opacity:
            1;

        transform:
            translate(
                -10px,
                10px
            )
            scale(
                0.84
            );
    }

    100% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }
}


@keyframes akora-launch-v2-node-bottom {
    0% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }

    9% {
        transform:
            translate(
                0,
                0
            )
            scale(
                1.18
            );
    }

    17% {
        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }

    43% {
        opacity:
            1;

        transform:
            translate(
                0,
                -11px
            )
            scale(
                0.84
            );
    }

    51% {
        opacity:
            1;

        transform:
            translate(
                0,
                -11px
            )
            scale(
                0.84
            );
    }

    100% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            );
    }
}


@keyframes akora-launch-v2-arm-left {
    0%,
    18% {
        opacity:
            1;

        stroke-dashoffset:
            0;
    }

    42% {
        opacity:
            0.08;

        stroke-dashoffset:
            14.142;
    }

    51% {
        opacity:
            1;

        stroke-dashoffset:
            14.142;
    }

    100% {
        opacity:
            1;

        stroke-dashoffset:
            0;
    }
}


@keyframes akora-launch-v2-arm-right {
    0%,
    18% {
        opacity:
            1;

        stroke-dashoffset:
            0;
    }

    42% {
        opacity:
            0.08;

        stroke-dashoffset:
            14.142;
    }

    51% {
        opacity:
            1;

        stroke-dashoffset:
            14.142;
    }

    100% {
        opacity:
            1;

        stroke-dashoffset:
            0;
    }
}


@keyframes akora-launch-v2-arm-bottom {
    0%,
    18% {
        opacity:
            1;

        stroke-dashoffset:
            0;
    }

    42% {
        opacity:
            0.08;

        stroke-dashoffset:
            11;
    }

    51% {
        opacity:
            1;

        stroke-dashoffset:
            11;
    }

    100% {
        opacity:
            1;

        stroke-dashoffset:
            0;
    }
}


@keyframes akora-launch-v2-junction {
    0% {
        opacity:
            0;

        transform:
            scale(
                0.2
            );
    }

    45% {
        opacity:
            1;

        transform:
            scale(
                1.5
            );
    }

    100% {
        opacity:
            0;

        transform:
            scale(
                0.6
            );
    }
}


@keyframes akora-launch-v2-halo {
    0% {
        opacity:
            0;

        transform:
            scale(
                0.82
            );
    }

    35% {
        opacity:
            0.7;

        transform:
            scale(
                0.96
            );
    }

    72% {
        opacity:
            1;

        transform:
            scale(
                1.06
            );
    }

    100% {
        opacity:
            0.55;

        transform:
            scale(
                1
            );
    }
}


@keyframes akora-launch-v2-exit {
    0% {
        opacity:
            1;

        visibility:
            visible;

        transform:
            scale(
                1
            );
    }

    70% {
        opacity:
            0;

        visibility:
            visible;

        transform:
            scale(
                1.012
            );
    }

    100% {
        opacity:
            0;

        visibility:
            hidden;

        transform:
            scale(
                1.018
            );
    }
}


@media (prefers-reduced-motion: reduce) {
    .akora-launch-screen *,
    .akora-launch-screen *::before,
    .akora-launch-screen *::after {
        animation-duration:
            1ms !important;

        animation-delay:
            0ms !important;

        transition-duration:
            1ms !important;
    }
}
/* ============================================================
   AKORA APP LAUNCH V2.3
   Native splash geometry alignment
   ============================================================ */

/*
 * Use the exact installed-app icon as the first web frame.
 * Android owns the native splash, so CSS cannot force Android's
 * exact device-specific dp scaling. Reusing the exact icon asset
 * and matching the following geometry produces the cleanest
 * possible continuation into the web animation.
 */

.akora-launch-mark-wrap {
    width:
        126px;

    height:
        126px;
}


.akora-launch-native-icon {
    position:
        absolute;

    z-index:
        3;

    width:
        96px;

    height:
        96px;

    object-fit:
        contain;

    opacity:
        1;

    transform:
        scale(
            1
        );

    transform-origin:
        center;
}


.akora-launch-logo {
    position:
        absolute;

    z-index:
        2;

    /*
     * The Y geometry occupies only part of its 48x48 viewBox.
     * 116px makes the visible Y closely match the Y contained
     * inside the 96px production app-icon square.
     */
    width:
        116px;

    height:
        116px;

    opacity:
        1;
}


.akora-launch-halo {
    z-index:
        1;
}


.akora-launch-brand {
    margin-top:
        13px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.2;

    font-weight:
        600;

    letter-spacing:
        0;

    color:
        #101c18;

    opacity:
        1;

    transform:
        none;
}


/*
 * V2.3 uses the actual manifest name as one line.
 * Keep this fallback hidden if an older Links element somehow
 * survives a manual merge.
 */
.akora-launch-links {
    display:
        none !important;
}


.akora-launch-screen.is-running
.akora-launch-native-icon {
    animation:
        akora-launch-v2-3-native-icon
        520ms
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        )
        250ms
        forwards;
}


@keyframes akora-launch-v2-3-native-icon {
    0%,
    24% {
        opacity:
            1;

        transform:
            scale(
                1
            );
    }

    100% {
        opacity:
            0;

        transform:
            scale(
                1.018
            );

        visibility:
            hidden;
    }
}


/*
 * The native-name position is deliberately static throughout the
 * handoff. Only the icon changes from the green square into the
 * living Y, preventing a second wordmark jump underneath it.
 */
.akora-launch-screen.is-running
.akora-launch-brand {
    animation:
        none;
}
/* ============================================================
   AKORA APP LAUNCH V2.4
   Remove duplicate green-square web layer
   ============================================================ */

/*
 * Android/Chromium already owns the native green-square splash.
 * The web layer must NOT draw that green square again.
 * Keep only the aligned living Y + fixed Akora Links label.
 */

.akora-launch-native-icon {
    display:
        none !important;
}


/*
 * Preserve the V2.3 geometry that matched the native mark,
 * but start directly with the Y itself.
 */
.akora-launch-mark-wrap {
    width:
        126px;

    height:
        126px;
}


.akora-launch-logo {
    width:
        116px;

    height:
        116px;
}


.akora-launch-brand {
    margin-top:
        13px;

    font-size:
        16px;

    line-height:
        1.2;

    font-weight:
        600;

    letter-spacing:
        0;

    opacity:
        1;

    transform:
        none;
}