/*
 * EBS Halloween logo. Overlay only, same approach as the anniversary logo:
 * the header logo <img> stays in place (hidden, still reserving its box) and
 * the artwork sits on top of it. Geometry is % of a 1024x440 box whose bottom
 * 334px line up exactly with Web-Logo.png (1024x334); the extra 106px on top
 * is the hat, which rises above the header logo. Remove the files and the
 * header is exactly as before.
 */
.ebsh-anv{position:relative;display:inline-block;line-height:0}
.ebsh-anv>img{position:relative;z-index:1}
.ebsh-anv--on>img{visibility:hidden}
.ebsh-anv .ebsh{position:absolute;left:0;top:-31.737%;width:100%;height:auto;max-width:none;z-index:2;pointer-events:none}
html.ebsh-pending .site-logo a img{visibility:hidden;animation:ebshFailsafe 0s linear 1200ms forwards}
@keyframes ebshFailsafe{to{visibility:visible}}
.ebsh img{max-width:none!important}
.ebsh{position:relative;display:block;width:100%;aspect-ratio:1024/440}
.ebsh .layer{position:absolute;display:block;height:auto;max-width:none}
.ebsh svg.layer{overflow:visible}
.ebsh .emblem,.ebsh .script{left:1.953%;top:31.136%;width:26.172%}
.ebsh .pumpkin{left:.977%;top:30.909%;width:28.125%}
.ebsh .w-every{left:29.297%;top:33.864%;width:70.703%}
.ebsh .w-strom{left:29.297%;top:60.455%;width:70.703%}
.ebsh .rule{left:29.297%;top:89.773%;width:70.703%}
.ebsh .hat{transform-origin:50% 84%;transform:rotate(var(--r))}
.ebsh-a .hat{--r:-12deg;left:1.855%;top:2.955%;width:23.438%}
.ebsh-b .hat{--r:6deg;left:5.762%;top:9.091%;width:18.555%}
.ebsh .bat1{left:24.5%;top:2%;width:8.5%}
.ebsh .bat2{left:33%;top:16%;width:6%}
.ebsh .bat3{left:39%;top:3.5%;width:4.8%}
.ebsh .face{left:.977%;top:30.909%;width:28.125%;opacity:0}
.ebsh-b .emblem{left:6.738%;top:42.273%;width:16.602%}
.ebsh .ha{left:27%;top:12%;width:21%;opacity:0}
.ebsh .disc{left:7.422%;top:43.864%;width:15.234%;aspect-ratio:1;border-radius:50%;background:#fff}

@keyframes ebsh-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ebsh-hat{0%{opacity:0;transform:translateY(-70%) rotate(calc(var(--r) - 25deg))}55%{opacity:1;transform:translateY(6%) rotate(calc(var(--r) + 6deg))}80%{transform:translateY(-3%) rotate(calc(var(--r) - 2deg))}100%{transform:translateY(0) rotate(var(--r))}}
@keyframes ebsh-bat{0%{opacity:0;transform:translate(-260%,260%) scale(.2) rotate(-20deg)}40%{opacity:1}70%{transform:translate(12%,-12%) scale(1.1) rotate(6deg)}100%{transform:none}}
@keyframes ebsh-laugh{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1)}22%{transform:translateY(-2%) rotate(-4deg)}32%{transform:translateY(1%) rotate(4deg)}42%{transform:translateY(-2%) rotate(-4deg)}52%{transform:translateY(1%) rotate(4deg)}62%{transform:translateY(-2%) rotate(-3deg)}72%{opacity:1;transform:none}100%{opacity:0;transform:scale(.85)}}
@keyframes ebsh-shake{0%,100%{transform:none}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1.5deg)}}
@keyframes ebsh-ha{0%{opacity:0;transform:scale(.4) rotate(-10deg)}15%{opacity:1;transform:scale(1.1)}30%{transform:scale(.95) rotate(3deg)}45%{transform:scale(1.05) rotate(-3deg)}60%{transform:scale(1) rotate(2deg)}80%{opacity:1}100%{opacity:0;transform:translateY(-20%) scale(.9)}}
@keyframes ebsh-rise{0%{opacity:0;transform:translateY(35%)}100%{opacity:1;transform:none}}
@keyframes ebsh-wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}

.ebsh.play .emblem,.ebsh.play .pumpkin{animation:ebsh-pop .6s cubic-bezier(.3,1.5,.5,1) both}
.ebsh.play .script{animation:ebsh-pop .55s .15s cubic-bezier(.3,1.5,.5,1) both}
.ebsh-b.play .pumpkin{animation:ebsh-pop .6s cubic-bezier(.3,1.5,.5,1) both,ebsh-shake 1s 1s ease-in-out}
.ebsh-b.play .face{animation:ebsh-laugh 1.9s .45s ease-in-out both}
.ebsh-b.play .ha{animation:ebsh-ha 1.5s .75s ease-out both}
.ebsh-b.play .disc{animation:ebsh-pop .5s 2.25s cubic-bezier(.3,1.5,.5,1) both}
.ebsh-b.play .emblem{animation:ebsh-pop .6s 2.35s cubic-bezier(.3,1.5,.5,1) both}
.ebsh-b.play .bat1{animation-delay:2.6s}
.ebsh-b.play .bat2{animation-delay:2.72s}
.ebsh-b.play .bat3{animation-delay:2.84s}
.ebsh.play .hat{animation:ebsh-hat .75s .45s cubic-bezier(.3,1.2,.5,1) both}
.ebsh.play .bat1{animation:ebsh-bat .7s .95s ease-out both}
.ebsh.play .bat2{animation:ebsh-bat .7s 1.07s ease-out both}
.ebsh.play .bat3{animation:ebsh-bat .7s 1.19s ease-out both}
.ebsh.play .w-every{animation:ebsh-rise .5s .6s cubic-bezier(.2,.8,.3,1) both}
.ebsh.play .w-strom{animation:ebsh-rise .5s .75s cubic-bezier(.2,.8,.3,1) both}
.ebsh.play .rule{animation:ebsh-wipe .6s 1.05s cubic-bezier(.6,0,.3,1) both}

@media (prefers-reduced-motion:reduce){.ebsh.play .layer{animation:none!important}}
