/* ---------------------------------------------------------------------------
 * The village scene.
 *
 * Layer positions, keyframes and timings below are taken from Google Santa
 * Tracker's `modvil-village` scene stylesheet (Apache-2.0) so the parallax
 * layers, the skiing elves, the bike pack, the peekaboo tree, the fountain
 * and the snowman all move exactly as they do there. Google branding, sound
 * triggers, the countdown and the family guide are not carried over, and the
 * original's mobile media queries are replaced by the stage scaling in
 * app.css (the stage is always laid out at 1920x1050 and then scaled).
 * ------------------------------------------------------------------------ */

.village{overflow-x:hidden;position:absolute;top:0;left:0;right:0;bottom:0}

.village>div{position:absolute;top:0;left:0;right:0;bottom:0;background:transparent center bottom no-repeat;background-size:2040px;overflow:hidden}

.village .layer1{background-image:url(../img/village/1.svg)}

.village .layer2{background-image:url(../img/village/2.svg)}

.village .layer2 .elfski1{position:absolute;top:130px;left:calc(50% + 1040px);width:58px;height:67px;background-image:url(../img/village/elfski1.svg);background-repeat:no-repeat}

.village .layer2 .elfski2{position:absolute;top:110px;left:calc(50% + 1050px);width:58px;height:67px;background-image:url(../img/village/elfski2.svg);background-repeat:no-repeat}

.village .layer2 .elfski1,.village .layer2 .elfski2{animation:modvil-village__elfski 5000ms infinite linear forwards}

.village .layer2 .elfski2{animation-delay:80ms}

@keyframes modvil-village__elfski{0%{transform:translate3d(0, 0, 0) rotateZ(10deg)}30%{transform:translate3d(-500px, 20px, 0) rotateZ(0deg)}40%{transform:translate3d(-750px, 190px, 0) rotateZ(0deg)}50%{transform:translate3d(-1000px, 260px, 0) rotateZ(10deg)}100%{transform:translate3d(-2150px, 260px, 0) rotateZ(10deg)}}

.village .layer3{background-image:url(../img/village/3.svg)}

.village .layer3 .elfbike1,.village .layer3 .elfbike2,.village .layer3 .elfbike3,.village .layer3 .elfbike4,.village .layer3 .elfbike5,.village .layer3 .elfbike6,.village .layer3 .elfchair,.village .layer3 .elfboard1,.village .layer3 .elfboard2,.village .layer3 .elf-glitch{position:absolute}

.village .layer3 .elf-glitch{width:84px;height:133px;left:calc(50% - 477px);top:494px}

.village .layer3 .elf-glitch *{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../img/village/elf-glitch-front.svg);background-color:transparent;background-size:cover;transform:translate3d(0, 0, 0);background-blend-mode:transparent}

.village .layer3 .elf-glitch *:nth-child(3){background-color:rgba(255,255,255,.2);background-blend-mode:overlay;opacity:0}

.village .layer3 .elf-glitch.glitch *:nth-child(2){transform:translate3d(3px, 0, 0);animation:glitch-anim-1-horizontal 3s infinite linear alternate}

.village .layer3 .elf-glitch.glitch *:nth-child(3){opacity:1;transform:translate3d(calc(-1 * 3px), 0, 0);animation:glitch-anim-2-horizontal 3s infinite linear alternate}

.village .layer3 .elf-glitch.glitch *:nth-child(4){transform:translate3d(0, calc(-1 * 7px), 0) scale3d(-1, -1, 1);animation:glitch-anim-3-horizontal 3s infinite linear alternate}

.village .layer3 .elf-glitch.glitch *:nth-child(5){animation:glitch-anim-flash .5s steps(1, end) infinite}

@keyframes glitch-anim-1-horizontal{0%{clip-path:polygon(0 2%, 100% 2%, 100% 5%, 0 5%)}10%{clip-path:polygon(0 15%, 100% 15%, 100% 15%, 0 15%)}20%{clip-path:polygon(0 10%, 100% 10%, 100% 20%, 0 20%)}30%{clip-path:polygon(0 1%, 100% 1%, 100% 2%, 0 2%)}40%{clip-path:polygon(0 33%, 100% 33%, 100% 33%, 0 33%)}50%{clip-path:polygon(0 44%, 100% 44%, 100% 44%, 0 44%)}60%{clip-path:polygon(0 50%, 100% 50%, 100% 20%, 0 20%)}70%{clip-path:polygon(0 70%, 100% 70%, 100% 70%, 0 70%)}80%{clip-path:polygon(0 80%, 100% 80%, 100% 80%, 0 80%)}90%{clip-path:polygon(0 50%, 100% 50%, 100% 55%, 0 55%)}100%{clip-path:polygon(0 70%, 100% 70%, 100% 80%, 0 80%)}}

@keyframes glitch-anim-2-horizontal{0%{clip-path:polygon(0 25%, 100% 25%, 100% 30%, 0 30%)}15%{clip-path:polygon(0 3%, 100% 3%, 100% 3%, 0 3%)}22%{clip-path:polygon(0 5%, 100% 5%, 100% 20%, 0 20%)}31%{clip-path:polygon(0 20%, 100% 20%, 100% 20%, 0 20%)}45%{clip-path:polygon(0 40%, 100% 40%, 100% 40%, 0 40%)}51%{clip-path:polygon(0 52%, 100% 52%, 100% 59%, 0 59%)}63%{clip-path:polygon(0 60%, 100% 60%, 100% 60%, 0 60%)}76%{clip-path:polygon(0 75%, 100% 75%, 100% 75%, 0 75%)}81%{clip-path:polygon(0 65%, 100% 65%, 100% 40%, 0 40%)}94%{clip-path:polygon(0 45%, 100% 45%, 100% 50%, 0 50%)}100%{clip-path:polygon(0 14%, 100% 14%, 100% 33%, 0 33%)}}

@keyframes glitch-anim-3-horizontal{0%{clip-path:polygon(0 1%, 100% 1%, 100% 3%, 0 3%)}5%{clip-path:polygon(0 10%, 100% 10%, 100% 9%, 0 9%)}10%{clip-path:polygon(0 5%, 100% 5%, 100% 6%, 0 6%)}25%{clip-path:polygon(0 20%, 100% 20%, 100% 20%, 0 20%)}27%{clip-path:polygon(0 10%, 100% 10%, 100% 10%, 0 10%)}30%{clip-path:polygon(0 30%, 100% 30%, 100% 25%, 0 25%)}33%{clip-path:polygon(0 15%, 100% 15%, 100% 16%, 0 16%)}37%{clip-path:polygon(0 40%, 100% 40%, 100% 39%, 0 39%)}40%{clip-path:polygon(0 20%, 100% 20%, 100% 21%, 0 21%)}45%{clip-path:polygon(0 60%, 100% 60%, 100% 55%, 0 55%)}50%{clip-path:polygon(0 30%, 100% 30%, 100% 31%, 0 31%)}53%{clip-path:polygon(0 70%, 100% 70%, 100% 69%, 0 69%)}57%{clip-path:polygon(0 40%, 100% 40%, 100% 41%, 0 41%)}60%{clip-path:polygon(0 80%, 100% 80%, 100% 75%, 0 75%)}65%{clip-path:polygon(0 50%, 100% 50%, 100% 51%, 0 51%)}70%{clip-path:polygon(0 90%, 100% 90%, 100% 90%, 0 90%)}73%{clip-path:polygon(0 60%, 100% 60%, 100% 60%, 0 60%)}80%{clip-path:polygon(0 100%, 100% 100%, 100% 99%, 0 99%)}100%{clip-path:polygon(0 70%, 100% 70%, 100% 71%, 0 71%)}}

.village .layer3 .elfbike1{width:80px;height:94px;background-image:url(../img/village/elfbike1.svg);left:calc(50% + -165px);top:590px;animation:elfbike1 14s infinite linear forwards}

@keyframes elfbike1{0%{transform:translate3d(-945px, -145px, 0) rotateZ(20deg)}10%{transform:translate3d(-945px, -145px, 0) rotateZ(20deg)}25%{transform:translate3d(-425px, 25px, 0) rotateZ(-10deg)}50%{transform:translate3d(335px, -15px, 0) rotateZ(10deg)}65%{transform:translate3d(745px, 75px, 0) rotateZ(30deg)}90%{transform:translate3d(1005px, 465px, 0) rotateZ(50deg)}100%{transform:translate3d(1005px, 465px, 0) rotateZ(50deg)}}

.village .layer3 .elfbike2{width:77px;height:78px;background-image:url(../img/village/elfbike2.svg);left:calc(50% + -85px);top:580px;animation:elfbike2 14s infinite linear forwards}

@keyframes elfbike2{0%{transform:translate3d(-1015px, -45px, 0) rotateZ(15deg)}16%{transform:translate3d(-1015px, -45px, 0) rotateZ(15deg)}33%{transform:translate3d(-495px, 55px, 0) rotateZ(2deg)}49%{transform:translate3d(115px, -35px, 0) rotateZ(2deg)}62%{transform:translate3d(465px, -25px, 0) rotateZ(12deg)}85%{transform:translate3d(875px, 485px, 0) rotateZ(52deg)}100%{transform:translate3d(875px, 485px, 0) rotateZ(52deg)}}

.village .layer3 .elfbike3{width:81px;height:93px;background-image:url(../img/village/elfbike3.svg);left:calc(50% + 243px);top:580px;animation:elfbike3 14s infinite linear forwards}

@keyframes elfbike3{0%{transform:translate3d(-1355px, -56px, 0) rotateZ(5deg)}14%{transform:translate3d(-1355px, -56px, 0) rotateZ(5deg)}32%{transform:translate3d(-695px, 50px, 0) rotateZ(-5deg)}50%{transform:translate3d(-205px, -3px, 0) rotateZ(3deg)}65%{transform:translate3d(275px, 47px, 0) rotateZ(13deg)}90%{transform:translate3d(685px, 477px, 0) rotateZ(33deg)}100%{transform:translate3d(685px, 477px, 0) rotateZ(33deg)}}

.village .layer3 .elfbike4{width:104px;height:113px;background-image:url(../img/village/elfbike4.svg);left:calc(50% + 15px);top:540px;animation:elfbike4 14s infinite linear forwards}

@keyframes elfbike4{0%{transform:translate3d(-1135px, -75px, 0) rotateZ(15deg)}26%{transform:translate3d(-1135px, -75px, 0) rotateZ(15deg)}48%{transform:translate3d(-655px, 55px, 0) rotateZ(-5deg)}70%{transform:translate3d(-35px, -35px, 0) rotateZ(2deg)}84%{transform:translate3d(435px, 65px, 0) rotateZ(2deg)}99%{transform:translate3d(1015px, 515px, 0) rotateZ(42deg)}100%{transform:translate3d(1015px, 515px, 0) rotateZ(42deg)}}

.village .layer3 .elfbike5{width:103px;height:120px;background-image:url(../img/village/elfbike5.svg);left:calc(50% + 125px);top:560px;animation:elfbike5 14s infinite linear forwards}

@keyframes elfbike5{0%{transform:translate3d(-1255px, -65px, 0) rotateZ(2deg)}20%{transform:translate3d(-1255px, -65px, 0) rotateZ(2deg)}40%{transform:translate3d(-615px, 15px, 0) rotateZ(2deg)}60%{transform:translate3d(-45px, -15px, 0) rotateZ(0deg)}75%{transform:translate3d(445px, 15px, 0) rotateZ(18deg)}95%{transform:translate3d(715px, 505px, 0) rotateZ(29deg)}100%{transform:translate3d(715px, 505px, 0) rotateZ(29deg)}}

.village .layer3 .elfbike6{width:104px;height:119px;background-image:url(../img/village/elfbike6.svg);left:calc(50% + -265px);top:550px;animation:elfbike6 14s infinite linear forwards}

@keyframes elfbike6{0%{transform:translate3d(-865px, -115px, 0) rotateZ(19deg)}20%{transform:translate3d(-865px, -115px, 0) rotateZ(19deg)}45%{transform:translate3d(-245px, 65px, 0) rotateZ(-1deg)}65%{transform:translate3d(325px, -45px, 0) rotateZ(3deg)}80%{transform:translate3d(785px, 65px, 0) rotateZ(16deg)}97%{transform:translate3d(1215px, 515px, 0) rotateZ(36deg)}100%{transform:translate3d(1215px, 515px, 0) rotateZ(36deg)}}

.village .layer3 .elfchair{width:97px;height:77px;background-image:url(../img/village/elfchair.svg);left:calc(50% + 392px);top:620px;animation:elfchair 14s infinite linear forwards}

.village .layer3 .elfchair::after{content:"";background-image:url(../img/village/elfchair-wheel.svg);width:30px;height:30px;position:absolute;left:20px;top:40px;animation:rotate 500ms infinite linear}

@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@keyframes elfchair{0%{transform:translate3d(-1555px, -165px, 0) rotateZ(0deg)}1%{transform:translate3d(-1555px, -165px, 0) rotateZ(0deg)}15%{transform:translate3d(-965px, 35px, 0) rotate(-6deg)}40%{transform:translate3d(-25px, -45px, 0) rotate(-6deg)}47%{transform:translate3d(204px, 35px, 0) rotate(8deg)}65%{transform:translate3d(534px, 435px, 0) rotate(15deg)}100%{transform:translate3d(534px, 435px, 0) rotate(15deg)}}

.village .layer3 .elfboard1{width:72px;height:108px;background-image:url(../img/village/elfboard1.svg);left:calc(50% + 449px);top:636px;animation:elfboard1 14s infinite linear forwards}

@keyframes elfboard1{0%{transform:translate3d(-1555px, -175px, 0) rotateZ(5deg)}6%{transform:translate3d(-1555px, -175px, 0) rotateZ(5deg)}25%{transform:translate3d(-935px, -15px, 0) rotateZ(-15deg)}47.5%{transform:translate3d(-215px, -115px, 0) rotateZ(15deg)}60%{transform:translate3d(150px, 0, 0) rotateZ(-5deg)}72%{transform:translate3d(305px, 415px, 0) rotateZ(5deg)}100%{transform:translate3d(305px, 415px, 0) rotateZ(5deg)}}

.village .layer3 .elfboard2{width:65px;height:94px;background-image:url(../img/village/elfboard2.svg);left:calc(50% + 545px);top:624px;animation:elfboard2 14s infinite linear forwards}

@keyframes elfboard2{0%{transform:translate3d(-1650px, -150px, 0) rotateZ(5deg)}4%{transform:translate3d(-1650px, -150px, 0) rotateZ(5deg)}20%{transform:translate3d(-1060px, -10px, 0) rotateZ(-15deg)}40%{transform:translate3d(-500px, -50px, 0) rotateZ(15deg)}55%{transform:translate3d(0, 0, 0) rotateZ(-5deg)}70%{transform:translate3d(410px, 430px, 0) rotateZ(5deg)}100%{transform:translate3d(410px, 430px, 0) rotateZ(5deg)}}

.village .layer4{background-image:url(../img/village/4.svg)}

.village .layer4 .retro{position:absolute;width:83px;height:96px;top:500px;left:calc(50% - 476px);border:0;background:transparent;padding:0;margin:0;cursor:pointer}

.village .layer4 .waterspout{position:absolute;width:117px;height:132px;left:calc(50% - 55px);top:607px;overflow:hidden}

.village .layer4 .waterspout-bottom{width:9px;height:79px;position:absolute;left:53px;top:54px;background-image:url(../img/village/waterspout-bottom.svg);background-repeat:no-repeat;animation:waterspout-bottom 5000ms infinite ease-in-out}

.village .layer4 .waterspout-top{top:0;left:0;width:116px;height:82px;position:absolute;background-image:url(../img/village/waterspout-top.svg);background-repeat:no-repeat;animation:waterspout-top 5000ms infinite ease-in-out}

@keyframes waterspout-bottom{0%{transform:translate3d(0, 130px, 0) scale(0.6)}30%{transform:translate3d(0, 0, 0) scale(1)}80%{transform:translate3d(0, 0, 0) scale(1)}100%{transform:translate3d(0, 130px, 0) scale(0.6)}}

@keyframes waterspout-top{0%{transform:translate3d(0, 145px, 0) scale(0, 0) rotateZ(5deg)}33%{transform:translate3d(0, 0, 0) scale(1, 1) rotateZ(-5deg)}40%{transform:translate3d(0, 5px, 0) scale(1, 1) rotateZ(5deg)}50%{transform:translate3d(0, 0, 0) scale(1, 1) rotateZ(-5deg)}60%{transform:translate3d(0, 5px, 0) scale(1, 1) rotateZ(5deg)}70%{transform:translate3d(0, 0, 0) scale(1, 1) rotateZ(-5deg)}80%{transform:translate3d(0, 5px, 0) scale(1, 1) rotateZ(5deg)}100%{transform:translate3d(0, 145px, 0) scale(0, 0) rotateZ(5deg)}}

.village .layer4 .snowman-build{position:absolute;width:122px;height:188px;left:calc(50% + 20px);top:807px}

.village .layer4 .snowman-build-bottom{top:0;left:0;width:100%;height:100%;position:absolute;background-image:url(../img/village/snowman-build-bottom.svg);background-repeat:no-repeat;background-size:contain}

.village .layer4 .snowman-build-top{top:0;left:0;width:100%;height:100%;position:absolute;background-image:url(../img/village/snowman-build-top.svg);background-repeat:no-repeat;background-size:contain;transform-origin:center center;animation:heavy-snow 7000ms infinite ease-in-out}

@keyframes heavy-snow{0%{transform:translate3d(0, 3px, 0) rotateZ(0deg)}50%{transform:translate3d(-20px, 11px, 0) rotateZ(-30deg)}100%{transform:translate3d(0, 3px, 0) rotateZ(0deg)}}

.village .layer4 .peekaboo{position:absolute;top:619px;left:calc(50% - 506px);width:108px;height:161px}

.village .layer4 .peekaboo-elf{position:absolute;width:73px;height:95px;top:11px;background-image:url(../img/village/tree-elf.svg);background-repeat:no-repeat;background-size:contain;animation:peekaboo 8000ms infinite ease-in-out}

.village .layer4 .peekaboo-tree{position:absolute;background-image:url(../img/village/tree.svg);background-repeat:no-repeat;background-size:contain;width:98px;height:161px;left:12px}

@keyframes peekaboo{0%{transform:translate3d(20px, 28px, 0) rotateZ(39deg)}10%{transform:translate3d(0, 0, 0) rotateZ(0deg)}50%{transform:translate3d(20px, 28px, 0) rotateZ(39deg)}60%{transform:translate3d(53px, 0, 0) rotateZ(40deg)}100%{transform:translate3d(20px, 28px, 0) rotateZ(39deg)}}