*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:sans-serif;
}

body{
  background:linear-gradient(to right bottom,#6c6969,#302e2e);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

section{
  width: 100%;
  max-width:400px;
  height:100dvh;
  margin: auto;
  background:black;
  border-radius:12px;
  overflow:hidden;
}

@media(max-width:500px){
  section{
    width:100%;
    height:100dvh;
    border-radius:0;
  }
}

.all-reels{
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  /* -webkit-overflow-scrolling:touch; */
}


.all-reels::-webkit-scrollbar{
    display:none;
}

.reel{
  height:100dvh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
}



.reel video{
  height:100%;
  width:100%;
  object-fit:cover;
}

/* Bottom Info */
.bottom{
  position:absolute;
  bottom:0;
  width:100%;
  padding:20px;
  background:linear-gradient(transparent,rgba(0,0,0,0.9));
  color:white;
}

.user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.user img{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
}

.user button{
  border:2px solid white;
  background:transparent;
  color:white;
  gap: 30px;
  padding:4px 9px;
  border-radius:4px;
  cursor:pointer;
}

.user button:hover{
    font-size: 15px;
    color: white;
    border-radius: 8px;
    transition: 0.3s ease-out;
}


/* Right Buttons */
.right{
  position:absolute;
  right:10px;
  bottom:70px;
  display:flex;
  flex-direction:column;
  gap:20px;
  color:white;
}

.right div{
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  transition:0.4s;
}

.right div:hover{
  transform:scale(1.1);
}

.right i{
  font-size:30px;
}

.love{
  color:red;
}

/* Mute */
.mute{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(0,0,0,0.6);
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* ############# */


/* BACKGROUND ZOOM EFFECT */
.reel.like-pulse video{
  animation: bgPulse 0.4s ease;
}

@keyframes bgPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

/* FLOATING HEART */
.double-heart{
  position:absolute;
  font-size:100px;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}

/* Gradient Heart */
.double-heart i{
  background: linear-gradient(
    45deg,
    #feda75,
    #fa7e1e,
    #d62976,
    #962fbf,
    #4f5bd5
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* Main Pop */
.heart-main{
  animation:heartPop 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes heartPop{
  0%{
    transform:translate(-50%,-50%) scale(0.2) rotate(-15deg);
    opacity:0;
  }
  40%{
    transform:translate(-50%,-50%) scale(1.2) rotate(10deg);
    opacity:1;
  }
  60%{
    transform:translate(-50%,-50%) scale(0.95) rotate(-5deg);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-50%) scale(1) rotate(0deg);
    opacity:0;
  }
}


/* LIKE COUNT ANIMATION */
.like-count-animate{
  animation:countPop 0.3s ease;
}

@keyframes countPop{
  0%{transform:scale(1);}
  50%{transform:scale(1.3);}
  100%{transform:scale(1);}
}