.year-logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

.year-logo { --pw: 1.6; }

.year-logo .pen {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--pw);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.year-logo .pen-fill {
    fill: currentColor;
    fill-rule: evenodd;
    stroke: none;
    opacity: 0;
}

.lg-sky-front { opacity: 0.55; }

.year-logo.is-drawn .pen {
    animation: logo-draw 0.38s cubic-bezier(0.33, 0.9, 0.5, 1) var(--d, 0s) forwards;
}

.year-logo.is-drawn .pen-fill {
    animation: logo-ink 0.26s ease var(--d, 0s) forwards;
}

@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-ink  { to { opacity: 1; } }

.year-logo.is-still,
.year-logo.is-still * { animation-play-state: paused; }

.year-logo {
    color: var(--ink-faint);
    transition: color 0.3s;
}

.year.is-open .year-logo { color: var(--logo-tint, var(--blue)); }

.year-logo[data-logo='skyeng']    { --logo-tint: #00A6E8; }
.year-logo[data-logo='absolut']   { --logo-tint: #0E80FF; }
.year-logo[data-logo='sotmarket'] { --logo-tint: #E0A500; }
.year-logo[data-logo='naumen']    { --logo-tint: #E8801F; }
.year-logo[data-logo='domru']     { --logo-tint: #F5342A; }
.year-logo[data-logo='fl']        { --logo-tint: #62A637; }

.year-logo[data-logo='domru'] {
    width: 56px;
    height: 24px;
}

[data-theme='dark'] .year-logo[data-logo='sotmarket'] { --logo-tint: #FFC81E; }

.lg-sky-back, .lg-sm-mark, .lg-ab-mark,
.lg-nm-mark, .lg-dr-ball, .lg-fl-flag { transform-box: view-box; }

.year.is-open .year-logo[data-logo='skyeng'] .lg-sky-back {
    animation: logo-chase 1.9s ease-in-out 0.5s infinite;
}
@keyframes logo-chase {
    0%   { opacity: 1; transform: translateX(0); }
    46%  { opacity: 0; transform: translateX(10px); }
    47%  { opacity: 0; transform: translateX(-4px); }
    74%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0); }
}

.year.is-open .year-logo[data-logo='absolut'] .lg-ab-mark .pen {
    animation: logo-write 2.6s ease-in-out 0.5s infinite;
}
@keyframes logo-write {
    0%, 62%, 100% { stroke-dashoffset: 0; }
    18%           { stroke-dashoffset: 1; }
}

.year.is-open .year-logo[data-logo='sotmarket'] .lg-sm-mark {
    transform-origin: 22px 32px;
    animation: logo-spring 1.9s ease-in-out 0.5s infinite;
}
@keyframes logo-spring {
    0%, 58%, 100% { transform: scaleY(1); }
    24%           { transform: scaleY(1.1); }
    40%           { transform: scaleY(0.97); }
}
    30%      { transform: rotate(2.4deg); }
    68%      { transform: rotate(-1.8deg); }
}

.year.is-open .year-logo[data-logo='naumen'] .lg-nm-mark {
    transform-origin: 22px 34px;
    animation: logo-lean 2.2s ease-in-out 0.5s infinite;
}
@keyframes logo-lean {
    0%, 100% { transform: skewX(0deg); }
    32%      { transform: skewX(-5deg); }
    70%      { transform: skewX(1.5deg); }
}

.year.is-open .year-logo[data-logo='domru'] .lg-dr-ball {
    transform-origin: 31px 13px;
    animation: logo-hop 1.7s cubic-bezier(0.3, 0, 0.4, 1) 0.5s infinite;
}
@keyframes logo-hop {
    0%, 62%, 100% { transform: translateY(0); }
    16%           { transform: translateY(-3px); }
}

.year.is-open .year-logo[data-logo='fl'] .lg-fl-flag {
    transform-origin: 6px 22px;
    animation: logo-wave 2.4s ease-in-out 0.5s infinite;
}
@keyframes logo-wave {
    0%, 100% { transform: rotate(0deg); }
    28%      { transform: rotate(-3.5deg); }
    64%      { transform: rotate(2.5deg); }
}

.logos-off .year-logo .pen,
.logos-drawn .year-logo .pen { stroke-dashoffset: 0; }

.logos-off .year-logo .pen-fill,
.logos-drawn .year-logo .pen-fill { opacity: 1; }

.logos-off .year-logo,
.logos-off .year-logo * { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .year-logo .pen { stroke-dashoffset: 0; }
    .year-logo .pen-fill { opacity: 1; }
    .year-logo,
    .year-logo * { animation: none; }
}