/* ANIMATIONS */

:root {
    --color-effect-new: #42b2bd;
    --color-effect-new-tunnel: #381a0c;
}


@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5);}
    100% { opacity: 1; transform: scale(1);}
}


.time-left,
button {
    animation:pop-in 0.2s ease-out;
}


@keyframes glowPulse {
    0% {
        box-shadow: 0 0 1rem var(--color-effect-new), 0 0 1rem var(--color-effect-new);
        opacity: 1;
    }
    20% {
        box-shadow: 0 0 1rem var(--color-effect-new), 0 0 2rem transparent;
        opacity: 0.5;
    }
    40% {
        box-shadow: 0 0 1rem var(--color-effect-new), 0 0 3rem var(--color-effect-new);
        opacity: 0.75;
    }
    60% {
        box-shadow: 0 0 1rem var(--color-effect-new), 0 0 3rem transparent;
        opacity: 0.5;
    }
    80% {
        box-shadow: 0 0 1rem var(--color-effect-new), 0 0 2rem var(--color-effect-new);
        opacity: 0.75;
    }
    100% {
        box-shadow: 0 0 1rem var(--color-effect-new), 0 0 2rem transparent;
        opacity: 0;
    }
}


.message.unread::after,
.inventory-item.effect-new::after,
.building.effect-new::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    left:0;
    animation: glowPulse 3s forwards ease-in-out;
    border: 0.075rem solid var(--color-effect-new);
    border-radius: var(--rounded-border);
    box-shadow: 0 0 1rem 1rem var(--color-effect-new);
    background-color: var(--color-effect-new);
    pointer-events:none;
    touch-action:none;
}
.building.effect-new::after {
    border-radius: var(--rounded-border-zoomable);
}
.message.unread::after {
    border-radius: var(--rounded-border) 0 0 var(--rounded-border);
}
.inventory-item.effect-new::after {
    border-radius: 4rem 4rem var(--rounded-border-zoomable) var(--rounded-border-zoomable) !important;
}
.message.unread.blink-until-read::after {
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


.building.effect-new .img-wrap::after {
    width: inherit;
    height: inherit;
}

.effect-placement {
    --size-x: calc(var(--cell-size) * 1.4);
    --size-y: calc(var(--cell-size) * 1.4);

    width: var(--size-x);
    height: var(--size-y);
    background-image: url('../images/placement-dust.png');
    background-size: calc(var(--size-x) * 7) calc(var(--size-y) * 7);
    animation: placement-dust 0.8s forwards step-end;
    position: absolute;
    top: calc(var(--size-x) * -0.2);
    left: calc(var(--size-x) * -0.2);
    pointer-events: none;
    touch-action: none;
    z-index: 1;
    contain: strict;
}

@-webkit-keyframes placement-dust {
    0% {
        background-position-x: 0;
        background-position-y: 0;
	opacity: 0.5;
    }
    2.04% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * 0);
	opacity: 0.6;
    }
    4.08% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * 0);
	opacity: 0.7;
    }
    6.12% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * 0);
	opacity: 0.8;
    }
    8.16% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * 0);
	opacity: 0.9;
    }
    10.2% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * 0);
	opacity: 1;
    }
    12.24% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * 0);
    }
    14.28% {
        background-position-x: calc(var(--size-x) * 0);
        background-position-y: calc(var(--size-y) * -1);
    }
    16.32% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * -1);
    }
    18.36% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * -1);
    }
    20.4% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * -1);
    }
    22.44% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * -1);
    }
    24.48% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * -1);
    }
    26.52% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -1);
    }
    28.56% {
        background-position-x: calc(var(--size-x) * 0);
        background-position-y: calc(var(--size-y) * -2);
    }
    30.6% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * -2);
    }
    32.64% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * -2);
    }
    34.68% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * -2);
    }
    36.72% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * -2);
    }
    38.76% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * -2);
    }
    40.8% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -2);
    }
    42.84% {
        background-position-x: calc(var(--size-x) * 0);
        background-position-y: calc(var(--size-y) * -3);
    }
    44.88% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * -3);
    }
    46.92% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * -3);
    }
    48.96% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * -3);
    }
    51% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * -3);
    }
    53.04% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * -3);
    }
    55.08% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -3);
    }
    57.12% {
        background-position-x: calc(var(--size-x) * 0);
        background-position-y: calc(var(--size-y) * -4);
    }
    59.16% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * -4);
    }
    61.2% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * -4);
    }
    63.24% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * -4);
    }
    65.28% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * -4);
    }
    67.32% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * -4);
    }
    69.36% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -4);
    }
    71.4% {
        background-position-x: calc(var(--size-x) * 0);
        background-position-y: calc(var(--size-y) * -5);
    }
    73.44% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * -5);
    }
    75.48% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * -5);
    }
    77.52% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * -5);
    }
    79.56% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * -5);
    }
    81.6% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * -5);
    }
    83.64% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -5);
    }
    85.68% {
        background-position-x: calc(var(--size-x) * 0);
        background-position-y: calc(var(--size-y) * -6);
    }
    87.72% {
        background-position-x: calc(var(--size-x) * -1);
        background-position-y: calc(var(--size-y) * -6);
	opacity: 1;
    }
    89.76% {
        background-position-x: calc(var(--size-x) * -2);
        background-position-y: calc(var(--size-y) * -6);
	opacity: 0.9;
    }
    91.8% {
        background-position-x: calc(var(--size-x) * -3);
        background-position-y: calc(var(--size-y) * -6);
	opacity: 0.8;
    }
    93.84% {
        background-position-x: calc(var(--size-x) * -4);
        background-position-y: calc(var(--size-y) * -6);
	opacity: 0.7;
    }
    95.88% {
        background-position-x: calc(var(--size-x) * -5);
        background-position-y: calc(var(--size-y) * -6);
	opacity: 0.6;
    }
    97.92% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -6);
	opacity: 0.5;
    }
    100% {
        background-position-x: calc(var(--size-x) * -6);
        background-position-y: calc(var(--size-y) * -6);
        visibility: hidden;
    }
}

.effect-minimize {
    animation: windowMinimize 0.5s forwards ease-in-out;
    transform-origin:center;
}

.effect-maximize {
    transform: scale(0);
    opacity:0;
    animation: windowMaximize 0.5s forwards ease-in-out !important;
    transform-origin:center;
}


@keyframes windowMinimize {
    0% {
        transform: scaleX(100%);
        opacity: 1;
    }
    100% {
        transform: scaleX(0%);
        opacity: 0;
    }
}

@keyframes windowMaximize {
    0% {
        transform: scaleX(0%);
        opacity: 0;
    }
    100% {
        transform: scaleX(100%);
        opacity: 1;
    }
}




/* Disable effect on iOS Safari */
@supports (-webkit-touch-callout: none) {
    .shiny .img-wrap {
        mask-image: unset !important;
        -webkit-mask-image: unset !important;
        animation: none !important;
    }
}

.shiny:not(.off-screen) .img-wrap {
    /* 8x8px transparent and slightly diagonal white gradient image created with Krita and http://jpillora.com/base64-encoder/ */
    mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAuHAAALhwGTQIdTAAAAbklEQVQY03WPSQqAMAADW1FQ3P2Gj/STevIRihuKYE0gBylYGBrS6Wadc535H3HoFQFLkIIaFBQilblKLmagYabQSiglJMoUb4s3jBIqzQeYxUnhQtjABFYJzAszr+i1wHL/ZG40FAYdx/Lx//kCkRAiN0/aKEoAAAAASUVORK5CYII=");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAuHAAALhwGTQIdTAAAAbklEQVQY03WPSQqAMAADW1FQ3P2Gj/STevIRihuKYE0gBylYGBrS6Wadc535H3HoFQFLkIIaFBQilblKLmagYabQSiglJMoUb4s3jBIqzQeYxUnhQtjABFYJzAszr+i1wHL/ZG40FAYdx/Lx//kCkRAiN0/aKEoAAAAASUVORK5CYII=");
    -webkit-mask-size: 100% 100%;
    animation: shinyMetalEffect 5s linear infinite;
}
.shiny:nth-of-type(2n) .img-wrap {
    animation-delay: 1s;
}
.shiny:nth-of-type(3n) .img-wrap {
    animation-delay: 2s;
}
.shiny:nth-of-type(4n) .img-wrap {
    animation-delay: 3s;
}

@keyframes shinyMetalEffect {
    0% {
        mask-position: 0 0;
        -webkit-mask-position: 0 0;
    }
    100% {
        mask-position: 0 var(--cell-size);
        -webkit-mask-position: 0 var(--cell-size);
    }
}


.blend-overlay .img-wrap>img {
    mix-blend-mode: overlay;
}
.blend-luminosity .img-wrap>img {
    mix-blend-mode: luminosity;
}




.building .claim-resources-button img {
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform;
    backface-visibility: hidden;
}


.nexus-effect:not(.in-construction):not(.off-screen)>.img-wrap::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../buildings/webp/building-nexus-2_100.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: nexusEffect 4s steps(15) infinite, nexusEffect2 8s steps(15) infinite, nexusEffectImage 5s steps(10) infinite;
}




@keyframes nexusEffect {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.75;
    }
    100% {
        opacity: 0;
    }
}

@keyframes nexusEffect2 {
    0% {
        background-image: url("../buildings/webp/building-nexus-2_100.webp");
    }
    100% {
        background-image: url("../buildings/webp/building-nexus-3_100.webp");
    }
}

@keyframes nexusEffectImage {
    25% {
        filter: sepia(0);
    }
    75% {
        filter: sepia(0.5) blur(1px);
    }
}




/* ANIMATED OVERWORLD */

#overworld-castle-ruins:not(.off-screen) #ruins {
    animation: slightHueRotationAndBlur 10s infinite alternate steps(30);
}

#overworld-castle-ruins:not(.off-screen) #overworld-fog-1,
#overworld-castle-ruins:not(.off-screen) #overworld-fog-2{
    animation: horizontalMovement2 130s infinite steps(2000), pulsingOpacity 200s infinite alternate steps(300), slightHueRotationAndBlur 30s infinite alternate steps(200);
    background-image: url("../images/webp/magic-fog-2_100.webp");
    animation-delay: -100s;
    background-size: var(--grid-area-width) auto;
    background-repeat: repeat-x;
    background-position: bottom left;
}

#overworld-castle-ruins:not(.off-screen) #overworld-fog-1 {
    animation: horizontalMovement1 310s infinite steps(8000), pulsingOpacity 40s infinite alternate steps(400), slightBlur 12s infinite steps(40);
    background-image: url("../images/webp/magic-fog-1_100.webp");
    background-size: 200rem auto;
}



@keyframes slightBlur {
    0% {
        filter: blur(0.1rem);
    }
    100% {
        filter: blur(0.2rem);
    }
}
@keyframes slightHueRotationAndBlur {
    0% {
        filter: blur(0) hue-rotate(-10deg);
    }
    100% {
        filter: blur(0.1rem) hue-rotate(10deg);
    }
}
@keyframes horizontalMovement1 {
    0% {
        background-position-x:0;
    }
    100% {
        background-position-x:200rem;
    }
}
@keyframes horizontalMovement2 {
    0% {
        background-position-x:0;
    }
    100% {
        background-position-x:var(--grid-area-width);
    }
}
@keyframes pulsingOpacity {
    0% {
        opacity:1;
    }
    100% {
        opacity:0.5;
    }
}