.brand-loading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#fff;opacity:1;animation:loading-failsafe 0s 7s forwards}
.loading-brand{display:flex;flex-direction:column;align-items:center;gap:22px}
.loading-owner{font:400 14px/1.4 Arial,sans-serif;letter-spacing:.14em;color:#666;transform:translateY(-12px);animation:descriptor-in .35s ease .2s both}
.brand-loading img{display:block;width:clamp(220px,30vw,420px);max-width:72vw;height:auto}
.loading-descriptor{font:400 11px/1.4 Arial,sans-serif;letter-spacing:.23em;text-transform:uppercase;color:#777;animation:descriptor-in .35s ease 1.7s both}
.brand-loading button{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:0;background:none;padding:12px 18px;font:12px Arial,sans-serif;color:#666;cursor:pointer}
.brand-loading button:focus-visible{outline:1px solid #222;outline-offset:4px}
html.is-loading{overflow:hidden;animation:loading-unlock 0s 7s forwards}
html.is-loading body> :not(#portfolio-intro):not(script){visibility:hidden;animation:loading-unhide 0s 7s forwards}
@keyframes loading-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes loading-unlock{to{overflow:visible}}
@keyframes loading-unhide{to{visibility:visible}}
@keyframes descriptor-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.brand-loading{display:none}.loading-descriptor,.loading-owner{animation:none}}