/* Receipt #31 pedestal. A dark room between Whiplash and Spicy Pics.
   Full motion on purpose: nothing here checks the OS Reduce Motion setting. */
#pedestal-31{--u:calc(min(100vw,440px)/390);position:relative;z-index:0;margin:calc(var(--u)*-26) -12px calc(var(--u)*-120);}
.ped-room{position:relative;height:calc(var(--u)*690);overflow:hidden;background:linear-gradient(#04020c,#0b0620 52%,#150a30);-webkit-mask-image:linear-gradient(#000 0,#000 74%,rgba(0,0,0,.9) 79%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.28) 93.5%,rgba(0,0,0,.1) 97%,transparent 100%);mask-image:linear-gradient(#000 0,#000 74%,rgba(0,0,0,.9) 79%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.28) 93.5%,rgba(0,0,0,.1) 97%,transparent 100%);}
.ped-room::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:13px 13px;}
.ped-room::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 62% 52% at 50% 46%,transparent 30%,rgba(0,0,0,.78) 100%);}
.ped-title{position:relative;z-index:5;margin:0;padding:calc(var(--u)*50) 0 calc(var(--u)*44);margin-bottom:calc(var(--u)*-44);overflow:visible;text-align:center;color:var(--yel);font-size:calc(var(--u)*32);line-height:1.12;word-spacing:calc(var(--u)*12);letter-spacing:1px;color:#fff06a;text-shadow:-3px -3px 0 #1c0450,0px -3px 0 #1c0450,3px -3px 0 #1c0450,-3px 0px 0 #1c0450,3px 0px 0 #1c0450,-3px 3px 0 #1c0450,0px 3px 0 #1c0450,3px 3px 0 #1c0450,-2px -4px 0 #1c0450,2px -4px 0 #1c0450,-4px -2px 0 #1c0450,4px -2px 0 #1c0450,-4px 2px 0 #1c0450,4px 2px 0 #1c0450,-2px 4px 0 #1c0450,2px 4px 0 #1c0450,1px 4px 0 #1c0450,2px 5px 0 #1c0450,3px 6px 0 #2a0a66,4px 7px 0 #2a0a66,5px 8px 0 #3a1463,6px 9px 0 #3a1463,0 0 24px rgba(255,236,120,.55),0 0 42px rgba(150,180,255,.32);}
.ped-sub{position:relative;z-index:5;margin:calc(var(--u)*7) 0 0;text-align:center;color:#fff8fc;font-family:"rainyhearts",monospace;font-size:calc(var(--u)*22);line-height:1;}
.ped-beam{position:absolute;left:0;right:0;top:calc(var(--u)*134);height:calc(var(--u)*292);z-index:2;clip-path:polygon(43% 0,57% 0,97% 100%,3% 100%);background:linear-gradient(rgba(190,208,255,0),rgba(190,208,255,.42) 22%,rgba(190,208,255,.16) 78%,rgba(190,208,255,.03));filter:blur(5px);}
.ped-beam.b2{clip-path:polygon(47% 0,53% 0,70% 100%,30% 100%);background:linear-gradient(rgba(190,208,255,0),rgba(190,208,255,.35) 25%,rgba(190,208,255,.1));filter:blur(3px);}
.ped-bub{position:absolute;left:calc(var(--u)*37);top:calc(var(--u)*196);width:calc(var(--u)*316);z-index:6;padding:0;margin:0;border:0;background:none;cursor:pointer;transform:rotate(-1.4deg);filter:drop-shadow(0 0 16px rgba(120,165,255,.7)) drop-shadow(3px 5px 0 rgba(0,0,0,.6));-webkit-tap-highlight-color:transparent;}
.ped-bub img{display:block;width:100%;height:auto;}
.ped-bub:focus-visible{outline:3px dashed var(--yel);outline-offset:6px;}
.ped-col{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*610);z-index:5;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0,#000 74%,transparent 99%);mask-image:linear-gradient(#000 0,#000 74%,transparent 99%);}
.ped-col>*{position:absolute;box-sizing:border-box;}
.ped-cap1{left:calc(var(--u)*36);top:calc(var(--u)*412);width:calc(var(--u)*318);height:calc(var(--u)*24);background:#f0f2ff;border:3px solid #0d0524;box-shadow:inset 0 -5px 0 #d2d9f2;font-family:"rainyhearts",monospace;font-size:calc(var(--u)*15);line-height:calc(var(--u)*18);color:#6f6a99;text-align:center;letter-spacing:.5px;white-space:nowrap;overflow:hidden;}
.ped-cap2{left:calc(var(--u)*62);top:calc(var(--u)*436);width:calc(var(--u)*266);height:calc(var(--u)*16);background:#d2d9f2;border:3px solid #0d0524;border-top:0;border-radius:0 0 30px 30px/0 0 14px 14px;}
.ped-vol{top:calc(var(--u)*426);width:calc(var(--u)*34);height:calc(var(--u)*34);border:3px solid #0d0524;border-radius:50%;background:radial-gradient(circle at 50% 50%,#a9b4dc 0 5px,#f0f2ff 6px);}
.ped-vol.l{left:calc(var(--u)*30);}.ped-vol.r{right:calc(var(--u)*30);}
.ped-neck{left:calc(var(--u)*96);top:calc(var(--u)*452);width:calc(var(--u)*198);height:calc(var(--u)*10);background:#a9b4dc;border:3px solid #0d0524;border-top:0;}
.ped-shaft{left:calc(var(--u)*100);top:calc(var(--u)*462);width:calc(var(--u)*190);height:calc(var(--u)*150);border:3px solid #0d0524;border-bottom:0;background:repeating-linear-gradient(90deg,#f0f2ff 0 calc(var(--u)*17),#d2d9f2 calc(var(--u)*17) calc(var(--u)*22),#a9b4dc calc(var(--u)*22) calc(var(--u)*26),#d2d9f2 calc(var(--u)*26) calc(var(--u)*31));}
.ped-shaft::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,20,.45),transparent 30%,transparent 66%,rgba(0,0,20,.5));}
.ped-sparks{position:absolute;inset:0;transform:translateY(calc(var(--u)*34));z-index:4;pointer-events:none;}
/* before the reveal fires (JS on), everything waits in the dark */
.js .ped-room[data-io]:not(.in) :is(.ped-title,.ped-sub,.ped-beam,.ped-bub,.ped-col,.ped-sparks){opacity:0;}
/* the reveal: title slams, light flickers on, pillar and bubbles rise out of the dark, sparkles start */
.ped-room.in .ped-title{animation:pedSlam .7s .1s both;}
.ped-room.in .ped-sub{animation:pedFade .6s .55s both;}
.ped-room.in .ped-beam{animation:pedLights 1.5s .5s both,pedPulse 7s 2.4s infinite;}
.ped-room.in .ped-col{animation:pedFade 1s .7s both;}
.ped-room.in .ped-bub{animation:pedRise 1s 1.3s both;}
.ped-room.in .ped-sparks{animation:pedFade .8s 2s both;}
.ped-room.in @keyframes pedSlam{0%{opacity:0;transform:scale(1.5)}60%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes pedFade{from{opacity:0}to{opacity:1}}
@keyframes pedLights{0%,10%{opacity:0}16%{opacity:.95}24%{opacity:.12}34%{opacity:1}52%{opacity:.72}64%,100%{opacity:1}}
@keyframes pedPulse{0%,100%{opacity:1}45%{opacity:.84}55%{opacity:.96}}
@keyframes pedRise{from{opacity:0;transform:translateY(16px) rotate(-1.4deg)}to{opacity:1;transform:translateY(0) rotate(-1.4deg)}}
.ped-sp{position:absolute;left:var(--x0);top:var(--y0);opacity:0;}
.ped-sp i{display:block;}
.ped-room.in .ped-sp{animation:pedFall var(--t) var(--l) infinite linear;}
.ped-room.in .ped-sp i{animation:pedGlint var(--g) var(--gl) infinite ease-in-out;}
@keyframes pedFall{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}72%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes pedGlint{0%,100%{transform:scale(.45) rotate(0)}30%{transform:scale(1.15) rotate(20deg)}55%{transform:scale(.6) rotate(-10deg)}80%{transform:scale(1) rotate(30deg)}}