.brand-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:#027d3a;color:#fff;isolation:isolate;animation:intro-exit 2400ms ease both}
.brand-intro[hidden]{display:none}
.intro-plane{position:absolute;inset:-20%;background:#368f3f;transform:translateX(-110%);animation:intro-plane 850ms cubic-bezier(.22,.7,.2,1) both;z-index:-1}
.intro-logo{display:block;width:clamp(280px,40vw,460px);max-width:86vw;max-height:56svh;height:auto;object-fit:contain;animation:intro-logo 450ms 650ms ease-out both}
.intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));padding:10px 18px;background:transparent;border:1px solid #ffffff70;border-radius:8px;color:#fff;font:500 14px system-ui;cursor:pointer}
.intro-skip:focus-visible{outline:2px solid white;outline-offset:4px}
@keyframes intro-plane{0%{transform:translateX(-110%) skewX(-12deg)}100%{transform:translateX(110%) skewX(-12deg)}}
@keyframes intro-logo{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-exit{0%,80%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none}.intro-plane,.intro-logo{animation:none}}