/* Анимированное название. Подключать после components.css. Только transform и opacity, высота строк не меняется. */
.a0-ttl{font-family:var(--a0-serif);font-weight:400;font-size:clamp(36px,4.4vw,56px);line-height:1.06;letter-spacing:-.01em;margin:0}
.a0-ttl__row{display:block;font-style:normal}
.a0-ttl em.a0-ttl__row{font-style:italic;color:var(--a0-tx2)}
.a0-ttl__c{position:relative;display:inline-block;white-space:pre;transform:translateY(calc(var(--a0-w,0)*var(--a0-amp,4px)*-1));transition:transform .4s var(--a0-ease),color .4s;color:color-mix(in srgb,var(--a0-ac) calc(var(--a0-w,0)*55%),currentColor)}
.a0-ttl__c:hover{--a0-w:1}
.a0-ttl__c:hover+.a0-ttl__c,.a0-ttl__c:has(+.a0-ttl__c:hover){--a0-w:.5}
/* появление один раз: снизу вверх, каскад 32 мс, общая длительность около 0,8 с */
.a0-js .a0-ttl:not(.is-ready){visibility:hidden}
.a0-ttl.is-ready .a0-ttl__c{animation:a0-ttl-in .36s var(--a0-ease) both;animation-delay:calc(var(--i)*18ms)}
@keyframes a0-ttl-in{from{opacity:0;transform:translateY(46%)}to{opacity:1;transform:translateY(calc(var(--a0-w,0)*var(--a0-amp,4px)*-1))}}
/* «0»: контур едва заметно проступает раз в 10 секунд */
.a0-ttl__o::before{content:"0";position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:1px var(--a0-ac);opacity:0;pointer-events:none;animation:a0-ttl-br 10s ease-in-out 2.4s infinite}
@keyframes a0-ttl-br{0%,100%{opacity:0}50%{opacity:.5}}
/* вторая строка: золотая подсветка проходит по буквам раз в 12 секунд */
em.a0-ttl__row .a0-ttl__c::after{content:attr(data-c);position:absolute;left:0;top:0;color:var(--a0-ac);opacity:0;pointer-events:none;animation:a0-ttl-hl 12s ease-in-out infinite;animation-delay:calc(3s + var(--i)*70ms)}
@keyframes a0-ttl-hl{0%,12%,100%{opacity:0}6%{opacity:.75}}
/* логотип в шапке */
.a0-ttl--logo{--a0-amp:2px;font-size:20px;line-height:1;letter-spacing:.04em;margin:0;display:flex;flex-direction:column;gap:4px}
.a0-ttl--logo .a0-ttl__row{display:block;font-style:normal}
.a0-js .a0-ttl--logo:not(.is-ready){visibility:visible;animation:none}
.a0-ttl--logo.is-ready .a0-ttl__c{animation-name:a0-ttl-in-q;animation-duration:.35s;animation-delay:calc(var(--i)*12ms)}
@keyframes a0-ttl-in-q{from{opacity:.55;transform:translateY(14%)}to{opacity:1;transform:translateY(calc(var(--a0-w,0)*var(--a0-amp,4px)*-1))}}
.a0-ttl--logo .a0-ttl__o::before{animation-duration:18s;animation-delay:6s}
@keyframes a0-ttl-br-q{0%,100%{opacity:0}50%{opacity:.3}}
.a0-ttl--logo .a0-ttl__o::before{animation-name:a0-ttl-br-q}
.a0-brand{transition:color .3s}
.a0-brand small{display:inline-block;transition:transform .35s var(--a0-ease),color .3s}
.a0-brand:hover{color:var(--a0-ach)}
.a0-brand:hover small{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.a0-ttl__c,.a0-ttl.is-ready .a0-ttl__c{animation:none!important;transition:none;transform:none}.a0-ttl__o::before,em.a0-ttl__row .a0-ttl__c::after{animation:none;opacity:0}.a0-js .a0-ttl:not(.is-ready){visibility:visible}.a0-brand small{transition:none}}
.a0-ttl:not(.is-ready){animation:a0-ttl-fallback 0s .8s both}
@keyframes a0-ttl-fallback{to{visibility:visible}}