:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(140deg, #173245 0%, #0b1a2c 44%, #030916 100%);
    box-shadow: inset 0 1px 0 #567b8866, inset 0 0 0 1px #9ee8eb18;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__ribbon {
    position: absolute;
    inset: 5% 5% 10%;
    perspective: 600px;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__ribbon > span {
    position: absolute;
    display: block;
    inset: 0;
    backface-visibility: hidden;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__head {
    clip-path: polygon(12% 22%, 87% 22%, 73% 39%, 12% 39%);
    background: linear-gradient(170deg, #ffffff 24%, #effcfb 38%, #c8e4e5 66%);
    transform-origin: 12% 30%;
    z-index: 4;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__head-side {
    clip-path: polygon(73% 39%, 87% 22%, 87% 39%);
    background: linear-gradient(130deg, #a9d5d8, #365866);
    transform-origin: 73% 39%;
    z-index: 3;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__tail {
    clip-path: polygon(42% 39%, 62% 39%, 62% 82%, 42% 96%);
    background: linear-gradient(108deg, #83f1e0 20%, #0cb0b0 48%, #048388 80%);
    transform-origin: 52% 39%;
    z-index: 2;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__tail-side {
    clip-path: polygon(62% 39%, 68% 34%, 68% 77%, 62% 82%);
    background: linear-gradient(180deg, #0a6c75, #0cbbc0);
    transform-origin: 62% 39%;
    z-index: 1;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__turn {
    clip-path: polygon(62% 39%, 73% 39%, 62% 52%);
    background: linear-gradient(140deg, #76ebdf, #0cb0b0 36%, #075061);
    transform-origin: 62% 39%;
    z-index: 5;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo__shine {
    position: absolute;
    display: block;
    inset: 0 auto 0 0;
    width: 26%;
    background: linear-gradient(90deg, transparent, #ffffffaa, transparent);
    transform: translateX(-150%) skewX(-18deg);
    opacity: 0;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__ribbon > span {
    animation-duration: 1.8s;
    animation-timing-function: cubic-bezier(.22, .78, .24, 1);
    animation-iteration-count: 1;
}
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__head { animation-name: tyon-header-ribbon-head; }
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__head-side { animation-name: tyon-header-ribbon-head-side; }
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__tail { animation-name: tyon-header-ribbon-tail; }
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__tail-side { animation-name: tyon-header-ribbon-tail-side; }
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__turn { animation-name: tyon-header-ribbon-turn; }
:is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__shine { animation: tyon-header-ribbon-shine 1.8s ease-in-out 1; }
@keyframes tyon-header-ribbon-head {
    0% { transform: rotateY(-68deg) scaleX(.035); }
    38% { transform: rotateY(7deg) scaleX(1.035); }
    54%, 100% { transform: rotateY(0) scaleX(1); }
}
@keyframes tyon-header-ribbon-head-side {
    0%, 18% { transform: rotateY(89deg) scaleX(.02); }
    48%, 100% { transform: rotateY(0) scaleX(1); }
}
@keyframes tyon-header-ribbon-tail {
    0%, 25% { transform: rotateX(-82deg) scaleY(.025); }
    65% { transform: rotateX(5deg) scaleY(1.035); }
    79%, 100% { transform: rotateX(0) scaleY(1); }
}
@keyframes tyon-header-ribbon-tail-side {
    0%, 31% { transform: rotateY(84deg) scaleY(.02); }
    70%, 100% { transform: rotateY(0) scaleY(1); }
}
@keyframes tyon-header-ribbon-turn {
    0%, 29% { transform: rotateY(90deg); }
    52%, 100% { transform: rotateY(0); }
}
@keyframes tyon-header-ribbon-shine {
    0%, 64% { transform: translateX(-150%) skewX(-18deg); opacity: 0; }
    72% { opacity: .7; }
    92%, 100% { transform: translateX(440%) skewX(-18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__ribbon > span,
    :is(.site-header, [data-mobile-menu]) .tyon-header-ribbon-logo.is-animating .tyon-header-ribbon-logo__shine { animation: none; }
}