/* animations forced (!important) so the site-wide prefers-reduced-motion kill in style.css doesn't skip the shutter */
/* G: 3D roller door (slate slats, bevel highlight, groove shadow) */
#sh{position:fixed;inset:0;z-index:20000;pointer-events:all;overflow:hidden}
#sh .door{position:absolute;left:0;right:0;top:0;height:100%;transform:translateY(-102%);box-shadow:0 18px 40px rgba(0,0,0,.85);
background:
 linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 18%,rgba(255,255,255,.04) 45%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5)),
 repeating-linear-gradient(180deg,#8a8db5 0 2px,#6a6c90 2px 4px,#55577a 4px 7px,#4a4b63 7px 26px,#44455c 26px 40px,#3e3f55 40px 48px,#2a2b3b 48px 50px,#15151d 50px 56px,#1f2030 56px 60px)}
#sh .door::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
background:repeating-radial-gradient(circle at 17% 31%,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 71% 64%,rgba(0,0,0,.25) 0 1px,transparent 1px 4px),radial-gradient(ellipse 80% 70% at 50% 40%,rgba(255,255,255,.12),transparent 70%)}
#sh .bar{position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,#9a9dc4 0 2px,#3a3b50 2px 10px,#22232f 10px)}
#sh .bar::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:26px;background:repeating-linear-gradient(-45deg,#c8001e 0 18px,#0c0c10 18px 36px);box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(0,0,0,.6);opacity:.92}
#sh .st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:60px;pointer-events:none;
-webkit-mask:repeating-linear-gradient(180deg,#000 0 48px,rgba(0,0,0,.35) 48px 50px,rgba(0,0,0,.1) 50px 56px,#000 56px 60px);mask:repeating-linear-gradient(180deg,#000 0 48px,rgba(0,0,0,.35) 48px 50px,rgba(0,0,0,.1) 50px 56px,#000 56px 60px)}
#sh .st b{display:block;transform:rotate(-2deg);font:900 clamp(70px,13vw,190px)/1 "Noto Sans JP",Anton,sans-serif;letter-spacing:.08em;color:rgba(214,0,30,.82);border:8px solid rgba(214,0,30,.75);padding:.06em .3em;mix-blend-mode:hard-light;text-shadow:0 0 1px rgba(0,0,0,.4);filter:contrast(1.1)}
#sh .st small{display:block;margin-top:2px;transform:translateY(22px) rotate(-2deg);font:700 clamp(16px,2vw,26px)/1 Oswald,"Noto Sans JP",sans-serif;letter-spacing:.55em;color:rgba(214,0,30,.8);mix-blend-mode:hard-light}
#sh.down .door{animation:gdn .45s cubic-bezier(.55,0,1,.45) forwards!important}
html.sh-shake body{animation:shshk .3s linear!important}
@keyframes shshk{0%,100%{transform:none}20%{transform:translate(-4px,7px)}40%{transform:translate(3px,-4px)}60%{transform:translate(-2px,2px)}80%{transform:translate(1px,-1px)}}
/* after closing, slats keep unwinding downward and ease to a stop; brackets/labels stay put */
#sh .slats{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#0b0b0b 0 58px,#e60023 58px 60px);background-position:0 0}
#sh.roll .slats{animation:sroll 1.15s .45s cubic-bezier(.04,.75,.3,1) forwards!important}
@keyframes sroll{from{background-position:0 0}to{background-position:0 1500px}}
#sh.up .door{animation:gup .6s cubic-bezier(.45,0,.55,1) forwards!important}
@keyframes gdn{from{transform:translateY(-102%)}to{transform:translateY(0)}}

@keyframes gup{from{transform:translateY(0)}to{transform:translateY(-104%)}}

/* I: flat UI */
#sh .door{background:#0b0b0b!important;box-shadow:none!important}
#sh .door::before{display:none}
#sh .bar{background:#000!important;border-top:2px solid #e60023;height:44px!important}
#sh .bar::after{bottom:0!important;height:12px!important}
#sh .br{position:absolute;width:56px;height:56px;border:3px solid #e60023}
#sh .br.a{left:5%;top:9%;border-right:0;border-bottom:0}#sh .br.b{right:5%;top:9%;border-left:0;border-bottom:0}#sh .br.c{left:5%;bottom:14%;border-right:0;border-top:0}#sh .br.d{right:5%;bottom:14%;border-left:0;border-top:0}
#sh .lb{position:absolute;font:700 12px/1 Oswald,monospace;letter-spacing:.35em;color:#e60023;background:#000;padding:4px 8px}
#sh .lb.a{left:calc(5% + 70px);top:calc(9% + 4px)}#sh .lb.b{right:calc(5% + 70px);bottom:calc(14% + 4px)}
#sh .vl{position:absolute;right:2.2%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:700 12px/1 Oswald,"Noto Sans JP",sans-serif;letter-spacing:.5em;color:#f2f2f2;background:#000;padding:8px 4px}

/* impact (from G): red flash + dust/sparks at floor + shake */
#sh::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 60% 18% at 50% 100%,rgba(255,255,255,.9),rgba(230,0,35,.6) 40%,transparent 70%),rgba(230,0,35,.35)}
#sh.hit::after{animation:hitfl .45s ease-out both!important}
@keyframes hitfl{0%{opacity:1}100%{opacity:0}}
#sh .dust{position:absolute;left:-5%;right:-5%;bottom:-10px;height:90px;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(180,180,180,.5) 0 2px,transparent 3px) 0 0/22px 18px,radial-gradient(circle,#ff3b3b 0 1.5px,transparent 2px) 7px 5px/37px 23px;filter:blur(.3px)}
#sh.hit .dust{animation:dust .7s ease-out both!important}
@keyframes dust{0%{opacity:1;transform:translateY(0) scaleX(.9)}100%{opacity:0;transform:translateY(-60px) scaleX(1.25)}}
#sh::after,#sh .dust{z-index:3}