/**
 * ----------------------------------------
 * animation flicker-1
 * ----------------------------------------
 */
@-webkit-keyframes flicker-1 {
    0%,
    100%{
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes flicker-1 {
    0%,
    100%{
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
/**
 * ----------------------------------------
 * animation flicker-2
 * ----------------------------------------
 */
@-webkit-keyframes flicker-2 {
    0%,
    50%{
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
}
@keyframes flicker-2 {
    0%,
    50%{
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
}

/* Bateria HBS — posicionada en zona de la primera placa solar (tejado), lado izquierdo.
   SVG rotado -90deg: top/left son muy negativos por el efecto del giro.
   Ajustar top para subir/bajar, left para mover izq/dcha. */
.powerwall{
    background: url(../../../img/inicio/powerwall/powerwall.svg) top left no-repeat;
    top: -50%;
    left: 7.6%;
    transform: rotate(-90deg);
}
.powerwall__cell--depleting-8 .powerwall__flow-right,
.powerwall__cell--depleting-7 .powerwall__flow-right,
.powerwall__cell--depleting-6 .powerwall__flow-right,
.powerwall__cell--depleting-5 .powerwall__flow-right,
.powerwall__cell--depleting-4 .powerwall__flow-right,
.powerwall__cell--depleting-3 .powerwall__flow-right,
.powerwall__cell--depleting-2 .powerwall__flow-right,
.powerwall__cell--depleting-1 .powerwall__flow-right{
    background: url(../../../img/inicio/powerwall/powerwall__flow-right.svg) top left no-repeat;
}
.powerwall__cell--charging-8 .powerwall__flow-left,
.powerwall__cell--charging-7 .powerwall__flow-left,
.powerwall__cell--charging-6 .powerwall__flow-left,
.powerwall__cell--charging-5 .powerwall__flow-left,
.powerwall__cell--charging-4 .powerwall__flow-left,
.powerwall__cell--charging-3 .powerwall__flow-left,
.powerwall__cell--charging-2 .powerwall__flow-left,
.powerwall__cell--charging-1 .powerwall__flow-left{
    background: url(../../../img/inicio/powerwall/powerwall__flow-left.svg) top left no-repeat;
}
.powerwall--off{
    opacity:.35;
    background-image: url(../../../img/inicio/powerwall/powerwall--off.svg);
}
.night-time .powerwall{
    background: url(../../../img/inicio/powerwall/powerwall--night-time.svg) top left no-repeat;
}
.night-time .powerwall--off{
    opacity:.35;
    background-image: url(../../../img/inicio/powerwall/powerwall--night-time--off.svg);
}
.powerwall--off *{
    display: none;
}

.powerwall__cell{
    background: #5aae6c;
    position: absolute;
    width: 0.72%;
    height: 9.13%;
    bottom: 29.92%;
    border-radius: 7px;
}

/* posiciones celdas */
.powerwall__cell-1{
    opacity: 0;
    left: 24%;
}
.powerwall__cell-2{
    opacity: 0;
    left: 24.88%;
}
.powerwall__cell-3{
    opacity: 0;
    left: 25.76%;
}
.powerwall__cell-4{
    opacity: 0;
    left: 26.65%;
}
.powerwall__cell-5{
    opacity: 0;
    left: 27.53%;
}
.powerwall__cell-6{
    opacity: 0;
    left: 28.41%;
}
.powerwall__cell-7{
    opacity: 0;
    left: 29.28%;
}
.powerwall__cell-8{
    opacity: 0;
    left: 30.17%;
}

.powerwall__cell--flicker{
/*    -webkit-animation: flicker-1 2s linear infinite both;
    animation: flicker-1 2s linear infinite both;*/
}

/* uso de bateria */
.powerwall__cell--depleting-1 .powerwall__cell-1{
    opacity: 1;
    background: #e70707;
}
.powerwall__cell--depleting-2 .powerwall__cell-1,
.powerwall__cell--depleting-2 .powerwall__cell-2{
    opacity: 1;
    background: #e70707;
}
.powerwall__cell--depleting-3 .powerwall__cell-1,
.powerwall__cell--depleting-3 .powerwall__cell-2,
.powerwall__cell--depleting-3 .powerwall__cell-3{
    opacity: 1;
    background: #e70707;
}
.powerwall__cell--depleting-4 .powerwall__cell-1,
.powerwall__cell--depleting-4 .powerwall__cell-2,
.powerwall__cell--depleting-4 .powerwall__cell-3,
.powerwall__cell--depleting-4 .powerwall__cell-4{
    opacity: 1;
}
.powerwall__cell--depleting-5 .powerwall__cell-1,
.powerwall__cell--depleting-5 .powerwall__cell-2,
.powerwall__cell--depleting-5 .powerwall__cell-3,
.powerwall__cell--depleting-5 .powerwall__cell-4,
.powerwall__cell--depleting-5 .powerwall__cell-5{
    opacity: 1;
}
.powerwall__cell--depleting-6 .powerwall__cell-1,
.powerwall__cell--depleting-6 .powerwall__cell-2,
.powerwall__cell--depleting-6 .powerwall__cell-3,
.powerwall__cell--depleting-6 .powerwall__cell-4,
.powerwall__cell--depleting-6 .powerwall__cell-5,
.powerwall__cell--depleting-6 .powerwall__cell-6{
    opacity: 1;
}
.powerwall__cell--depleting-7 .powerwall__cell-1,
.powerwall__cell--depleting-7 .powerwall__cell-2,
.powerwall__cell--depleting-7 .powerwall__cell-3,
.powerwall__cell--depleting-7 .powerwall__cell-4,
.powerwall__cell--depleting-7 .powerwall__cell-5,
.powerwall__cell--depleting-7 .powerwall__cell-6,
.powerwall__cell--depleting-7 .powerwall__cell-7{
    opacity: 1;
}
.powerwall__cell--depleting-8 .powerwall__cell-1,
.powerwall__cell--depleting-8 .powerwall__cell-2,
.powerwall__cell--depleting-8 .powerwall__cell-3,
.powerwall__cell--depleting-8 .powerwall__cell-4,
.powerwall__cell--depleting-8 .powerwall__cell-5,
.powerwall__cell--depleting-8 .powerwall__cell-6,
.powerwall__cell--depleting-8 .powerwall__cell-7,
.powerwall__cell--depleting-8 .powerwall__cell-8{
    opacity: 1;
}

.powerwall__cell--depleting-8 .powerwall__cell-8,
.powerwall__cell--depleting-7 .powerwall__cell-7,
.powerwall__cell--depleting-6 .powerwall__cell-6,
.powerwall__cell--depleting-5 .powerwall__cell-5,
.powerwall__cell--depleting-4 .powerwall__cell-4,
.powerwall__cell--depleting-3 .powerwall__cell-3,
.powerwall__cell--depleting-2 .powerwall__cell-2,
.powerwall__cell--depleting-1 .powerwall__cell-1{
/*    -webkit-animation: flicker-1 2s linear infinite both;
    animation: flicker-1 2s linear infinite both;*/
}

/* carga bateria */
.powerwall__cell--charging-8 .powerwall__cell-1,
.powerwall__cell--charging-7 .powerwall__cell-1,
.powerwall__cell--charging-6 .powerwall__cell-1,
.powerwall__cell--charging-5 .powerwall__cell-1,
.powerwall__cell--charging-4 .powerwall__cell-1,
.powerwall__cell--charging-3 .powerwall__cell-1,
.powerwall__cell--charging-2 .powerwall__cell-1,
.powerwall__cell--charging-1 .powerwall__cell-1{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-2,
.powerwall__cell--charging-7 .powerwall__cell-2,
.powerwall__cell--charging-6 .powerwall__cell-2,
.powerwall__cell--charging-5 .powerwall__cell-2,
.powerwall__cell--charging-4 .powerwall__cell-2,
.powerwall__cell--charging-3 .powerwall__cell-2,
.powerwall__cell--charging-2 .powerwall__cell-2{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-3,
.powerwall__cell--charging-7 .powerwall__cell-3,
.powerwall__cell--charging-6 .powerwall__cell-3,
.powerwall__cell--charging-5 .powerwall__cell-3,
.powerwall__cell--charging-4 .powerwall__cell-3,
.powerwall__cell--charging-3 .powerwall__cell-3{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-4,
.powerwall__cell--charging-7 .powerwall__cell-4,
.powerwall__cell--charging-6 .powerwall__cell-4,
.powerwall__cell--charging-5 .powerwall__cell-4,
.powerwall__cell--charging-4 .powerwall__cell-4{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-5,
.powerwall__cell--charging-7 .powerwall__cell-5,
.powerwall__cell--charging-6 .powerwall__cell-5,
.powerwall__cell--charging-5 .powerwall__cell-5{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-6,
.powerwall__cell--charging-7 .powerwall__cell-6,
.powerwall__cell--charging-6 .powerwall__cell-6{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-7,
.powerwall__cell--charging-7 .powerwall__cell-7{
    opacity: 1;
}
.powerwall__cell--charging-8 .powerwall__cell-8{
    opacity: 1;
}

.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-6 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-5 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-4 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-3 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-2 .powerwall__cell-1,
.powerwall__cell--charging-animation.powerwall__cell--charging-1 .powerwall__cell-1{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear infinite both;
    animation: flicker-2 5s linear infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-2,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-2,
.powerwall__cell--charging-animation.powerwall__cell--charging-6 .powerwall__cell-2,
.powerwall__cell--charging-animation.powerwall__cell--charging-5 .powerwall__cell-2,
.powerwall__cell--charging-animation.powerwall__cell--charging-4 .powerwall__cell-2,
.powerwall__cell--charging-animation.powerwall__cell--charging-3 .powerwall__cell-2,
.powerwall__cell--charging-animation.powerwall__cell--charging-2 .powerwall__cell-2{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 0.5s infinite both;
    animation: flicker-2 5s linear 0.5s infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-3,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-3,
.powerwall__cell--charging-animation.powerwall__cell--charging-6 .powerwall__cell-3,
.powerwall__cell--charging-animation.powerwall__cell--charging-5 .powerwall__cell-3,
.powerwall__cell--charging-animation.powerwall__cell--charging-4 .powerwall__cell-3,
.powerwall__cell--charging-animation.powerwall__cell--charging-3 .powerwall__cell-3{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 1s infinite both;
    animation: flicker-2 5s linear 1s infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-4,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-4,
.powerwall__cell--charging-animation.powerwall__cell--charging-6 .powerwall__cell-4,
.powerwall__cell--charging-animation.powerwall__cell--charging-5 .powerwall__cell-4,
.powerwall__cell--charging-animation.powerwall__cell--charging-4 .powerwall__cell-4{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 1.5s infinite both;
    animation: flicker-2 5s linear 1.5s infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-5,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-5,
.powerwall__cell--charging-animation.powerwall__cell--charging-6 .powerwall__cell-5,
.powerwall__cell--charging-animation.powerwall__cell--charging-5 .powerwall__cell-5{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 2s infinite both;
    animation: flicker-2 5s linear 2s infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-6,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-6,
.powerwall__cell--charging-animation.powerwall__cell--charging-6 .powerwall__cell-6{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 2.5s infinite both;
    animation: flicker-2 5s linear 2.5s infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-7,
.powerwall__cell--charging-animation.powerwall__cell--charging-7 .powerwall__cell-7{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 3s infinite both;
    animation: flicker-2 5s linear 3s infinite both;*/
}
.powerwall__cell--charging-animation.powerwall__cell--charging-8 .powerwall__cell-8{
    opacity: 1;
/*    -webkit-animation: flicker-2 5s linear 3.5s infinite both;
    animation: flicker-2 5s linear 3.5s infinite both;*/
}

/* batería crítica < 40%: todas las barras activas en rojo */
.powerwall--critical .powerwall__cell {
    background: #e70707 !important;
}