/* ================================================
   WEBLIOO — Animations & Keyframes
   ================================================ */

/* ---- Keyframes ---- */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(120%) scale(0.9); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(120%) scale(0.9); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.96); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.5);  opacity: 0.5; }
}

@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 10px rgba(99,102,241,0.3); }
  50%       { box-shadow: 0 0 30px rgba(99,102,241,0.7), 0 0 60px rgba(99,102,241,0.3); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes tableAvailable {
  0%, 100% { box-shadow: 0 0 0 0   rgba(16,185,129,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

@keyframes tableBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

@keyframes countUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes bgPan {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: ease-in; }
  50%       { transform: translateY(-16px); animation-timing-function: ease-out; }
}

@keyframes wave {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(14deg); }
  40%  { transform: rotate(-8deg); }
  60%  { transform: rotate(14deg); }
  80%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}

/* ---- Utility animation classes ---- */

.anim-fade-in       { animation: fadeIn       0.5s ease both; }
.anim-fade-in-up    { animation: fadeInUp     0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-fade-in-down  { animation: fadeInDown   0.5s ease both; }
.anim-fade-in-left  { animation: fadeInLeft   0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-fade-in-right { animation: fadeInRight  0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-scale-in      { animation: scaleIn      0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-float         { animation: float        3s ease-in-out infinite; }
.anim-pulse         { animation: pulse        2s ease-in-out infinite; }
.anim-spin          { animation: spin         1s linear infinite; }
.anim-glow          { animation: glow         2s ease-in-out infinite; }

/* Staggered delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* ---- Hover transitions ---- */

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.hover-scale {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.hover-scale:hover { transform: scale(1.04); }

.hover-glow {
  transition: box-shadow 0.3s ease;
}
.hover-glow:hover { box-shadow: 0 0 25px rgba(99,102,241,0.5); }

/* ---- Ripple button effect ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 100px; height: 100px;
  top: 50%; left: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0 0;
  pointer-events: none;
}
.btn-ripple:active::after {
  animation: ripple 0.5s ease-out;
}

/* ---- Page transition ---- */
.page-enter {
  animation: fadeInUp 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ---- Table pulse animations ---- */
.table-card.available { animation: tableAvailable 2.5s ease-in-out infinite; }
.table-card.reserved  { animation: tableBlink 2s ease-in-out infinite; }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Hero gradient background ---- */
.hero-gradient {
  background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #f43f5e, #6366f1);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* ---- Skeleton shimmer ---- */
.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #243247 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}