/* parade.css: THE SKELETONS The Bone Rattlers (from the Skeleton Second Line pen), in grayscale to match the video. Every left/top % here is a spot in the 1280x720 video frame, because the parade lives inside the same 16:9 stage as the video. 0% 0% = top-left corner, 100% 100% = bottom-right. HOW A MARCHER WORKS - .hv-track moves it along the path (the hv-mk-left / hv-mk-right keyframes: out of the center tomb door, down the path toward you, then off to one side). - .hv-mk-fig scales it up as it walks (hv-mk-grow), so it seems to come closer. - --d is when it steps out, counted from the click. --dur is how long one loop takes. - The SVG inside dances on its own (mv-march, mv-strut, mv-buck...). EDIT HERE to change the path: the translate % values in @keyframes hv-mk-left / hv-mk-right. */ .haunt-stage :is(div,i){position:absolute} .hv-track{inset:0} /* a full-stage box: translate % = % of the video frame */ /* ============ LEVEL 1 — THE GRAVEYARD: the gate lanterns gutter ============ */ /* Lanterns: a dark veil over the glass and its glow fades in and out, so the flame seems to gutter. */ .hv-lamp{width:9%;aspect-ratio:1/1.25;translate:-50% -50%;opacity:0; background:radial-gradient(closest-side, rgba(4,4,6,.95) 0 38%, rgba(4,4,6,.7) 56%, transparent 100%); animation:hv-gutter 7.3s linear infinite} .hv-lamp-left{left:8.75%;top:40%} .hv-lamp-right{left:91.6%;top:40.5%;animation-duration:9.7s;animation-delay:-3.1s} @keyframes hv-gutter{ 0%,28%{opacity:0} 29%{opacity:.7} 30%{opacity:.1} 31.5%{opacity:.8} 33%{opacity:0} 58%{opacity:0} 60%{opacity:.85} 61%{opacity:.35} 62.5%{opacity:.9} 74%{opacity:.88} 75%{opacity:.25} 76%{opacity:.92} 79%{opacity:0} 100%{opacity:0}} /* The Skull & Bone Gang (from the Skeleton Second Line pen, in grayscale) files out of the center tomb door one by one, second-lines down the misty path toward you, then peels off. Each marcher: a track (where on the path) + a figure (how big = how close). One 30s loop. */ .hv-mk{animation:var(--path) var(--dur,30s) linear infinite;animation-delay:var(--d)} .hv-mk-fig{left:0;top:0;width:var(--w,12%);aspect-ratio:var(--ar,100/180);translate:-50% -96.7%;transform-origin:50% 96.7%; animation:var(--grow,hv-mk-grow) var(--dur,30s) linear infinite;animation-delay:var(--d)} .hv-mk-fig > svg{display:block;width:100%;height:100%;overflow:visible} /* ONE PASS, TIMED TO THE SONG: every marcher walks once and then stays out of sight. Each krewe's --dur and every --d start time live on its tracks in index.html, and each --d is the second of "Rattle Them Bones" when that marcher steps out (from the timing sheet): Krewe 1 The Bone Rattlers 0:21.1 "Out of the center tomb... The Bone Rattlers!" Krewe 2 Checkbox Voodoo 1:00.0 "From the left side... Checkbox Voodoo!" Krewe 3 Cut Him Loose 1:25.2 "Here comes Uncle Bones." (the coffin on "Cut him loose!" 1:28.8) Krewe 4 Laissez les Os 1:41.4 "From behind the tombs... Laissez les Os!" Krewe 5 Pure CSS 1:54.9 "And bringing it home... Pure CSS!" Krewe 6 Until Next Midnight 2:02.1 "Second line" (the banner goes home on "Back to the tombs", 2:13.4) The song ends at 137.6s; the Grim Reaper, last of all, slips into the tomb at about 139.8s. */ .parade .hv-mk{--dur:32.5s} /* the figure inside inherits --dur, --path and --grow from its track */ .parade .hv-mk,.parade .hv-mk > .hv-mk-fig{animation-iteration-count:1;animation-fill-mode:both} /* THE BEAT: Rattle Them Bones runs about 117 BPM, one beat every .51s. The walking steps (and the banner bob) swing once per beat, so the whole krewe steps in time with the band. The fancy moves (high kicks, hops, buck jumps, shimmies) keep the game's own speeds. */ .parade{--beat:.51s} .parade :is(.mv-strut,.mv-march,.mv-wave,.mv-headpop) :is(.bob,.legL,.legR,.armL,.armR), .parade .sync{animation-duration:var(--beat)!important} @keyframes hv-mk-left{ 0%{translate:50.9% 69.2%;opacity:0;visibility:visible} 3%{opacity:1} 14%{translate:50.2% 76%} 26%{translate:46% 84%} 36%{translate:20% 90%} 40%{translate:-14% 93%;opacity:1;visibility:visible} 40.1%,100%{translate:-14% 93%;opacity:0;visibility:hidden}} @keyframes hv-mk-right{ 0%{translate:50.9% 69.2%;opacity:0;visibility:visible} 3%{opacity:1} 14%{translate:51.6% 76%} 26%{translate:56% 84%} 36%{translate:82% 90%} 40%{translate:114% 93%;opacity:1;visibility:visible} 40.1%,100%{translate:114% 93%;opacity:0;visibility:hidden}} @keyframes hv-mk-grow{0%{scale:.36} 14%{scale:.55} 26%{scale:.78} 36%{scale:.95} 40%,100%{scale:1}} /* ============ ENTRANCES: each krewe comes in a different way (the paths from the Demon Killer game's levels) ============ Krewe 1 (Bone Rattlers) hv-mk-left/right out of the center tomb, peeling off left and right (level 1) Krewe 2 (Checkbox Voodoo) hv-band-path out of the LEFT tomb, across the path, into the right tomb (level 3) Krewe 3 (Cut Him Loose) hv-l4-path out of the LEFT tomb, toward you, off to the right (level 4) Krewe 4 (Laissez les Os) hv-l7-path a Mardi Gras crossing from behind the RIGHT tombs, heading left (level 7) Krewe 5 (Pure CSS) hv-mk-left/right back out of the center tomb to close the show (level 6) Krewe 6 (Until Next Midnight) hv-bye-path the goodbye: out of the center tomb, then home into the LEFT tomb Each krewe sets its --path, --grow and --dur on its tracks in index.html. */ @keyframes hv-band-path{ 0%{translate:26.9% 70.1%;opacity:0;visibility:visible} 3%{opacity:1} 12%{translate:31% 73.5%} 24%{translate:44% 75.5%} 36%{translate:62% 75.5%} 42%{translate:74% 74.2%;opacity:1;visibility:visible} 44%{translate:77% 73.8%;opacity:0} 44.1%,100%{translate:77% 73.8%;opacity:0;visibility:hidden}} @keyframes hv-band-grow{0%{scale:.38} 12%{scale:.48} 24%,36%{scale:.56} 44%,100%{scale:.52}} @keyframes hv-l4-path{ 0%{translate:26.9% 70.1%;opacity:0;visibility:visible} 3%{opacity:1} 14%{translate:33% 76%} 28%{translate:42% 84%} 40%{translate:62% 91%} 46%{translate:112% 94%;opacity:1;visibility:visible} 46.1%,100%{translate:112% 94%;opacity:0;visibility:hidden}} @keyframes hv-l4-grow{0%{scale:.34} 14%{scale:.5} 28%{scale:.72} 40%{scale:.9} 46%,100%{scale:1}} @keyframes hv-l7-path{ 0%{translate:67% 76.5%;opacity:0;visibility:visible} 3%{opacity:1} 14%{translate:60% 77%} 28%{translate:45% 77.5%} 40%{translate:31% 75%;opacity:1;visibility:visible} 44%{translate:28% 74%;opacity:0} 44.1%,100%{translate:28% 74%;opacity:0;visibility:hidden}} @keyframes hv-l7-grow{0%{scale:.5} 28%{scale:.58} 44%,100%{scale:.54}} /* THE GOODBYE (Krewe 6): out of the center tomb door, a few steps toward you, then a turn to the left and back in through the LEFT tomb's door (26.9% 70.1%), getting smaller as they go home. */ @keyframes hv-bye-path{ 0%{translate:50.9% 69.2%;opacity:0;visibility:visible} 3%{opacity:1} 12%{translate:50.4% 74%} 22%{translate:45% 76%} 32%{translate:35% 75%} 39%{translate:28.6% 71.4%;opacity:1;visibility:visible} 42%{translate:27% 70.3%;opacity:0} 42.1%,100%{translate:27% 70.3%;opacity:0;visibility:hidden}} @keyframes hv-bye-grow{0%{scale:.36} 12%{scale:.52} 22%{scale:.58} 32%{scale:.54} 42%,100%{scale:.4}} /* the hooded reapers' cloaks sway every two beats */ .hv-gang .cloak{transform-box:fill-box;transform-origin:50% 0;animation:hv-sp-fringe calc(var(--beat,.51s) * 2) ease-in-out infinite alternate} /* the Grim Reaper (the game's reaper-scythe.svg) doesn't walk: he glides, rising and tilting */ .hv-reaper{inset:0;background:url("haunt/reaper-scythe.svg") center bottom / contain no-repeat;transform-origin:50% 100%; /* pulled toward the parade's grays (his red eyes stay red), with the crows' moonlit edge so he reads against the tombs */ filter:saturate(.45) brightness(1.35) drop-shadow(0 0 1.5px rgba(225,228,240,.85)) drop-shadow(0 0 8px rgba(180,188,210,.35)); animation:hv-reaper-glide calc(var(--beat,.51s) * 4) ease-in-out infinite alternate} @keyframes hv-reaper-glide{from{translate:0 -4%;rotate:-3deg} to{translate:0 -10%;rotate:3deg}} /* A cloud slides over the moon once, from "Hats off" (1:23.7) while the jazz funeral comes through (the game's level 2) */ .hv-cloud-track{inset:0;animation:hv-cloud-pass 30s linear 83.7s 1 both} .hv-cloud{left:0;top:0;width:18%;aspect-ratio:320/140;background:url("haunt/cloud.svg") center/contain no-repeat} @keyframes hv-cloud-pass{0%{translate:31% 7%;opacity:0} 12%{opacity:.92} 88%{opacity:.92} 100%{translate:76% 5%;opacity:0}} /* ===== shared: the Skeleton Second Line pen's bones, dance moves and props, scoped to .hv-gang ===== */ .hv-gang{inset:0;--bone:#b3b3b3} .hv-gang .bt{fill:none} .hv-gang .b { fill: none; stroke: var(--bone, #ece3cc); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .hv-gang .b2 { fill: none; stroke: var(--bone, #ece3cc); stroke-width: 2.6; stroke-linecap: round; } .hv-gang .bt { fill: none; stroke: var(--bone, #ece3cc); stroke-width: 1.2; stroke-linecap: round; } .hv-gang .f { fill: var(--bone, #ece3cc); } .hv-gang .sk-skull { stroke: #1a1410; stroke-width: .7; } /* joints (in the 100 × 180 skeleton box) */ .hv-gang .bob { transform-origin: 30px 114px; } .hv-gang .legL { transform-origin: 26px 66px; } .hv-gang .legR { transform-origin: 34px 66px; } .hv-gang .armL { transform-origin: 22px 30px; } .hv-gang .armR { transform-origin: 38px 30px; } .hv-gang .fix { animation: none !important; transform: none; } .hv-gang .jaw { transform-origin: 30px 19px; } /* dance moves */ .hv-gang .mv-strut .bob { animation: hv-sp-bob .5s ease-in-out infinite alternate; } .hv-gang .mv-strut .legL, .hv-gang .mv-strut .armR { animation: hv-sp-swA .5s ease-in-out infinite alternate; } .hv-gang .mv-strut .legR, .hv-gang .mv-strut .armL { animation: hv-sp-swB .5s ease-in-out infinite alternate; } .hv-gang .mv-highkick .bob { animation: hv-sp-bob .36s ease-in-out infinite alternate; } .hv-gang .mv-highkick .legL, .hv-gang .mv-highkick .armR { animation: hv-sp-kA .36s ease-in-out infinite alternate; } .hv-gang .mv-highkick .legR, .hv-gang .mv-highkick .armL { animation: hv-sp-kB .36s ease-in-out infinite alternate; } .hv-gang .mv-hop .bob { animation: hv-sp-hop .27s ease-in-out infinite alternate; } .hv-gang .mv-hop .legL, .hv-gang .mv-hop .armR { animation: hv-sp-kA .27s ease-in-out infinite alternate; } .hv-gang .mv-hop .legR, .hv-gang .mv-hop .armL { animation: hv-sp-kB .27s ease-in-out infinite alternate; } .hv-gang .mv-sway .bob { animation: hv-sp-sway 1s ease-in-out infinite alternate; } .hv-gang .mv-sway .legL, .hv-gang .mv-sway .armR { animation: hv-sp-slA 1s ease-in-out infinite alternate; } .hv-gang .mv-sway .legR, .hv-gang .mv-sway .armL { animation: hv-sp-slB 1s ease-in-out infinite alternate; } .hv-gang .mv-conga .bob { animation: hv-sp-bob .4s ease-in-out infinite alternate; } .hv-gang .mv-conga .armR:not(.fix) { transform: rotate(-62deg); } .mv-conga .armL:not(.fix) { transform: rotate(-30deg); } .hv-gang .mv-conga .legL { animation: hv-sp-congaKick 1.2s ease-in-out infinite; } .hv-gang .mv-conga .legR { animation: hv-sp-swB .4s ease-in-out infinite alternate; } .hv-gang .mv-wave .bob { animation: hv-sp-bob .5s ease-in-out infinite alternate; } .hv-gang .mv-wave .legL { animation: hv-sp-swA .5s ease-in-out infinite alternate; } .hv-gang .mv-wave .legR { animation: hv-sp-swB .5s ease-in-out infinite alternate; } .hv-gang .mv-wave .armL { animation: hv-sp-wave .3s ease-in-out infinite alternate; } /* march: steady steps, a gentle bob, everyone in step (used by groups carrying things) */ .hv-gang .mv-march .bob, .hv-gang .sync { animation: hv-sp-march .5s ease-in-out infinite alternate; } .hv-gang .mv-march .legL, .hv-gang .mv-march .armR { animation: hv-sp-mA .5s ease-in-out infinite alternate; } .hv-gang .mv-march .legR, .hv-gang .mv-march .armL { animation: hv-sp-mB .5s ease-in-out infinite alternate; } /* buck jump: the second-line squat… and spring */ .hv-gang .mv-buck .bob { animation: hv-sp-buck .9s ease-in-out infinite; } .hv-gang .mv-buck .legL { animation: hv-sp-buckL .9s ease-in-out infinite; } .hv-gang .mv-buck .legR { animation: hv-sp-buckR .9s ease-in-out infinite; } .hv-gang .mv-buck .armL { animation: hv-sp-buckArmL .9s ease-in-out infinite; } .hv-gang .mv-buck .armR { animation: hv-sp-buckArmR .9s ease-in-out infinite; } /* twirl: a few steps, then a full spin */ .hv-gang .mv-twirl .bob { animation: hv-sp-twirl 2.4s ease-in-out infinite; } .hv-gang .mv-twirl .legL, .hv-gang .mv-twirl .armR { animation: hv-sp-swA .4s ease-in-out infinite alternate; } .hv-gang .mv-twirl .legR, .hv-gang .mv-twirl .armL { animation: hv-sp-swB .4s ease-in-out infinite alternate; } /* shimmy: shoulders and ribs shaking */ .hv-gang .mv-shimmy .bob { animation: hv-sp-shimmy .13s linear infinite alternate; } .hv-gang .mv-shimmy .legL { animation: hv-sp-slA .8s ease-in-out infinite alternate; } .hv-gang .mv-shimmy .legR { animation: hv-sp-slB .8s ease-in-out infinite alternate; } .hv-gang .mv-shimmy .armL { animation: hv-sp-shimArmL .13s linear infinite alternate; } .hv-gang .mv-shimmy .armR { animation: hv-sp-shimArmR .13s linear infinite alternate; } /* head pop: struts along, then the head (hat and all) pops off, flips and lands back on */ .hv-gang .mv-headpop .bob { animation: hv-sp-bob .5s ease-in-out infinite alternate; } .hv-gang .mv-headpop .legL, .hv-gang .mv-headpop .armR { animation: hv-sp-swA .5s ease-in-out infinite alternate; } .hv-gang .mv-headpop .legR, .hv-gang .mv-headpop .armL { animation: hv-sp-swB .5s ease-in-out infinite alternate; } .hv-gang .mv-headpop .headg { animation: hv-sp-headpop 3.2s ease-in-out infinite; } .hv-gang .headg { transform-origin: 30px 12px; } /* things that move on their own */ .hv-gang .shake { transform-origin: 48px 4px; animation: hv-sp-shake .14s ease-in-out infinite alternate; } .hv-gang .toss { transform-box: fill-box; transform-origin: center; animation: hv-sp-toss 1.6s ease-out infinite; } .hv-gang .glow { animation: hv-sp-glow 1.3s ease-in-out infinite alternate; } .hv-gang .swish { transform-origin: 40px 30px; animation: hv-sp-swish .5s ease-in-out infinite alternate; } .hv-gang .wavebone { transform-origin: 48px 4px; animation: hv-sp-fan .45s ease-in-out infinite alternate; } .hv-gang .steam { animation: hv-sp-steam 1.4s ease-out infinite; } .hv-gang .frg { transform-box: fill-box; transform-origin: 50% 0; animation: hv-sp-fringe .25s ease-in-out infinite alternate; } .hv-gang .dangle { animation: hv-sp-dangle 1s ease-in-out infinite alternate; } .hv-gang .dangle2 { animation: hv-sp-dangle 1s ease-in-out infinite alternate-reverse; } @keyframes hv-sp-buck { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(5%) rotate(2deg); } 55% { transform: translateY(-13%) rotate(-4deg); } 78% { transform: translateY(0); } } @keyframes hv-sp-buckL { 0%, 100% { transform: rotate(4deg); } 30% { transform: rotate(22deg); } 55% { transform: rotate(34deg); } 78% { transform: rotate(4deg); } } @keyframes hv-sp-buckR { 0%, 100% { transform: rotate(-4deg); } 30% { transform: rotate(-22deg); } 55% { transform: rotate(-34deg); } 78% { transform: rotate(-4deg); } } @keyframes hv-sp-buckArmL { 0%, 100% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 55% { transform: rotate(110deg); } } @keyframes hv-sp-buckArmR { 0%, 100% { transform: rotate(-10deg); } 30% { transform: rotate(10deg); } 55% { transform: rotate(-110deg); } } @keyframes hv-sp-twirl { 0%, 20%, 40%, 60% { transform: translateY(0) scaleX(1); } 10%, 30%, 50% { transform: translateY(-3%) scaleX(1); } 70% { transform: translateY(-5%) scaleX(.06); } 80% { transform: translateY(-6%) scaleX(-1); } 90% { transform: translateY(-5%) scaleX(.06); } 100% { transform: translateY(0) scaleX(1); } } @keyframes hv-sp-shimmy { from { transform: translateX(-1.4px) rotate(-2.5deg); } to { transform: translateX(1.4px) rotate(2.5deg); } } @keyframes hv-sp-shimArmL { from { transform: rotate(30deg); } to { transform: rotate(42deg); } } @keyframes hv-sp-shimArmR { from { transform: rotate(-42deg); } to { transform: rotate(-30deg); } } @keyframes hv-sp-headpop { 0%, 68% { transform: none; } 74% { transform: translate(1px, -24px) rotate(-100deg); } 80% { transform: translate(2px, -32px) rotate(-210deg); } 87% { transform: translate(1px, -6px) rotate(-340deg); } 90% { transform: translate(0, 0) rotate(-360deg); } 93% { transform: translate(0, -4px) rotate(-360deg); } 96%, 100% { transform: translate(0, 0) rotate(-360deg); } } @keyframes hv-sp-shake { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } } @keyframes hv-sp-toss { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 55% { transform: translate(18px, -30px) rotate(220deg); opacity: 1; } 100% { transform: translate(38px, 6px) rotate(420deg); opacity: 0; } } @keyframes hv-sp-glow { from { opacity: .45; } to { opacity: 1; } } @keyframes hv-sp-swish { from { transform: rotate(-6deg) skewY(-4deg); } to { transform: rotate(10deg) skewY(5deg); } } @keyframes hv-sp-steam { from { transform: translateY(2px); opacity: 0; } 40% { opacity: .9; } to { transform: translateY(-7px); opacity: 0; } } @keyframes hv-sp-fringe { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } } @keyframes hv-sp-dangle { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } .hv-gang .umb { transform-origin: 48px 6px; animation: hv-sp-tilt .5s ease-in-out infinite alternate; } .hv-gang .spin { animation: hv-sp-spin 1.1s linear infinite; } .hv-gang .fan { transform-origin: 48px 4px; animation: hv-sp-fan .32s ease-in-out infinite alternate; } .hv-gang .hanky { transform-origin: 48px 4px; animation: hv-sp-hanky .22s ease-in-out infinite alternate; } .hv-gang .horn { animation: hv-sp-blow .5s ease-in-out infinite alternate; } .hv-gang .slide { animation: hv-sp-slide .5s ease-in-out infinite alternate; } .hv-gang .bell { transform-origin: 20px -5px; animation: hv-sp-tilt .5s ease-in-out infinite alternate; } .hv-gang .tapA { animation: hv-sp-tapA .25s ease-in-out infinite alternate !important; } .hv-gang .tapB { animation: hv-sp-tapB .25s ease-in-out infinite alternate !important; } .hv-gang .horn { transform-origin: 30px 21.5px; } @keyframes hv-sp-swA { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } } @keyframes hv-sp-swB { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } } @keyframes hv-sp-mA { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } } @keyframes hv-sp-mB { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } } @keyframes hv-sp-kA { from { transform: rotate(34deg); } to { transform: rotate(-14deg); } } @keyframes hv-sp-kB { from { transform: rotate(-14deg); } to { transform: rotate(34deg); } } @keyframes hv-sp-slA { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } } @keyframes hv-sp-slB { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } @keyframes hv-sp-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4%) rotate(3deg); } } @keyframes hv-sp-march { from { transform: translateY(0); } to { transform: translateY(-1.6%); } } @keyframes hv-sp-hop { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-9%) rotate(6deg); } } @keyframes hv-sp-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } } @keyframes hv-sp-wave { from { transform: rotate(120deg); } to { transform: rotate(160deg); } } @keyframes hv-sp-congaKick { 0%, 60%, 100% { transform: rotate(-10deg); } 75% { transform: rotate(-60deg); } } @keyframes hv-sp-tilt { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } @keyframes hv-sp-spin { to { transform: translateX(-27px); } } @keyframes hv-sp-fan { from { transform: rotate(-24deg); } to { transform: rotate(18deg); } } @keyframes hv-sp-hanky { from { transform: rotate(-12deg) skewY(-6deg); } to { transform: rotate(14deg) skewY(8deg); } } @keyframes hv-sp-blow { from { transform: rotate(2deg); } to { transform: rotate(-6deg); } } @keyframes hv-sp-slide { from { transform: translateX(0); } to { transform: translateX(-12px); } } @keyframes hv-sp-tapA { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } } @keyframes hv-sp-tapB { from { transform: rotate(5deg); } to { transform: rotate(-7deg); } } @keyframes hv-sp-jaw { from { transform: translateY(0); } to { transform: translateY(1.8px); } } @keyframes hv-sp-riderWave { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } } /* Uncle Bones' coffin: lid closed most of the time, then it pops and he sits up to wave */ .hv-gang .rider{animation:hv-rider 5.2s ease-in-out infinite} .hv-gang .lid{transform-box:fill-box;transform-origin:50% 100%;animation:hv-lid 5.2s ease-in-out infinite} .hv-gang .riderArm{transform-origin:38px 30px;animation:hv-sp-riderWave .28s ease-in-out infinite alternate} @keyframes hv-rider{0%,52%,94%,100%{transform:translateY(32px)} 60%,86%{transform:translateY(-4px)}} @keyframes hv-lid{0%,50%,96%,100%{transform:none} 58%,88%{transform:translate(-8px,-26px) rotate(-4deg)}} /* ===================== BATS AND CROWS ===================== Like the parade, the sky only appears after the click, and every --d counts from it. Each flight happens once (fill-mode both), so before and after its turn a creature is out of sight. */ .sky{inset:0} .sky .hv-track{animation-iteration-count:1;animation-fill-mode:both;animation-delay:var(--d)} /* the game's bat: a clip-path silhouette with two red eyes; it flaps by squashing its height */ .bat-cross i,.bat-size i{ background:radial-gradient(circle at 46% 42%,#ff2a2a 0 3%,transparent 4%),radial-gradient(circle at 54% 42%,#ff2a2a 0 3%,transparent 4%),#3a3a41; clip-path:polygon(0% 22%,12% 0%,22% 30%,35% 16%,42% 40%,47% 24%,50% 34%,53% 24%,58% 40%,65% 16%,78% 30%,88% 0%,100% 22%,92% 46%,80% 56%,68% 50%,58% 76%,50% 100%,42% 76%,32% 50%,20% 56%,8% 46%); transform-origin:50% 40%;animation:bat-flap var(--f,.26s) ease-in-out infinite alternate} @keyframes bat-flap{from{scale:1 1}to{scale:1 .45}} /* BATS ACROSS THE MOON: right to left over the sky, dipping a little as they pass the moon */ .bat-cross{animation-name:bat-cross;animation-duration:7.3s;animation-timing-function:linear} .bat-cross i{left:0;top:0;width:var(--s,3.2%);aspect-ratio:150/58;translate:-50% -50%} @keyframes bat-cross{0%{translate:106% var(--y)} 50%{translate:50% calc(var(--y) - 4%)} 100%{translate:-10% calc(var(--y) + 2%)}} /* BAT BURST: each bat starts tiny in the center tomb's door (50.9% 62%) and grows as it flies out past you (--dx/--dy = where it leaves, --g = how big it gets). Gone after 3 seconds. */ .bat-burst{animation-name:bat-burst;animation-duration:3s;animation-timing-function:cubic-bezier(.55,0,.85,.6)} .bat-size{left:50.9%;top:62%;width:11%;aspect-ratio:150/58;translate:-50% -50%; animation:bat-grow 3s cubic-bezier(.6,0,.9,.5) var(--d) 1 both} .bat-size i{inset:0} @keyframes bat-burst{0%{translate:0 0;opacity:0} 8%{opacity:1} 99%{translate:var(--dx) var(--dy);opacity:1} 100%{translate:var(--dx) var(--dy);opacity:0}} @keyframes bat-grow{from{scale:.04} to{scale:var(--g,1.3)}} /* CROWS: a body and two wings. Each wing swings from the shoulder, the far one a shade darker, so they beat like real wings instead of squashing. They drift left to right with a lazy rise or fall. */ .crow-fly{animation-name:crow-fly;animation-duration:var(--dur,13s);animation-timing-function:linear} @keyframes crow-fly{from{translate:-8% var(--y)} to{translate:108% calc(var(--y) + var(--rise,0%))}} .crow{left:0;top:0;width:var(--s,4%);aspect-ratio:2/1;translate:-50% -50%; /* a faint moonlit edge, so black birds still read against the dark moss */ filter:drop-shadow(0 0 1.5px rgba(225,228,240,.9)) drop-shadow(0 0 7px rgba(180,188,210,.4)); animation:crow-bob calc(var(--f,.5s) * 2) ease-in-out infinite} @keyframes crow-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8%)}} .crow b{position:absolute;display:block} .crow .body{inset:0;background:#0b0b0d; clip-path:polygon(100% 47%,93% 40%,88% 30%,81% 31%,76% 38%,60% 36%,40% 38%,26% 41%,2% 31%,0% 41%,3% 51%,4% 61%,26% 56%,44% 64%,64% 66%,78% 58%,88% 52%,94% 50%)} .crow .wing{left:22%;bottom:52%;width:44%;height:120%;background:#101013;transform-origin:88% 100%; clip-path:polygon(88% 100%,78% 58%,56% 26%,10% 0%,24% 14%,4% 18%,20% 28%,2% 36%,22% 44%,10% 54%,34% 64%,52% 80%,64% 96%); animation:crow-wing var(--f,.5s) ease-in-out infinite alternate} .crow .wing.far{background:#060607;animation-delay:calc(var(--f,.5s) * -.15)} @keyframes crow-wing{from{rotate:-12deg;scale:1 1} to{rotate:8deg;scale:1 -.55}}