.sila-logo{

    position:relative;

    display:inline-flex;

    width:64px;

    height:64px;

    perspective:900px;

    cursor:pointer;

    transition:width var(--speed-normal) ease,height var(--speed-normal) ease;

}

.sila-flip{

    position:relative;

    width:100%;

    height:100%;

    transform-style:preserve-3d;

    transition:transform .85s cubic-bezier(.4,.15,.2,1);

}

.sila-logo:hover .sila-flip,

.sila-logo.is-flipped .sila-flip{

    transform:rotateY(180deg);

}

.sila-face{

    position:absolute;

    inset:0;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}

.sila-face-back{

    transform:rotateY(180deg);

}

.sila-svg{

    width:100%;

    height:100%;

    overflow:visible;

}

/* ---------- Квадранты ---------- */

.sila-chip-rect{

    fill:none;

    stroke:url(#silaGold);

    stroke-width:5;

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    transform:scale(.4);

    animation:silaChipIn .9s cubic-bezier(.34,1.4,.64,1) var(--chip-delay,0s) forwards;

}

.sila-chip-letter{

    font-family:"Cinzel",serif;

    font-weight:600;

    font-size:56px;

    fill:url(#silaGold);

    text-anchor:middle;

    dominant-baseline:central;

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    transform:scale(.4);

    animation:silaChipIn .9s cubic-bezier(.34,1.4,.64,1) var(--chip-delay,0s) forwards;

}

@keyframes silaChipIn{

    0%{opacity:0;transform:scale(.4);}

    60%{opacity:1;transform:scale(1.08);}

    100%{opacity:1;transform:scale(1);}

}

/* ---------- Подсказка направления чтения ---------- */

.sila-hint{

    stroke:var(--gold-mid);

    stroke-width:5;

    fill:none;

    stroke-linecap:round;

    stroke-linejoin:round;

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    transform:scale(.3);

    animation:

        silaHintIn .5s ease-out .15s forwards,

        silaHintOut .5s ease-in 1.5s forwards;

}

@keyframes silaHintIn{

    from{opacity:0;transform:scale(.3);}

    to{opacity:1;transform:scale(1);}

}

@keyframes silaHintOut{

    from{opacity:1;transform:scale(1);}

    to{opacity:0;transform:scale(0);}

}

/* ---------- Флаг "Т" — контур + диагональные штрихи ---------- */

.sila-flag-group{

    opacity:0;

    transform-box:fill-box;

    transform-origin:50% 0%;

    transform:scale(.5);

    animation:silaFlagIn .7s cubic-bezier(.34,1.3,.64,1) 1.75s forwards;

}

@keyframes silaFlagIn{

    from{opacity:0;transform:scale(.5);}

    to{opacity:1;transform:scale(1);}

}

.sila-flag-shape{

    fill:none;

    stroke:url(#silaGold);

    stroke-width:4;

}

.sila-flag-stripe{

    stroke:var(--gold-mid);

    stroke-width:2.5;

    stroke-linecap:round;

    opacity:.85;

}

/* ---------- Слово ИГРА / IGRA — слитно, по нижнему краю квадратов ---------- */

.sila-igra-letter{

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

    font-weight:800;

    font-size:34px;

    fill:var(--gold-mid);

    text-anchor:middle;

    dominant-baseline:central;

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    transform:scale(.4);

    animation:silaIgraIn .55s cubic-bezier(.34,1.4,.64,1) forwards;

}

.sila-igra-letter:nth-of-type(1){animation-delay:1.9s;}

.sila-igra-letter:nth-of-type(2){animation-delay:2.08s;}

.sila-igra-letter:nth-of-type(3){animation-delay:2.26s;}

.sila-igra-letter:nth-of-type(4){animation-delay:2.44s;}

@keyframes silaIgraIn{

    from{opacity:0;transform:scale(.4);}

    to{opacity:1;transform:scale(1);}

}

/* ---------- После окончания входной анимации — фиксируем состояние ---------- */

.sila-logo.is-ready .sila-chip-rect,

.sila-logo.is-ready .sila-chip-letter,

.sila-logo.is-ready .sila-flag-group,

.sila-logo.is-ready .sila-igra-letter{

    animation:none;

    opacity:1;

    transform:scale(1);

}

.sila-logo.is-ready .sila-hint{

    animation:none;

    opacity:0;

}

/* ---------- Плавное уменьшение при сжатии хедера ---------- */

.site-header.is-scrolled .sila-logo{

    width:44px;

    height:44px;

}

@media (max-width:768px){

    .sila-logo{

        width:56px;

        height:56px;

    }

}