.logo-cube{

    display:inline-flex;

    width:64px;

    height:64px;

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

}

.logo-svg{

    width:100%;

    height:100%;

    overflow:visible;

}

.logo-frame-outer{

    fill:none;

    stroke:url(#goldGradient);

    stroke-width:8;

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    transform:scale(.3);

    animation:frameGrow .5s ease-out .3s forwards;

}

.logo-grid-line{

    stroke:var(--gold-deep);

    stroke-width:3;

    opacity:0;

    animation:lineFade .3s ease-out .55s forwards;

    transition:opacity .3s ease;

}

.logo-point{

    fill:url(#goldGradient);

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    animation:pointPulse .6s ease-out forwards;

}

.logo-letter{

    font-family:"Cinzel",serif;

    font-weight:600;

    font-size:52px;

    fill:url(#goldGradient);

    text-anchor:middle;

    dominant-baseline:central;

    transform-box:fill-box;

    transform-origin:50% 50%;

    opacity:0;

    animation:letterAppear .4s cubic-bezier(.34,1.56,.64,1) var(--delay,0s) forwards;

    transition:
        opacity .4s ease,
        transform .4s cubic-bezier(.34,1.56,.64,1);    

}

.logo-word{

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

    font-weight:800;

    font-size:100px;

    fill:#FFFFFF;

    text-anchor:middle;

    dominant-baseline:central;

    opacity:0;

    transform-box:fill-box;

    transform-origin:50% 50%;

    transform:scale(.6);

    filter:drop-shadow(0 0 14px rgba(212,160,23,.85));

    transition:
        opacity .4s ease,
        transform .4s cubic-bezier(.34,1.56,.64,1);

}

@keyframes frameGrow{

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

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

}

@keyframes lineFade{

    from{opacity:0;}

    to{opacity:1;}

}

@keyframes pointPulse{

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

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

    100%{opacity:0;transform:scale(1.4);}

}

@keyframes letterAppear{

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

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

}

@keyframes hoverPointPulse{

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

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

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

    100%{opacity:0;transform:scale(1.3);}

}

/* Фиксируем финальное состояние после загрузочной анимации,

   иначе она блокирует CSS-переходы при hover */

.logo-cube.logo-ready .logo-frame-outer{

    animation:none;

    opacity:.6;

    transform:scale(1);

}

.logo-cube.logo-ready .logo-grid-line{

    animation:none;

    opacity:1;

}

.logo-cube.logo-ready .logo-point{

    animation:none;

    opacity:0;

}

.logo-cube.logo-ready .logo-letter{

    animation:none;

    opacity:1;

    transform:scale(1);

}

.logo-cube:hover .logo-grid-line{

    opacity:.04;

}

.logo-cube:hover .logo-letter{

    opacity:0;

    transform:translate(var(--tx),var(--ty)) scale(.2);

}

.logo-cube:hover .logo-point{

    animation:hoverPointPulse .6s ease-out .3s both;

}

.logo-cube:hover .logo-word{

    opacity:1;

    transform:scale(1);

}

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

    width:44px;

    height:44px;

}