/* ===== UPGRADED CSS v20 — Deep Enhancement ===== */

/* Page transition with spring physics */
@keyframes pageSpringIn {
  0% { opacity: 0; transform: translateY(24px) scale(0.98); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.page.active { animation: pageSpringIn .45s cubic-bezier(.34,1.56,.64,1) both; }

/* Card hover glow (desktop) */
@media (hover:hover) {
  .stat-card:hover { box-shadow: 0 0 20px rgba(10,132,255,0.15); transform: translateY(-2px); }
  .recipe-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
  .ing-item:hover { background: var(--surface3); }
  .suggest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* Skeleton loading pulse */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface3) 25%, var(--surface) 50%, var(--surface3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Ripple effect on tap */
.ripple {
  position: relative; overflow: hidden;
}
.ripple::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.ripple:active::after { opacity: 1; }

/* Swipe delete hint */
@keyframes swipeHint {
  0% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}
.swipe-hint { animation: swipeHint .4s ease; }

/* Notification badge bounce */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
}
.badge-bounce { animation: badgeBounce .5s ease; }

/* Tab bar active indicator */
.tab.active .tab-indicator {
  opacity: 1; transform: scaleX(1);
}
.tab-indicator {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 20px; height: 3px; border-radius: 2px; background: var(--brand);
  opacity: 0; transition: all .3s cubic-bezier(.34,1.56,.64,1);
}

/* Enhanced calorie ring animation */
@keyframes ringDraw {
  from { stroke-dashoffset: 264; }
}
.cal-ring .fg {
  animation: ringDraw 1.2s cubic-bezier(.4,0,.2,1) both;
}

/* Staggered list items */
.stagger-item { animation-delay: calc(var(--i, 0) * 40ms); }

/* Floating action button ring */
@keyframes fabRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.fab-ring {
  position: absolute; inset: -4px; border-radius: 20px;
  border: 2px solid rgba(102,126,234,0.4);
  animation: fabRing 2s ease-out infinite;
}

/* Food detail nutrition bar fill animation */
@keyframes barFill {
  from { width: 0; }
}
.nutri-bar .fill { animation: barFill .8s cubic-bezier(.4,0,.2,1) both; animation-delay: .2s; }

/* Glass morphism enhanced */
.glass-enhanced {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-border);
}

/* Smooth scroll snapping for horizontal lists */
.suggest-scroll { scroll-snap-type: x mandatory; }
.suggest-card { scroll-snap-align: start; }

/* Haptic feedback simulation via scale */
@keyframes hapticTap {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.haptic:active { animation: hapticTap .15s ease; }

/* Progress ring glow */
.cal-ring .fg {
  filter: drop-shadow(0 0 4px rgba(10,132,255,0.3));
}

/* Enhanced modal backdrop blur */
.modal-overlay {
  transition: opacity .3s ease;
}
.modal-sheet {
  transition: transform .35s cubic-bezier(.32,.72,0,1);
}

/* Floating label input */
.float-label { position: relative; }
.float-label label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--text3); transition: all .2s; pointer-events: none;
}
.float-label input:focus + label,
.float-label input:not(:placeholder-shown) + label {
  top: 8px; font-size: 10px; color: var(--brand);
}

/* Category pill smooth transition */
.cat-pill {
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.cat-pill.active {
  transform: scale(1.05);
}

/* Recipe match bar gradient */
.match-fill {
  background: linear-gradient(90deg, var(--green), var(--blue));
}

/* Shopping item slide-in */
@keyframes shopSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.shop-item { animation: shopSlideIn .3s ease both; }

/* Empty state bounce */
@keyframes emptyBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.empty-state .icon { animation: emptyBounce 2s ease-in-out infinite; }

/* Settings item arrow chevron */
.settings-item .arrow::after {
  content: '›'; font-size: 18px; font-weight: 300;
}

/* Data cell number count-up effect placeholder */
.data-cell .num {
  font-variant-numeric: tabular-nums;
}

/* Smooth theme transition */
html {
  transition: background-color .4s ease, color .4s ease;
}
body {
  transition: background-color .4s ease;
}