.intro-screen{display:none}
.intro-active .intro-screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;width:100%;height:100%;margin:0;padding:24px;border:0;border-radius:0;background:#f6f7ef;color:#82b985;cursor:pointer;touch-action:none;animation:intro-curtain 2.2s linear both}
.intro-screen>span{grid-area:1/1;max-width:100%;font:700 clamp(44px,13vw,152px)/1.1 Manrope,"Helvetica Neue",sans-serif;letter-spacing:-.07em;white-space:nowrap;opacity:0;animation:intro-word .49s cubic-bezier(.22,.65,.3,1) both}
.intro-screen>span:nth-of-type(2){animation-delay:.49s}
.intro-screen>span:nth-of-type(3){animation-delay:.98s}
.intro-screen>span:nth-of-type(4){animation-delay:1.47s}
.intro-screen:focus-visible{outline:3px solid #248a3d;outline-offset:-8px}
@keyframes intro-word{0%{opacity:0;transform:translate3d(0,18px,0) scale(.96)}22%,72%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(0,-14px,0) scale(1.02)}}
@keyframes intro-curtain{0%,89.09%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.intro-active .intro-screen{display:none;animation:none}.intro-screen>span{animation:none}}

.intro-mark{position:absolute;left:50%;top:calc(50% - clamp(146px,18vw,230px));width:clamp(82px,9vw,116px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.intro-mark:before{content:"";position:absolute;inset:-22px;background:radial-gradient(circle,#a9dcb52b,transparent 68%);border-radius:50%;animation:intro-bloom 1.96s ease-out both}
.intro-mark img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;animation:intro-rotor 1.96s cubic-bezier(.12,.7,.18,1) both}
.topbar .brand img{transition:transform .75s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.topbar .brand:hover img{transform:rotate(120deg)}}
@keyframes intro-rotor{0%{opacity:0;transform:rotate(-300deg) scale(.72)}16%{opacity:1}100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes intro-bloom{0%{opacity:0;transform:scale(.65)}45%{opacity:1}100%{opacity:.5;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.intro-mark img,.intro-mark:before{animation:none}.topbar .brand img{transition:none}.topbar .brand:hover img{transform:none}}
