﻿/*
  FloraVerse - animations.css
  Interaction system: micro-interactions, page transitions, playful motion
  Source: Custom for FloraVerse - Open License
*/

/* ===== LIVING WORLD (decorative) ===== */
@keyframes drift { 0%{transform:translateX(-8px)} 50%{transform:translateX(8px)} 100%{transform:translateX(-8px)} }

/* ===== PAGE TRANSITIONS ===== */
@keyframes pageEnter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes pageLeave {
  from { opacity:1; transform:translateY(0); }
  to { opacity:0; transform:translateY(-6px); }
}
.reveal { opacity:0; transform:translateY(16px); transition: all .5s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:translateY(0); }

/* ===== MICRO-INTERACTION: BOUNCE (like, save, join) ===== */
@keyframes bounce {
  0% { transform:scale(1); }
  25% { transform:scale(0.78); }
  50% { transform:scale(1.12); }
  75% { transform:scale(0.96); }
  100% { transform:scale(1); }
}

/* ===== MICRO-INTERACTION: HEART POP (like specific) ===== */
@keyframes heartPop {
  0% { transform:scale(1); }
  20% { transform:scale(0.7); }
  45% { transform:scale(1.2); }
  70% { transform:scale(0.95); }
  100% { transform:scale(1); }
}
.anim-heart { animation: heartPop .4s cubic-bezier(.2,.8,.2,1); }

/* ===== MICRO-INTERACTION: SAVE BOUNCE ===== */
@keyframes saveBounce {
  0% { transform:scale(1) rotate(0deg); }
  30% { transform:scale(0.85) rotate(-8deg); }
  60% { transform:scale(1.15) rotate(4deg); }
  100% { transform:scale(1) rotate(0deg); }
}
.anim-save { animation: saveBounce .4s cubic-bezier(.2,.8,.2,1); }

/* ===== MICRO-INTERACTION: ICON BOUNCE (share, join, general) ===== */
@keyframes iconBounce {
  0% { transform:scale(1); }
  30% { transform:scale(0.85); }
  60% { transform:scale(1.1); }
  100% { transform:scale(1); }
}
.anim-icon { animation: iconBounce .3s cubic-bezier(.2,.8,.2,1); }

/* ===== SHIMMER (progress bars, loading) ===== */
@keyframes shimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.shimmer {
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
}

/* ===== POP (generic small pop) ===== */
@keyframes pop {
  0% { transform:scale(.9); }
  60% { transform:scale(1.04); }
  100% { transform:scale(1); }
}
.pop { animation: pop .35s cubic-bezier(.2,.8,.2,1); }

/* ===== TOAST ENTER/EXIT ===== */
@keyframes toastIn {
  from { opacity:0; transform:translateY(12px) scale(0.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity:1; transform:translateY(0) scale(1); }
  to { opacity:0; transform:translateY(-8px) scale(0.96); }
}

/* ===== MODAL ===== */
@keyframes modalOverlayIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes modalContentIn {
  from { opacity:0; transform:scale(0.95) translateY(8px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}
