/* Gallery v3: gothic brick, ten antique frames, cobwebs, crawling spiders */
.hang-room{background-color:#140d0b;background-image:radial-gradient(at 78% 0,#e23b323d,#0000 34%),radial-gradient(ellipse at 50% 30%,#0000 30%,#0000009e 100%),linear-gradient(90deg,#000000a6,#0000 14% 86%,#000000a6),linear-gradient(#0000008c,#0000 180px),url(/static/brick-grime.v1.webp),url(/static/brick-gothic.v1.webp);background-size:auto,auto,auto,auto,1130px 1130px,640px 640px;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat}
@media (max-width:700px){.hang-room{background-size:auto,auto,auto,auto,800px 800px,460px 460px}}
.hang-piece{container-type:inline-size}
.frm{--s:calc(100cqw / 540);display:block;position:relative;width:100%;padding:calc(var(--t) * var(--s) - 4px) calc(var(--r) * var(--s) - 4px) calc(var(--b) * var(--s) - 4px) calc(var(--l) * var(--s) - 4px)}
.frm:after{content:"";z-index:1;pointer-events:none;border-style:solid;border-color:#0000;border-width:calc(var(--t) * var(--s)) calc(var(--r) * var(--s)) calc(var(--b) * var(--s)) calc(var(--l) * var(--s));border-image-source:var(--img);border-image-slice:var(--t) var(--r) var(--b) var(--l) fill;border-image-repeat:stretch;position:absolute;inset:0;filter:drop-shadow(0 16px 14px #000000b3) drop-shadow(0 3px 3px #000000a6)}
.frm .mat{z-index:0;background:#0b0807;box-shadow:inset 0 0 18px #000000d9,inset 0 0 3px #000;display:block;position:relative;overflow:hidden}
.frm .mat:after{content:"";position:absolute;inset:0;box-shadow:inset 0 6px 14px #000000b3,inset 0 0 30px #00000066;pointer-events:none}
.frm .mat img{filter:sepia(.08) contrast(1.03)}
.fr4 .mat{border-radius:50%}
.fr8 .mat{clip-path:polygon(0 100%,0 22%,8% 12%,20% 5%,35% 1%,50% 0,65% 1%,80% 5%,92% 12%,100% 22%,100% 100%)}
.frm .web{position:absolute;z-index:2;width:calc(26 * var(--s) * 4);height:auto;opacity:.5;pointer-events:none}
.frm .web.tl{top:-6px;left:-6px}.frm .web.tr{top:-6px;right:-6px;transform:scaleX(-1)}.frm .web.bl{bottom:-6px;left:-6px;transform:scaleY(-1)}.frm .web.br{bottom:-6px;right:-6px;transform:scale(-1)}
.room-web{position:absolute;z-index:1;pointer-events:none;opacity:.42;width:min(300px,42vw);height:auto}
.room-web.tl{top:0;left:0}.room-web.tr{top:0;right:0;transform:scaleX(-1)}.room-web.l{left:0;transform:rotate(0)}.room-web.r{right:0;transform:scaleX(-1)}
.room-web.s{width:min(170px,30vw);opacity:.32}
.salon-row .salon-slot:nth-child(odd) .hang-piece{transform:rotate(-.6deg)}
.salon-row .salon-slot:nth-child(2n) .hang-piece{transform:rotate(.5deg)}
.nail{width:9px;height:9px;margin-bottom:6px;position:relative;z-index:2}
.crawl-on .spiders{display:none}
.crawl{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.crawler{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;filter:drop-shadow(1.5px 3px 1.5px #000000a6)}
.crawler svg{display:block;position:absolute;left:0;top:0;overflow:visible}
.crawler .lg{animation:gait var(--gait,.5s) linear infinite paused}
.crawler .lg.R{--sg:-1}.crawler .lg.L{--sg:1}
.crawler .lg.p2{animation-delay:calc(var(--gait,.5s) * -.5)}
.crawler.walk .lg{animation-play-state:running}
@keyframes gait{0%,100%{transform:rotate(calc(var(--sg) * -11deg))}50%{transform:rotate(calc(var(--sg) * 11deg))}}
.dangler{position:absolute;width:0;transform-origin:0 0;will-change:transform}
.silk{position:absolute;left:0;top:0;width:1px;background:linear-gradient(#e9e2d659,#e9e2d633);display:block}
.dangler .crawler{left:0;top:0;--gait:.9s}
@media (prefers-reduced-motion:reduce){.crawl{display:none}}

.fr0{--t:141;--r:107;--b:146;--l:107;--img:url(/static/frames/fr0.v1.webp)}
.fr1{--t:124;--r:113;--b:131;--l:113;--img:url(/static/frames/fr1.v1.webp)}
.fr2{--t:151;--r:102;--b:160;--l:101;--img:url(/static/frames/fr2.v1.webp)}
.fr3{--t:117;--r:106;--b:122;--l:106;--img:url(/static/frames/fr3.v1.webp)}
.fr4{--t:135;--r:64;--b:140;--l:65;--img:url(/static/frames/fr4.v1.webp)}
.fr5{--t:90;--r:93;--b:101;--l:94;--img:url(/static/frames/fr5.v1.webp)}
.fr6{--t:100;--r:101;--b:111;--l:101;--img:url(/static/frames/fr6.v1.webp)}
.fr7{--t:134;--r:114;--b:142;--l:116;--img:url(/static/frames/fr7.v1.webp)}
.fr8{--t:207;--r:87;--b:106;--l:86;--img:url(/static/frames/fr8.v1.webp)}
.fr9{--t:113;--r:105;--b:113;--l:106;--img:url(/static/frames/fr9.v1.webp)}
.fr4 .mat{aspect-ratio:411/691!important}
.fr8 .mat{aspect-ratio:367/651!important}
.hang-room{overflow-x:clip}
.bweb{position:absolute;z-index:2;pointer-events:none;height:auto;width:var(--bw,150px);opacity:.62;transform:rotate(var(--a,0deg))}
.bweb.sl{right:calc(100% - 4cqw);top:var(--y,30%);transform-origin:100% 50%}
.bweb.sr{left:calc(100% - 4cqw);top:var(--y,30%);transform-origin:0 50%}
.bweb.ctl{right:calc(100% - 5cqw);bottom:calc(100% - 5cqw);transform-origin:100% 100%}
.bweb.ctr{left:calc(100% - 5cqw);bottom:calc(100% - 5cqw);transform-origin:0 100%}
.bweb.cbl{right:calc(100% - 5cqw);top:calc(100% - 5cqw);transform-origin:100% 0}
.bweb.cbr{left:calc(100% - 5cqw);top:calc(100% - 5cqw);transform-origin:0 0}
@media (max-width:700px){.bweb{width:min(var(--bw,150px),24vw)}.bweb.cbl,.bweb.cbr{width:min(var(--bw,150px),30vw)}}