@charset "utf-8";
/* CSS Document */

/* =====================================
   Like Button Style
===================================== */

.like-area{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:1.2rem 0;
}

.like-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .85rem;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  line-height:1;
  transition:.25s;
}

.like-btn:hover{
  background:#f7f7f7;
}

.like-btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.like-btn .heart{
  font-size:1.15rem;
  transform:translateZ(0);
}

/* ===== アニメーション ===== */
.like-btn.is-burst .heart{
  animation:heart-pop .42s ease-out;
}

.like-btn .burst{
  pointer-events:none;
  position:absolute;
  inset:-8px;
  border-radius:999px;
  opacity:0;
}

.like-btn.is-burst .burst{
  animation:ring .42s ease-out;
}

@keyframes heart-pop{
  0%{transform:scale(1);}
  35%{transform:scale(1.35) rotate(-8deg);}
  70%{transform:scale(0.95) rotate(4deg);}
  100%{transform:scale(1);}
}

@keyframes ring{
  0%{opacity:.35;box-shadow:0 0 0 0 rgba(0,0,0,.15);}
  100%{opacity:0;box-shadow:0 0 0 12px rgba(0,0,0,0);}
}

.like-msg{
  font-size:.9rem;
  color:#666;
}