/* ===================================================
   PurrVerse Animation v2
===================================================*/

/* Background Glow */
.background-glow{
    animation:bgFloat 15s ease-in-out infinite;
}

@keyframes bgFloat{

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

25%{
transform:translate(80px,-40px) scale(1.1);
}

50%{
transform:translate(150px,50px) scale(1.2);
}

75%{
transform:translate(-80px,30px) scale(1.1);
}

100%{
transform:translate(0,0) scale(1);
}

}

/* ========================================== */
/* Floating Pet */
/* ========================================== */

.pet-image{

animation:petFloat 4s ease-in-out infinite;

}

@keyframes petFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/* ========================================== */
/* Glow Circle */
/* ========================================== */

.pet-glow{

animation:glowPulse 3s ease infinite;

}

@keyframes glowPulse{

0%{

opacity:.5;
transform:scale(1);

}

50%{

opacity:1;
transform:scale(1.15);

}

100%{

opacity:.5;
transform:scale(1);

}

}

/* ========================================== */
/* Card Animation */
/* ========================================== */

.card,
.pet-card{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ========================================== */
/* Sidebar */
/* ========================================== */

.sidebar a{

transition:.35s;

}

.sidebar a:hover{

transform:translateX(8px);

}

/* ========================================== */
/* Buttons */
/* ========================================== */

.action-grid button{

position:relative;

overflow:hidden;

}

.action-grid button::after{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:250%;

height:250%;

background:rgba(255,255,255,.15);

transform:rotate(35deg);

transition:.5s;

}

.action-grid button:hover::after{

top:-20%;

left:-20%;

}

.action-grid button:hover{

transform:translateY(-6px) scale(1.03);

}

/* ========================================== */
/* Inventory */
/* ========================================== */

.item{

transition:.3s;

}

.item:hover{

transform:translateY(-8px) scale(1.05);

}

/* ========================================== */
/* Reward */
/* ========================================== */

.reward.today{

animation:rewardGlow 2s infinite;

}

@keyframes rewardGlow{

0%{

box-shadow:0 0 10px #6b5cff;

}

50%{

box-shadow:0 0 35px #6b5cff;

}

100%{

box-shadow:0 0 10px #6b5cff;

}

}

/* ========================================== */
/* XP */
/* ========================================== */

.xp-fill{

animation:xpLoad 2s ease;

}

@keyframes xpLoad{

0%{

width:0;

}

100%{

width:65%;

}

}

/* ========================================== */
/* Status Bars */
/* ========================================== */

.happy-fill,
.hunger-fill,
.energy-fill{

animation:statusLoad 1.5s ease;

}

@keyframes statusLoad{

0%{

width:0;

}

}

/* ========================================== */
/* Logo */
/* ========================================== */

.logo{

animation:logoGlow 4s infinite;

}

@keyframes logoGlow{

0%{

text-shadow:0 0 8px #6b5cff;

}

50%{

text-shadow:
0 0 25px #6b5cff,
0 0 50px #6b5cff;

}

100%{

text-shadow:0 0 8px #6b5cff;

}

}

/* ========================================== */
/* Connect Wallet */
/* ========================================== */

#connectWallet{

animation:pulseWallet 2.5s infinite;

}

@keyframes pulseWallet{

0%{

box-shadow:0 0 0 rgba(107,92,255,.4);

}

50%{

box-shadow:0 0 25px rgba(107,92,255,.7);

}

100%{

box-shadow:0 0 0 rgba(107,92,255,.4);

}

}

/* ========================================== */
/* Quest Progress */
/* ========================================== */

.quest-fill{

animation:questLoad 1.5s ease;

}

@keyframes questLoad{

0%{

width:0;

}

}

/* ========================================== */
/* Page Fade */
/* ========================================== */

body{

animation:pageFade .8s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}
@keyframes petFloat{

0%,100%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(-8px);

}

}

@keyframes tailSwing{

0%{

transform:translateX(-50%) rotate(-8deg);

}

50%{

transform:translateX(-50%) rotate(8deg);

}

100%{

transform:translateX(-50%) rotate(-8deg);

}

}

@keyframes blink{

0%,93%,100%{

transform:translateX(-50%) scaleY(1);

}

95%,97%{

transform:translateX(-50%) scaleY(.05);

}

}

@keyframes shadowMove{

0%,100%{

transform:translateX(-50%) scale(1);

opacity:.45;

}

50%{

transform:translateX(-50%) scale(.88);

opacity:.2;

}

}

.body{

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

}

.tail{

animation:tailSwing 1.2s ease-in-out infinite;

}

.eyes{

animation:blink 5s infinite;

}

.shadow{

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

}