/* Street Signal R3. Paint follows the nozzle; one pass, no entrance loop. */
.page-transition.spray-transition{--spray-red:#ef3b32;position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:#070908;clip-path:none;visibility:hidden;opacity:0;pointer-events:none;transition:none}
.page-transition.spray-transition::before{display:none}
.js .page-transition.spray-transition.leaving{visibility:visible;opacity:1;pointer-events:auto;clip-path:none;transition:none;animation:spray-veil 90ms ease-out both}
.spray-stage{position:relative;width:min(800px,calc(100vw - 112px));height:clamp(90px,15vw,152px);isolation:isolate;transform:rotate(-4deg)}
.spray-stroke{position:absolute;inset:0;z-index:1;clip-path:inset(0 100% 0 0)}
.spray-paint{position:absolute;inset:0;background:var(--spray-red);clip-path:polygon(0 16%,4% 10%,6% 15%,11% 8%,17% 10%,22% 4%,27% 8%,33% 4%,37% 8%,45% 4%,50% 9%,56% 4%,62% 7%,67% 3%,73% 7%,78% 4%,84% 8%,91% 6%,94% 11%,99% 10%,97% 23%,100% 31%,98% 46%,100% 59%,98% 69%,99% 79%,95% 82%,94% 89%,88% 86%,83% 91%,77% 88%,70% 95%,64% 91%,57% 96%,50% 92%,44% 98%,37% 93%,30% 97%,24% 92%,18% 94%,11% 88%,6% 91%,3% 82%,0 85%,2% 70%,0 56%,2% 42%,0 27%)}
.spray-paint::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 10% 20%,#591d15 0 1px,transparent 2px) 0 0/17px 11px,radial-gradient(ellipse at 50% 60%,#fff3be 0 .6px,transparent 1.4px) 0 0/29px 19px;opacity:.2}
.spray-paint::after{content:"";position:absolute;inset:9% 0;background:linear-gradient(transparent 26%,#ff967722 28%,transparent 31%,transparent 73%,#62130c33 77%,transparent 79%)}
.spray-stage .transition-title{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;margin:0;padding:0 8%;color:#f4edd3;font:900 clamp(29px,8.1vw,102px)/1 Impact,"Arial Black",sans-serif;letter-spacing:-.025em;white-space:nowrap;transform:skewX(-7deg);clip-path:inset(0 100% 0 0);text-shadow:2px 3px 0 #671b1740}
.spray-drips{position:absolute;inset:0;z-index:0}
.spray-drips i{position:absolute;left:var(--x);top:84%;width:var(--w);height:var(--h);border-radius:2px 2px 70% 70%;background:var(--spray-red);transform:rotate(4deg) scaleY(0);transform-origin:50% 0}
.spray-drips i::after{content:"";position:absolute;bottom:-3px;left:-1px;width:calc(100% + 2px);height:11px;border-radius:50% 50% 45% 45%;background:var(--spray-red)}
.spray-drips i::before{content:"";position:absolute;top:0;right:1px;bottom:5px;width:1px;background:#ffae752d}
.spray-runner{position:absolute;inset:0;z-index:4;opacity:0;transform:translateX(0)}
.spray-tool{--can:clamp(58px,8vw,96px);position:absolute;left:0;top:50%}
.spray-can{position:absolute;width:var(--can);height:auto;max-width:none;left:calc(var(--can) * -.1);top:calc(var(--can) * -.245);transform-origin:10% 14.5%;transform:rotate(-7deg);filter:drop-shadow(5px 12px 8px #0009)}
.spray-mist{position:absolute;width:clamp(92px,15vw,160px);height:clamp(80px,14vw,140px);right:-5px;top:0;transform:translateY(-50%);background:radial-gradient(ellipse at 88% 50%,#ff9971a6 0, #ef3b32a1 13%,#ef3b3255 32%,transparent 68%);clip-path:polygon(0 0,100% 45%,100% 55%,0 100%);filter:blur(1px)}
.spray-mist::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#f98867aa 0 1px,transparent 1.8px) 0 0/13px 17px;opacity:.65}
.spray-caption{position:absolute;left:0;right:0;bottom:10%;text-align:center;color:#77847a;font:10px/1.6 monospace;letter-spacing:.24em}
.leaving .spray-stage{animation:spray-exit 140ms 1140ms ease-in both}
.leaving .spray-stroke{animation:spray-letters 660ms 100ms linear both}
.leaving .spray-stage .transition-title{animation:spray-letters 660ms 100ms linear both}
.leaving .spray-runner{animation:spray-travel 660ms 100ms linear both}
.leaving .spray-can{animation:spray-wrist 160ms 100ms ease-in-out infinite alternate}
.leaving .spray-mist{animation:spray-mist 95ms linear infinite alternate}
.leaving .spray-drips i{animation:spray-drip 440ms var(--delay) cubic-bezier(.32,.05,.62,1) both}
@keyframes spray-veil{from{opacity:0}to{opacity:1}}
@keyframes spray-letters{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes spray-travel{0%{transform:translateX(0);opacity:0}5%{opacity:1}92%{opacity:1}100%{transform:translateX(100%);opacity:0}}
@keyframes spray-wrist{from{transform:rotate(-9deg)}to{transform:rotate(-3deg)}}
@keyframes spray-mist{from{opacity:.68}to{opacity:1}}
@keyframes spray-drip{from{transform:rotate(4deg) scaleY(0)}to{transform:rotate(4deg) scaleY(1)}}
@keyframes spray-exit{from{opacity:1}to{opacity:0}}
.effects-off .page-transition.spray-transition{display:none}
.spray-demo{min-height:100svh;display:grid;align-content:center;gap:26px;padding:clamp(28px,7vw,100px);max-width:1100px;margin:auto}
.spray-demo .demo-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font:11px monospace;color:#a6b5a9}
.spray-demo .demo-top a{border-bottom:1px solid #697569;padding-block:10px}
.spray-demo .demo-controls{display:flex;gap:16px;align-items:center}
.spray-demo h1{margin:20px 0 0;color:var(--cream);font:900 clamp(54px,10.5vw,112px)/.9 Impact,"Arial Black",sans-serif;letter-spacing:-.025em;transform:skewX(-5deg)}
.spray-demo h1 span{display:block;color:var(--red)}
.spray-demo p{max-width:570px;color:#aeb9b0;font:15px/1.8 Arial,sans-serif;margin:0}
.spray-demo .demo-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:5px}
.spray-demo .demo-buttons button{background:#0d120e;border:1px solid #455046;color:var(--cream);padding:18px 24px;min-height:52px;font:bold 13px monospace;cursor:pointer}
.spray-demo .demo-buttons button:hover{border-color:var(--red);color:var(--red)}
.spray-demo .demo-buttons button:first-child{background:var(--red);border-color:var(--red);color:#110d09}
.spray-demo .demo-status{font:12px/1.7 monospace;min-height:44px;color:#b6c99f}
.spray-demo .demo-status span{display:none}
.effects-off .spray-demo .demo-status [data-demo-off]{display:block}
.js:not(.effects-off) .spray-demo .demo-status [data-demo-on]{display:block}
@media(max-width:480px){.spray-stage{width:calc(100vw - 88px);height:86px}.spray-stage .transition-title{padding:0 5%;font-size:8vw}.spray-drips i{max-height:105px}.spray-caption{font-size:9px;letter-spacing:.15em}.spray-demo .demo-buttons button{padding:16px 20px}.spray-demo p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.page-transition.spray-transition{display:none!important}}