/* XELOHOOD graffiti entry sequence. Real asset readiness controls dismissal. */
html.loader-pending,html.loader-pending body{overflow:hidden}
html.loader-pending body>.skip,html.loader-pending body>.topbar,html.loader-pending body>main,html.loader-pending body>footer,html.loader-pending body>.item-dialog{visibility:hidden}
.graffiti-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:#c9f711;color:#10110e;opacity:0;visibility:hidden;pointer-events:none;transition:clip-path .72s cubic-bezier(.76,0,.24,1),opacity .2s linear,visibility 0s .72s;clip-path:inset(0 0 100% 0)}
html.loader-pending .graffiti-loader{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0);transition:none}
html.loader-leaving .graffiti-loader{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0 0 100% 0)}
.loader-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(16,17,14,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(16,17,14,.09) 1px,transparent 1px);background-size:clamp(54px,8vw,110px) clamp(54px,8vw,110px);transform:skewY(-3deg) scale(1.08)}
.loader-grid:before{content:"";position:absolute;left:-6%;right:-6%;top:72%;height:30px;border-top:3px solid #10110e;border-bottom:3px solid #10110e;background:repeating-linear-gradient(135deg,#10110e 0 6px,#c9f711 6px 14px);transform:rotate(-2deg) scaleX(0);transform-origin:left;animation:loaderStripe .55s .9s cubic-bezier(.2,.8,.2,1) forwards}
.loader-grid:after{content:"";position:absolute;inset:18px;border:3px solid #10110e;box-shadow:8px 8px 0 #10110e}
.loader-lockup{position:relative;z-index:3;width:min(1100px,88vw)}
.loader-code,.loader-meta{margin:0;display:flex;align-items:center;justify-content:space-between;font:700 clamp(9px,1vw,13px)/1 "XELO Graffiti",Impact,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.loader-code{padding-bottom:15px;border-bottom:3px solid #10110e;opacity:0;transform:translateY(10px);animation:loaderMetaIn .3s .1s forwards}
.loader-code span{opacity:.62}
.loader-word{display:flex;align-items:center;justify-content:center;width:100%;padding:clamp(28px,5vh,62px) 0 10px;white-space:nowrap;filter:drop-shadow(7px 8px 0 #f2ebd7)}
.loader-word span{position:relative;display:inline-block;margin-right:-.035em;color:#10110e;font:400 clamp(68px,14.5vw,210px)/.72 "XELO Graffiti",Impact,sans-serif;opacity:0;transform:translateY(38px) rotate(calc((var(--i) - 3.5)*1.2deg)) scale(1.38);filter:blur(7px);animation:loaderLetter .34s cubic-bezier(.18,.8,.23,1.28) forwards;animation-delay:calc(.18s + var(--i)*.075s)}
.loader-word span:nth-child(2n):after{content:"";position:absolute;left:48%;top:84%;width:clamp(4px,.55vw,8px);height:0;background:#10110e;border-radius:0 0 12px 12px;animation:loaderDrip .42s forwards;animation-delay:calc(.62s + var(--i)*.075s)}
.loader-stroke{position:relative;height:18px;margin-top:clamp(18px,2.4vh,28px);border:3px solid #10110e;background:#f2ebd7;overflow:hidden;transform:rotate(-1deg)}
.loader-stroke b{display:block;width:0;height:100%;background:#10110e}
.loader-meta{padding-top:13px}.loader-meta span:first-child{opacity:.66}.loader-meta span:last-child{font-size:clamp(13px,1.4vw,19px)}
.loader-corner{position:absolute;z-index:3;padding:9px 11px;background:#f2ebd7;border:2px solid #10110e;box-shadow:4px 4px 0 #10110e;font:700 9px/1 "XELO Graffiti",Impact,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.loader-corner-a{left:clamp(20px,4vw,58px);top:clamp(24px,6vh,64px);transform:rotate(-5deg)}.loader-corner-b{right:clamp(20px,4vw,58px);bottom:clamp(24px,6vh,64px);transform:rotate(4deg)}
.loader-spray{position:absolute;inset:0;z-index:2;pointer-events:none}.loader-spray i{position:absolute;width:var(--s,8px);height:var(--s,8px);border-radius:50%;background:#10110e;opacity:0;transform:scale(0);animation:loaderFleck .18s forwards;animation-delay:var(--d,.3s)}
.loader-spray i:nth-child(1){left:8%;top:22%;--s:7px;--d:.24s}.loader-spray i:nth-child(2){left:14%;top:68%;--s:13px;--d:.41s}.loader-spray i:nth-child(3){left:24%;top:14%;--s:5px;--d:.32s}.loader-spray i:nth-child(4){left:34%;top:76%;--s:8px;--d:.56s}.loader-spray i:nth-child(5){left:43%;top:17%;--s:11px;--d:.48s}.loader-spray i:nth-child(6){left:53%;top:78%;--s:5px;--d:.68s}.loader-spray i:nth-child(7){left:61%;top:21%;--s:8px;--d:.62s}.loader-spray i:nth-child(8){left:70%;top:70%;--s:12px;--d:.73s}.loader-spray i:nth-child(9){left:80%;top:16%;--s:6px;--d:.81s}.loader-spray i:nth-child(10){left:89%;top:62%;--s:9px;--d:.91s}.loader-spray i:nth-child(11){left:19%;top:48%;--s:4px;--d:.65s}.loader-spray i:nth-child(12){left:84%;top:43%;--s:4px;--d:.77s}
@keyframes loaderLetter{to{opacity:1;transform:translateY(0) rotate(calc((var(--i) - 3.5)*.35deg)) scale(1);filter:blur(0)}}
@keyframes loaderDrip{35%{height:clamp(12px,3vh,32px)}100%{height:clamp(8px,2vh,22px)}}

@keyframes loaderStripe{to{transform:rotate(-2deg) scaleX(1)}}
@keyframes loaderMetaIn{to{opacity:1;transform:none}}
@keyframes loaderFleck{to{opacity:.85;transform:scale(1)}}
@media(max-width:640px){.loader-lockup{width:88vw}.loader-word{padding:42px 0 18px;filter:drop-shadow(4px 5px 0 #f2ebd7)}.loader-word span{font-size:14vw}.loader-stroke{margin-top:18px}.loader-code span{display:none}.loader-corner{font-size:7px}.loader-corner-a{top:88px}.loader-grid:after{inset:12px;box-shadow:5px 5px 0 #10110e}}
@media(max-width:360px){.loader-word span{font-size:13.8vw}.loader-meta{font-size:7px}.loader-meta span:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){.graffiti-loader{transition:opacity .16s linear,visibility 0s .16s;clip-path:none}.loader-word span,.loader-code,.loader-stroke b,.loader-spray i,.loader-grid:before{animation:none;opacity:1;transform:none;filter:none}.loader-stroke b{width:100%}.loader-word span:nth-child(2n):after{display:none}html.loader-leaving .graffiti-loader{opacity:0;clip-path:none}}