/* An opening signature, never a gate to the website. */
.signature{display:none;position:fixed;inset:0;z-index:200;background:#202920;color:#ecebe6;pointer-events:none;place-items:center}
.signature-active .signature{display:grid;animation:signature-safety 1.5s step-end forwards}
.signature-content{width:min(270px,64vw);text-align:center}
.signature-line{display:block;height:1px;background:currentColor;opacity:.65;transform-origin:left;animation:signature-line .65s cubic-bezier(.22,1,.36,1) both}
.signature-content img{width:220px;max-width:100%;height:auto;margin:35px auto 26px;filter:brightness(0) invert(95%) sepia(10%) saturate(150%);animation:signature-mark .6s ease-out both}
.signature-content p{font:600 12px/1.5 Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;animation:signature-mark .55s .12s ease-out both}
.signature-revealing .signature{display:grid;animation:signature-exit .3s ease-out forwards}
.signature-revealing .hero-copy{animation:signature-copy .5s .08s ease-out both}
.signature-revealing .header{animation:signature-copy .5s .16s ease-out both}
@keyframes signature-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes signature-mark{from{opacity:0}to{opacity:1}}
@keyframes signature-exit{to{opacity:0;visibility:hidden}}
@keyframes signature-copy{from{opacity:0}to{opacity:1}}
@keyframes signature-safety{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){
 .signature-active .signature{animation:signature-safety .4s step-end forwards}
 .signature-line,.signature-content img,.signature-content p,.signature-revealing .hero-copy,.signature-revealing .header{animation:none}
 .signature-revealing .signature{animation:signature-exit .15s ease-out forwards!important}
}