/* =========================
   TITLE LOGO
========================= */

@keyframes logoIntro{

    0%{

        transform:
        translate(-50%,-50%)
        scale(.2);

        opacity:0;
    }

    60%{

        transform:
        translate(-50%,-50%)
        scale(1.15);

        opacity:1;
    }

    100%{

        transform:
        translate(-50%,-50%)
        scale(1);
    }

}

.logo-intro{

    animation:
    logoIntro
    .8s
    cubic-bezier(.2,1.4,.3,1)
    forwards;
}

@keyframes logoShine{

    0%{

        background-position:
            180% 0;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    65%{

        background-position:
            0% 0;

        opacity:1;

    }

    80%{

        opacity:0;

    }

    100%{

        background-position:
            -180% 0;

        opacity:0;

    }

}

.logo-shine{

    position:absolute;

    left:50%;
    top:50%;

    width:78%;
    max-width:420px;

    height:100%;

    transform:
        translate(-50%,-50%);

    z-index:6;

    pointer-events:none;

    background:
    linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,

        rgba(255,180,40,0.0) 40%,

        rgba(255,220,80,0.4) 46%,

        rgba(255,255,220,0.5) 50%,

        rgba(255,220,80,0.4) 54%,

        rgba(255,180,40,0.0) 60%,

        transparent 65%
    );

background-size:220% 100%;

animation:
    logoShine
    3s
    ease-in-out
    infinite;

    -webkit-mask-image:
        url("../assets/images/title/title.png");

    mask-image:
        url("../assets/images/title/title.png");

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;
}

@keyframes tapBlink{

    0%,100%{

        opacity:.01;
    }

    50%{

        opacity:1;
    }

}

.tap-text{

    animation:
    tapBlink
    1.6s infinite;
}

@keyframes logoPress{

    0%{

        transform:
        translate(-50%,-50%)
        scale(1);
    }

    35%{

        transform:
        translate(-50%,-50%)
        scale(.90);
    }

    100%{

        transform:
        translate(-50%,-50%)
        scale(1);
    }

}

.logo-press{

    animation:
    logoPress
    .35s
    forwards;
}

/* =========================
   OTHERS
========================= */

@keyframes redPulse{

  0%{
    opacity:0.55;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.55;
  }
}

@keyframes badgePop{

  0%{

    transform:
      scale(0.2);

    opacity:0;
  }

  55%{

    transform:
      scale(1.18);

    opacity:1;
  }

  75%{

    transform:
      scale(0.92);
  }

  100%{

    transform:
      scale(1);
  }
}

@keyframes levelUpFlash{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.15);
  }

  100%{
    transform:scale(1);
  }
}

@keyframes sparkFly{

  from{

    opacity:1;

    transform:
      translate(0,0)
      scale(1);
  }

  to{

    opacity:0;

    transform:
      translate(
        var(--dx),
        var(--dy)
      )
      scale(0);
  }
}

@keyframes levelFlash{

  0%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(255,69,58,0);
  }

  30%{
    transform:scale(1.03);
    box-shadow:
      0 0 30px rgba(255,69,58,.8),
      0 0 80px rgba(255,69,58,.5);
  }

  100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(255,69,58,0);
  }
}

@keyframes xpCardFlash{

  0%{
    opacity:0;
  }
 
  25%{
    opacity:0.5;
  }

  45%{
    opacity:1;
  }

  75%{
    opacity:0.5;
  }

  100%{
    opacity:0;
  }
}

@keyframes scorePop{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }
}