:root {
    --blue: #35c8ff;
    --blue-hot: #d9f8ff;
    --black: #010308;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
}

body {
    overflow: hidden;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

#markiv-app {
    width: 100%;
    height: 100%;
}

/* ==================================================
   LOADER
================================================== */

#loader {
    position: relative;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(20,145,205,.13),
            transparent 31%
        ),
        #010308;
}

.scene {
    position: relative;

    width: min(90vw, 350px);
    height: min(90vw, 350px);

    max-width: 350px;
    max-height: 350px;
}

/* ==================================================
   AMBIENT
================================================== */

.ambient {
    position: absolute;

    width: 82%;
    height: 82%;

    left: 9%;
    top: 9%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40,190,255,.14),
            transparent 68%
        );

    filter: blur(30px);

    animation:
        ambientPulse 3s ease-in-out infinite;
}

/* ==================================================
   ORBIT
   ЭТО ЕДИНСТВЕННЫЙ ОБЪЕКТ,
   КОТОРЫЙ ВРАЩАЕТСЯ
================================================== */

.orbit {
    position: absolute;

    inset: 0;

    z-index: 12;

    transform-origin: center center;

    will-change: transform;
}

/* ==================================================
   CONNECTOR
================================================== */

#connector {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}

/*
 * Линии изначально НЕ ВИДНЫ.
 */

.connector-line {
    fill: none;

    stroke: var(--blue);

    stroke-width: 1.35;

    stroke-linecap: round;

    opacity: 0;

    filter:
        drop-shadow(0 0 5px var(--blue))
        drop-shadow(0 0 13px rgba(53,200,255,.7));

    /*
     * Очень важный момент:
     * линия не существует визуально,
     * пока её не активировали.
     */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* ==================================================
   GLYPHS
================================================== */

.glyph-ring {
    position: absolute;

    inset: 0;

    transform-origin: center;
}

.glyph {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 45px;
    height: 45px;

    margin-left: -22.5px;
    margin-top: -22.5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(35,145,190,.21),
            rgba(1,8,13,.96) 70%
        );

    border:
        1px solid rgba(53,200,255,.30);

    box-shadow:
        0 0 9px rgba(53,200,255,.08),
        inset 0 0 16px rgba(53,200,255,.07);

    opacity: 0;
}

.glyph svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: var(--blue);

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 0 5px var(--blue));
}

.glyph.active {
    border-color:
        rgba(160,240,255,.95);

    background:
        radial-gradient(
            circle,
            rgba(53,200,255,.30),
            rgba(1,8,13,.94) 68%
        );

    box-shadow:
        0 0 18px rgba(53,200,255,.95),
        0 0 42px rgba(53,200,255,.35),
        inset 0 0 18px rgba(53,200,255,.25);
}

/* ==================================================
   TRIANGLE
   СТРОГО ЦЕНТР
================================================== */

.triangle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 205px;
    height: 178px;

    transform:
        translate(-50%, -50%);

    z-index: 5;
}

#brickField {
    position: absolute;

    inset: 0;

    overflow: visible;
}

/* ==================================================
   BRICKS
================================================== */

.brick {
    position: absolute;

    height: 13px;

    border:
        1px solid rgba(53,200,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(35,130,170,.25),
            rgba(1,12,18,.92)
        );

    box-shadow:
        inset 0 0 7px rgba(53,200,255,.10),
        0 0 4px rgba(53,200,255,.10);

    opacity: 0;

    will-change:
        transform,
        opacity;
}

/* ==================================================
   TRIANGLE EDGES
================================================== */

.triangle-edge {
    position: absolute;

    z-index: 7;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue-hot),
            var(--blue),
            transparent
        );

    box-shadow:
        0 0 8px var(--blue),
        0 0 22px rgba(53,200,255,.65);

    opacity: 0;
}

.edge-left {
    width: 2px;
    height: 205px;

    left: 50%;
    top: -13px;

    transform:
        rotate(-29.8deg);

    transform-origin:
        top center;
}

.edge-right {
    width: 2px;
    height: 205px;

    right: 50%;
    top: -13px;

    transform:
        rotate(29.8deg);

    transform-origin:
        top center;
}

.edge-bottom {
    width: 205px;
    height: 2px;

    left: 0;
    bottom: 0;
}

/* ==================================================
   EYE
================================================== */

.eye {
    position: absolute;

    left: 50%;
    top: 18%;

    width: 105px;
    height: 59px;

    transform:
        translate(-50%, -50%)
        scaleY(.015);

    transform-origin:
        center center;

    opacity: 0;

    z-index: 30;

    will-change:
        transform,
        opacity;
}

.eye-svg {
    width: 100%;
    height: 100%;

    overflow: visible;

    filter:
        drop-shadow(0 0 7px var(--blue))
        drop-shadow(0 0 22px rgba(53,200,255,.55));
}

.eye-shadow {
    fill:
        rgba(0,8,13,.96);

    stroke:
        rgba(25,120,155,.7);

    stroke-width:
        1;
}

.eye-outline {
    fill:
        rgba(1,7,11,.94);

    stroke:
        var(--blue-hot);

    stroke-width:
        2.5;

    stroke-linejoin:
        round;
}

.iris {
    fill:
        rgba(20,130,175,.18);

    stroke:
        var(--blue-hot);

    stroke-width:
        2.2;
}

.pupil {
    fill:
        #000;

    filter:
        drop-shadow(0 0 5px #000);
}

.eye-glint {
    fill:
        #fff;

    filter:
        drop-shadow(0 0 6px #fff);
}

/* ==================================================
   FLASH
================================================== */

.flash {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 15px;
    height: 15px;

    transform:
        translate(-50%, -50%)
        scale(0);

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 30px white,
        0 0 80px var(--blue);

    opacity: 0;

    z-index: 60;
}

/* ==================================================
   MAIN
================================================== */

.home {
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(53,200,255,.08),
            transparent 45%
        ),
        #010308;
}

.brand-mark {
    font-size: 58px;
    font-weight: 900;

    color:
        var(--blue);

    text-shadow:
        0 0 25px rgba(53,200,255,.8);
}

.brand {
    font-size: 38px;
    font-weight: 700;

    letter-spacing: 2px;
}

.subtitle {
    margin-top: 8px;

    color:
        #79aabd;
}

.menu {
    display: grid;

    grid-template-columns:
        repeat(2, 140px);

    gap: 12px;

    margin-top: 28px;
}

.menu button {
    min-height: 52px;

    border:
        1px solid rgba(53,200,255,.4);

    border-radius: 14px;

    background:
        rgba(8,30,43,.75);

    color:
        white;

    font-size: 16px;
}

/* ==================================================
   ANIMATIONS
================================================== */

@keyframes ambientPulse {

    0%, 100% {
        opacity: .35;
        transform: scale(.90);
    }

    50% {
        opacity: .80;
        transform: scale(1.08);
    }
}

/* ==================================================
   MARKIV LOADER — GEOMETRY V6
================================================== */

/* Настоящий круг вместо многоугольника */
.orbit-circle {
    fill: none;

    stroke: var(--blue);

    stroke-width: 1.15;

    opacity: 0;

    stroke-linecap: round;

    filter:
        drop-shadow(0 0 5px var(--blue))
        drop-shadow(0 0 15px rgba(53,200,255,.55));
}

/* Настоящий круг должен прорисовываться,
   а не появляться готовым */
.orbit-circle.active {
    opacity: 1;
}

/* Круги символов */
.glyph {
    width: 43px;
    height: 43px;

    margin-left: -21.5px;
    margin-top: -21.5px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(34,104,135,.18),
            rgba(1,5,10,.97) 72%
        );

    border:
        1px solid rgba(53,200,255,.34);

    box-shadow:
        0 0 7px rgba(53,200,255,.08),
        inset 0 0 15px rgba(53,200,255,.05);

    backdrop-filter: blur(2px);
}

/* Активированный символ */
.glyph.active {
    border-color:
        rgba(174,244,255,.98);

    background:
        radial-gradient(
            circle,
            rgba(53,200,255,.32),
            rgba(1,8,13,.95) 68%
        );

    box-shadow:
        0 0 14px rgba(53,200,255,.9),
        0 0 32px rgba(53,200,255,.45),
        inset 0 0 18px rgba(53,200,255,.22);
}

/* --------------------------------------------------
   ПИРАМИДА
-------------------------------------------------- */

.triangle {
    width: 178px;
    height: 155px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}

/* Более тёмные, глубокие кирпичи */
.brick {
    height: 11px;

    border:
        1px solid rgba(48,155,195,.42);

    background:
        linear-gradient(
            145deg,
            rgba(22,58,73,.42) 0%,
            rgba(3,13,19,.96) 48%,
            rgba(1,7,11,.99) 100%
        );

    box-shadow:
        inset 1px 1px 0 rgba(112,218,255,.08),
        inset -2px -2px 5px rgba(0,0,0,.85),
        0 0 3px rgba(35,150,195,.10);

    opacity: 0;
}

/* Неровная фактура — кирпичи не выглядят игрушечными */
.brick:nth-child(3n) {
    border-color:
        rgba(38,128,162,.34);

    box-shadow:
        inset 0 0 7px rgba(0,0,0,.8);
}

.brick:nth-child(4n) {
    background:
        linear-gradient(
            120deg,
            rgba(12,43,56,.30),
            rgba(1,8,13,.98)
        );
}

.brick:nth-child(5n) {
    filter:
        brightness(.72);
}

.brick:nth-child(7n) {
    box-shadow:
        inset 0 0 8px rgba(0,0,0,.95),
        0 0 2px rgba(53,200,255,.08);
}

/* Контур треугольника теперь строго по его новым размерам */
.edge-left,
.edge-right {
    height: 179px;
    top: -12px;
}

.edge-left {
    transform:
        rotate(-29.8deg);
}

.edge-right {
    transform:
        rotate(29.8deg);
}

.edge-bottom {
    width: 178px;
}

/* --------------------------------------------------
   НОВЫЙ МИСТИЧЕСКИЙ ГЛАЗ
-------------------------------------------------- */

.eye {
    width: 72px;
    height: 42px;

    left: 50%;
    top: 25%;

    transform:
        translate(-50%, -50%)
        scaleY(.015);

    opacity: 0;

    filter:
        drop-shadow(0 0 7px rgba(53,200,255,.9))
        drop-shadow(0 0 18px rgba(53,200,255,.45));
}

.eye-svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}

.eye-symbol {
    fill:
        rgba(0,4,8,.98);

    stroke:
        rgba(103,224,255,.95);

    stroke-width:
        2;

    stroke-linejoin:
        round;
}

/* Никакой радужки.
   Только холодная чёрная вертикальная щель. */
.eye-pupil {
    fill:
        #000;

    stroke:
        #02070a;

    stroke-width:
        1;

    filter:
        drop-shadow(0 0 4px rgba(0,0,0,.95));
}

/* --------------------------------------------------
   ОТДЕЛЬНОЕ СВЕЧЕНИЕ ПИРАМИДЫ
-------------------------------------------------- */

.triangle::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 150px;
    height: 24px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(53,200,255,.20),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   MARKIV LOADER — EXACT TRIANGLE GEOMETRY
================================================== */

/* Боковые энергетические полосы точно совпадают
   с геометрией треугольника 178 × 155 */
.triangle-edge {
    position: absolute;
    width: 2px;
    height: 178.734px;
    top: 77.5px;
    margin: 0;
    transform-origin: 50% 50%;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        rgba(53,200,255,.15),
        rgba(103,224,255,.95) 48%,
        rgba(53,200,255,.15)
    );
    box-shadow:
        0 0 5px rgba(53,200,255,.85),
        0 0 14px rgba(53,200,255,.35);
}

.edge-left {
    left: 44.5px;
    transform: translate(-50%, -50%) rotate(-29.82deg);
}

.edge-right {
    left: 133.5px;
    transform: translate(-50%, -50%) rotate(29.82deg);
}

.edge-bottom {
    left: 0;
    top: 155px;
    width: 178px;
    height: 2px;
    transform: none;
}

/* Жёсткий мистический зрачок */
.eye-pupil {
    fill: #000;
    stroke: rgba(103,224,255,.82);
    stroke-width: 1.15;
    filter:
        drop-shadow(0 0 3px rgba(53,200,255,.65))
        drop-shadow(0 0 7px rgba(0,0,0,.95));
}

/* ==================================================
   FINAL MARKIV GEOMETRY
================================================== */

/* Левая сторона: от вершины строго к левому нижнему углу */
.edge-left {
    left: 44.5px;
    top: 77.5px;
    height: 178.734px;
    transform:
        translate(-50%, -50%)
        rotate(29.864deg);
}

/* Правая сторона: от вершины строго к правому нижнему углу */
.edge-right {
    left: 133.5px;
    top: 77.5px;
    height: 178.734px;
    transform:
        translate(-50%, -50%)
        rotate(-29.864deg);
}

/* Нижнее ребро */
.edge-bottom {
    left: 0;
    top: 155px;
    width: 178px;
    height: 2px;
    transform: none;
}

/* Чуть более широкий мистический глаз */
.eye {
    width: 84px;
    height: 46px;
}

/* Энергетические потёки под глазом */
.eye::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 37px;
    width: 3px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 0 0 5px 5px;
    background:
        linear-gradient(
            to bottom,
            rgba(103,224,255,.9),
            rgba(53,200,255,.35) 45%,
            transparent
        );
    box-shadow:
        -13px 5px 0 -1px rgba(53,200,255,.45),
         13px 3px 0 -1px rgba(53,200,255,.42),
        -7px 12px 0 -1px rgba(53,200,255,.25),
         8px 10px 0 -1px rgba(53,200,255,.22);
    filter:
        drop-shadow(0 0 4px rgba(53,200,255,.75));
    opacity: .9;
}

.eye-pupil {
    rx: 4.2px;
    ry: 20px;
}


/* =========================================================
   MARKIV — STRICT TRIANGLE EDGES
========================================================= */

.triangle {
    position: absolute;
    width: 178px;
    height: 155px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
}

/* Старые декоративные линии полностью убираем */
.edge-left,
.edge-right,
.edge-bottom {
    pointer-events: none;
    z-index: 20;
}

/* Левая грань: ровно от вершины до левого нижнего угла */
.edge-left {
    left: 44.5px !important;
    top: 77.5px !important;
    width: 2px !important;
    height: 178.734px !important;
    margin: 0 !important;
    transform:
        translate(-50%, -50%)
        rotate(29.864deg) !important;
    transform-origin: 50% 50% !important;
}

/* Правая грань: ровно от вершины до правого нижнего угла */
.edge-right {
    left: 133.5px !important;
    top: 77.5px !important;
    width: 2px !important;
    height: 178.734px !important;
    margin: 0 !important;
    transform:
        translate(-50%, -50%)
        rotate(-29.864deg) !important;
    transform-origin: 50% 50% !important;
}

/* Нижнее ребро — строго горизонтальное */
.edge-bottom {
    left: 0 !important;
    top: 155px !important;
    width: 178px !important;
    height: 2px !important;
    margin: 0 !important;
    transform: none !important;
}

/* Кирпичики находятся ВНУТРИ геометрии */
.triangle .brick {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
}

/* Не позволяем кирпичикам вылезать за основание */
.triangle {
    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );
}

/* Линии должны быть видимы поверх внешнего края */
.edge-left,
.edge-right,
.edge-bottom {
    clip-path: none !important;
}


/* =========================================================
   MARKIV — FINAL TRIANGLE OUTLINE
========================================================= */

.triangle {
    overflow: visible !important;
    clip-path: none !important;
}

/* Убираем старые линии */
.triangle .edge-left,
.triangle .edge-right,
.triangle .edge-bottom {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/*
 * Одна математически точная треугольная рамка.
 * Она совпадает с геометрией кирпичной кладки.
 */
.triangle::before {
    content: "";
    position: absolute;
    inset: 0;

    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );

    background:
        linear-gradient(
            135deg,
            rgba(103,224,255,.98),
            rgba(53,200,255,.72)
        );

    filter:
        drop-shadow(0 0 4px rgba(53,200,255,.95))
        drop-shadow(0 0 13px rgba(53,200,255,.42));

    opacity: .9;

    pointer-events: none;
    z-index: 30;
}

/*
 * Внутренний тёмный треугольник.
 * Оставляет только тонкое световое ребро.
 */
.triangle::after {
    content: "";
    position: absolute;

    left: 2px;
    right: 2px;
    top: 3px;
    bottom: 2px;

    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );

    background:
        radial-gradient(
            ellipse at 50% 55%,
            rgba(5,18,26,.82),
            rgba(1,6,10,.98) 72%
        );

    pointer-events: none;
    z-index: 15;
}

/* Кирпичи поверх внутренней поверхности */
.triangle .brick {
    z-index: 20;
}

/* Чтобы нижняя грань была идеально читаемой */
.triangle .brick:last-child {
    margin-bottom: 0;
}


/* =========================================================
   REMOVE FAKE SOLID TRIANGLE
========================================================= */

.triangle::before {
    display: none !important;
    content: none !important;
}

.triangle::after {
    display: none !important;
    content: none !important;
}

/* Никакого clip-path на контейнере */
.triangle {
    clip-path: none !important;
    overflow: visible !important;
}

/* Возвращаем кирпичи на передний план */
.triangle .brick {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}


/* =========================================================
   STRICT OUTER EDGES
========================================================= */

.triangle .edge-left,
.triangle .edge-right,
.triangle .edge-bottom {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;

    pointer-events: none !important;

    z-index: 40 !important;

    margin: 0 !important;

    background:
        linear-gradient(
            to right,
            rgba(53,200,255,.10),
            rgba(125,235,255,.95),
            rgba(53,200,255,.10)
        ) !important;

    box-shadow:
        0 0 4px rgba(53,200,255,.95),
        0 0 12px rgba(53,200,255,.42) !important;
}

/* Вершина → левый нижний угол */
.triangle .edge-left {
    width: 2px !important;
    height: 177px !important;

    left: 44.5px !important;
    top: 77.5px !important;

    transform:
        translate(-50%, -50%)
        rotate(29.86deg) !important;

    transform-origin:
        center center !important;
}

/* Вершина → правый нижний угол */
.triangle .edge-right {
    width: 2px !important;
    height: 177px !important;

    left: 133.5px !important;
    top: 77.5px !important;

    transform:
        translate(-50%, -50%)
        rotate(-29.86deg) !important;

    transform-origin:
        center center !important;
}

/* Основание */
.triangle .edge-bottom {
    width: 178px !important;
    height: 2px !important;

    left: 0 !important;
    top: 154px !important;

    transform: none !important;
}

/*
 * Очень важно:
 * старые декоративные псевдоэлементы
 * не должны ничего рисовать.
 */
.triangle::before,
.triangle::after {
    display: none !important;
}


/* =========================================================
   MARKIV — FINAL LOGO REVEAL
========================================================= */

.markiv-final-logo {
    position: absolute;
    left: 50%;
    top: calc(50% - 145px);

    width: 68px;
    height: 68px;

    object-fit: contain;

    transform:
        translate(-50%, -50%)
        scale(.035);

    opacity: 0;

    z-index: 80;

    filter:
        drop-shadow(0 0 4px rgba(53,200,255,.9))
        drop-shadow(0 0 14px rgba(53,200,255,.45));

    pointer-events: none;
}

.markiv-final-logo.born {
    animation:
        markivLogoBirth
        1250ms
        cubic-bezier(.12,.82,.18,1)
        forwards;
}

@keyframes markivLogoBirth {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.035);
        filter:
            drop-shadow(0 0 0 rgba(53,200,255,0));
    }

    35% {
        opacity: .55;
        transform:
            translate(-50%, -50%)
            scale(.32);
    }

    70% {
        opacity: .9;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    86% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
        filter:
            drop-shadow(0 0 5px rgba(53,200,255,.95))
            drop-shadow(0 0 17px rgba(53,200,255,.5));
    }
}

/* Глаз оставляем геометрически тем же.
   Только добавляем более глубокое свечение. */
.eye {
    filter:
        drop-shadow(0 0 5px rgba(53,200,255,.95))
        drop-shadow(0 0 13px rgba(53,200,255,.38))
        drop-shadow(0 0 25px rgba(53,200,255,.16));
}

.eye-symbol {
    filter:
        drop-shadow(0 0 3px rgba(103,224,255,.85));
}

.eye-pupil {
    filter:
        drop-shadow(0 0 5px rgba(0,0,0,1));
}


/* =========================================================
   MARKIV LOGO — FINAL POSITION
========================================================= */

.markiv-final-logo {
    position: absolute !important;

    left: 50% !important;

    /*
     * Центр логотипа выше вершины треугольника.
     * Треугольник начинается примерно на 50% - 77px.
     * Логотип заканчивается значительно выше него.
     */
    top: calc(50% - 155px) !important;

    width: 64px !important;
    height: 64px !important;

    object-fit: contain !important;

    margin: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(.01) !important;

    opacity: 0 !important;

    z-index: 100 !important;

    pointer-events: none !important;

    display: block !important;

    filter:
        drop-shadow(0 0 5px rgba(53,200,255,.95))
        drop-shadow(0 0 16px rgba(53,200,255,.55)) !important;
}

.markiv-final-logo.born {
    animation:
        markivLogoBirthFinal
        1350ms
        cubic-bezier(.12,.82,.18,1)
        forwards !important;
}

@keyframes markivLogoBirthFinal {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.01);
    }

    25% {
        opacity: .35;
        transform:
            translate(-50%, -50%)
            scale(.18);
    }

    55% {
        opacity: .8;
        transform:
            translate(-50%, -50%)
            scale(.78);
    }

    78% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    90% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   MARKIV — INDEPENDENT LOGO REVEAL
========================================================= */

.markiv-final-logo {
    position: fixed !important;

    left: 50% !important;
    top: calc(50% - 155px) !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translate(-50%, -50%)
        scale(.01) !important;

    transform-origin: 50% 50% !important;

    z-index: 99999 !important;

    pointer-events: none !important;

    filter:
        drop-shadow(0 0 4px rgba(53,200,255,.95))
        drop-shadow(0 0 12px rgba(53,200,255,.55))
        drop-shadow(0 0 25px rgba(53,200,255,.20)) !important;
}

.markiv-final-logo.born {
    visibility: visible !important;

    animation:
        markivLogoBirthReal
        1600ms
        cubic-bezier(.12,.78,.18,1)
        forwards !important;
}

@keyframes markivLogoBirthReal {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.01);
        filter:
            drop-shadow(0 0 0 rgba(53,200,255,0));
    }

    18% {
        opacity: .15;
        transform:
            translate(-50%, -50%)
            scale(.055);
    }

    38% {
        opacity: .45;
        transform:
            translate(-50%, -50%)
            scale(.22);
    }

    62% {
        opacity: .85;
        transform:
            translate(-50%, -50%)
            scale(.68);
    }

    78% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.10);
    }

    90% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
        filter:
            drop-shadow(0 0 5px rgba(53,200,255,1))
            drop-shadow(0 0 16px rgba(53,200,255,.65))
            drop-shadow(0 0 28px rgba(53,200,255,.25));
    }
}


/* =========================================================
   MARKIV — FINAL LOGO
========================================================= */

.markiv-final-logo {
    position: fixed !important;

    left: 50% !important;

    /*
     * Логотип находится ВЫШЕ треугольника.
     * Между ним и вершиной остаётся заметный зазор.
     */
    top: calc(50% - 155px) !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    z-index: 999999 !important;

    pointer-events: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(.008) !important;

    transform-origin: 50% 50% !important;

    filter:
        drop-shadow(
            0 0 5px
            rgba(53,200,255,.95)
        )
        drop-shadow(
            0 0 16px
            rgba(53,200,255,.6)
        )
        drop-shadow(
            0 0 30px
            rgba(53,200,255,.25)
        ) !important;
}

.markiv-final-logo.born {
    visibility: visible !important;

    animation:
        markivLogoBirthFinalUltimate
        1600ms
        cubic-bezier(.12,.78,.18,1)
        forwards !important;
}

@keyframes markivLogoBirthFinalUltimate {

    /*
     * 0 — крошечная точка
     */
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.008);
    }

    /*
     * начинает формироваться
     */
    18% {
        opacity: .12;

        transform:
            translate(-50%, -50%)
            scale(.035);
    }

    /*
     * знак начинает читаться
     */
    38% {
        opacity: .42;

        transform:
            translate(-50%, -50%)
            scale(.20);
    }

    /*
     * быстрое раскрытие
     */
    62% {
        opacity: .82;

        transform:
            translate(-50%, -50%)
            scale(.66);
    }

    /*
     * лёгкий перелёт
     */
    78% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    /*
     * стабилизация
     */
    90% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    /*
     * окончательная форма
     */
    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            drop-shadow(
                0 0 5px
                rgba(53,200,255,1)
            )
            drop-shadow(
                0 0 17px
                rgba(53,200,255,.65)
            )
            drop-shadow(
                0 0 30px
                rgba(53,200,255,.25)
            );
    }
}


/* =========================================================
   MARKIV — ABSOLUTE FINAL LOGO
========================================================= */

.markiv-final-logo {
    position: fixed !important;

    left: 50% !important;

    /*
     * Центр логотипа выше вершины треугольника.
     */
    top: calc(50% - 155px) !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    z-index: 2147483647 !important;

    pointer-events: none !important;

    visibility: hidden;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.01);

    transform-origin: center center;

    filter:
        drop-shadow(
            0 0 5px
            rgba(53,200,255,1)
        )
        drop-shadow(
            0 0 17px
            rgba(53,200,255,.65)
        );
}

.markiv-final-logo.born {

    visibility: visible;

    animation:
        markivLogoBirthAbsolute
        1600ms
        cubic-bezier(.12,.78,.18,1)
        forwards;
}

@keyframes markivLogoBirthAbsolute {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.01);
    }

    15% {
        opacity: .08;
        transform:
            translate(-50%, -50%)
            scale(.025);
    }

    35% {
        opacity: .35;
        transform:
            translate(-50%, -50%)
            scale(.16);
    }

    58% {
        opacity: .78;
        transform:
            translate(-50%, -50%)
            scale(.58);
    }

    76% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    90% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}