.tn-anim .tn-dot{opacity:0;transform-box:fill-box;transform-origin:center;animation:tn-dot-in .4s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d) * 55ms)}
.tn-anim .tn-dot--cross{animation:tn-dot-in .4s cubic-bezier(.2,.8,.2,1) forwards,tn-fade-out .18s ease-in forwards;animation-delay:calc(var(--d) * 55ms),calc(900ms + var(--r) * 180ms)}
.tn-anim .tn-hair{stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;animation:tn-draw .36s cubic-bezier(.6,0,.2,1) 450ms forwards,tn-fade-out .4s ease-out 1350ms forwards}
.tn-anim .tn-tile{opacity:0;transform-box:fill-box;transform-origin:center;animation:tn-tile-in .28s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(820ms + var(--r) * 180ms)}
.tn-anim .tn-letter{opacity:0;animation:tn-letter-in .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1350ms + var(--r) * 90ms)}
@keyframes tn-dot-in{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes tn-fade-out{to{opacity:0}}
@keyframes tn-draw{to{stroke-dashoffset:0}}
@keyframes tn-tile-in{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes tn-letter-in{from{opacity:0;transform:translateX(calc(var(--side) * 9px))}to{opacity:1;transform:none}}
.tn-hair{stroke-width:0}
.tn-loading .tn-dot--cross{opacity:0}
.tn-loading .tn-tile{transform-box:fill-box;transform-origin:center}
.tn-loading .tn-tile:not([style*="--r:0"]){animation:tn-breathe 1.8s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--r) * 140ms)}
@keyframes tn-breathe{0%,100%{opacity:0;transform:scale(.55)}35%,65%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  .tn-anim .tn-dot,.tn-anim .tn-tile,.tn-anim .tn-letter,.tn-loading .tn-tile{animation:none!important;opacity:1;transform:none}
  .tn-anim .tn-dot--cross,.tn-loading .tn-dot--cross{animation:none!important;opacity:0}
  .tn-anim .tn-hair{animation:none!important;opacity:0}
}