/* ====== keyframes ====== */
@keyframes float-blob {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, -22px, 0) scale(1.06); }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pop-icon {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes ping-dot {
  0% { transform: scale(1); opacity: 0.7; }
  70%,
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes ripple-out {
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes heart-fly {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

@keyframes spark-rotate {
  to { transform: rotate(360deg); }
}

/* ====== applied motion ====== */
.blob {
  animation: float-blob 12s ease-in-out infinite;
}

.blob-b { animation-duration: 15s; animation-delay: -3s; }
.blob-c { animation-duration: 17s; animation-delay: -6s; }
.blob-d { animation-duration: 14s; animation-delay: -2s; }

.avatar-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mint);
  animation: ping-dot 2.2s ease-out infinite;
}

.avatar-ping {
  position: absolute;
  right: -3px;
  bottom: -3px;
}

/* hero entrance + decorative spin */
.panel.active .hero {
  animation: rise-in 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

.hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 150px;
  height: 150px;
  border-radius: 42% 58% 60% 40%;
  background: rgba(255, 255, 255, 0.16);
  animation: spark-rotate 18s linear infinite;
  pointer-events: none;
}

/* staggered reveal for any card-like element inside the active panel */
.panel.active .reveal {
  animation: rise-in 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

.panel.active .reveal:nth-child(1) { animation-delay: 0.02s; }
.panel.active .reveal:nth-child(2) { animation-delay: 0.08s; }
.panel.active .reveal:nth-child(3) { animation-delay: 0.14s; }
.panel.active .reveal:nth-child(4) { animation-delay: 0.2s; }
.panel.active .reveal:nth-child(5) { animation-delay: 0.26s; }
.panel.active .reveal:nth-child(6) { animation-delay: 0.32s; }

/* press feedback */
.primary-btn,
.soft-btn,
.icon-btn,
.ghost-btn,
.category,
.hero-search,
.segmented button,
.text-link,
.fav-btn {
  transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.primary-btn:active,
.soft-btn:active,
.hero-search:active,
.segmented button:active {
  transform: scale(0.95);
}

.icon-btn:active,
.ghost-btn:active,
.fav-btn:active {
  transform: scale(0.9);
}

.category:active .circle {
  transform: scale(0.9) rotate(-4deg);
}

.category .circle {
  transition: transform 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* card image hover/press zoom */
.activity-media img,
.match-media img {
  transition: transform 0.5s ease;
}

.activity-card:active .activity-media img {
  transform: scale(1.05);
}

/* tab bar interactions */
.tab-indicator {
  transition: left 0.42s cubic-bezier(0.34, 1.4, 0.4, 1);
}

.tabbar button i {
  display: grid;
  place-items: center;
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.tabbar button.active i {
  animation: pop-icon 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.tabbar button:active i {
  transform: translateY(2px) scale(0.92);
}

/* favorite toggled */
.fav-btn.is-fav {
  color: #fff;
  background: var(--grad-blossom);
  animation: pop-icon 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* ripple element injected by JS */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: ripple-out 0.6s ease-out;
  pointer-events: none;
}

/* heart burst particles injected by JS */
.heart-fx {
  position: fixed;
  z-index: 60;
  pointer-events: none;
}

.heart-fx i {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blossom);
  animation: heart-fly 0.9s ease-out forwards;
}

.heart-fx svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  *,
  .blob,
  .hero::before,
  .panel.active .reveal,
  .panel.active .hero,
  .avatar-ping::after {
    animation: none !important;
    transition: none !important;
  }
}