/* Avyukt View Dining Bar - Luxury Typography, Animations & Styling (Matching React Edition) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --color-gold: #E5C578;
  --color-gold-light: #FFF2B2;
  --color-gold-dark: #9A7B38;
  --color-bg-dark: #060B14;
  --color-card-bg: #0A1128;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #060B14;
  color: #EDE8DF;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.font-display {
  font-family: 'Cinzel', 'Playfair Display', serif;
}

.font-body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.font-mono {
  font-family: 'Space Grotesk', monospace;
}

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Realistic Billowing Steam Plumes */
@keyframes authenticSteam1 {
  0% {
    transform: translateY(20%) scaleX(0.7) skewX(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.65;
  }
  60% {
    transform: translateY(-40%) scaleX(1.3) skewX(7deg);
    opacity: 0.45;
  }
  100% {
    transform: translateY(-90%) scaleX(2.0) skewX(-10deg);
    opacity: 0;
  }
}

@keyframes authenticSteam2 {
  0% {
    transform: translateY(25%) scaleX(0.8) skewX(0deg);
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  65% {
    transform: translateY(-45%) scaleX(1.5) skewX(-8deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-95%) scaleX(2.2) skewX(12deg);
    opacity: 0;
  }
}

@keyframes authenticSteam3 {
  0% {
    transform: translateY(20%) scaleX(0.7) skewX(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.55;
  }
  55% {
    transform: translateY(-35%) scaleX(1.2) skewX(5deg);
    opacity: 0.35;
  }
  100% {
    transform: translateY(-85%) scaleX(1.8) skewX(-7deg);
    opacity: 0;
  }
}

.steam-wisp-1 {
  animation: authenticSteam1 3.2s infinite ease-out;
  transform-origin: bottom center;
}

.steam-wisp-2 {
  animation: authenticSteam2 4.0s infinite 0.5s ease-out;
  transform-origin: bottom center;
}

.steam-wisp-3 {
  animation: authenticSteam3 3.5s infinite 1.2s ease-out;
  transform-origin: bottom center;
}

/* Floating Sparkle Animation */
@keyframes floatSparkle {
  0% {
    transform: translateY(0px) scale(0.6);
    opacity: 0;
  }
  50% {
    transform: translateY(-15px) scale(1.2);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-30px) scale(0.4);
    opacity: 0;
  }
}

.sparkle-mote-1 {
  animation: floatSparkle 2.8s infinite ease-in-out;
}

.sparkle-mote-2 {
  animation: floatSparkle 3.4s infinite 1.2s ease-in-out;
}

/* Food Simmer & Cinemagraph loop */
@keyframes simmerBubble {
  0%, 100% {
    transform: scale(0.96) rotate(0deg);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.06) rotate(180deg);
    opacity: 0.85;
  }
}

.food-simmer {
  animation: simmerBubble 4.5s ease-in-out infinite;
}

@keyframes cinemagraphMotion {
  0% {
    transform: scale(1.04) translate(0%, 0%) rotate(0deg);
  }
  25% {
    transform: scale(1.08) translate(-1.2%, -0.8%) rotate(0.4deg);
  }
  50% {
    transform: scale(1.06) translate(0.8%, 1.2%) rotate(-0.3deg);
  }
  75% {
    transform: scale(1.09) translate(-0.5%, 0.6%) rotate(0.2deg);
  }
  100% {
    transform: scale(1.04) translate(0%, 0%) rotate(0deg);
  }
}

.cinemagraph-4k-loop {
  will-change: transform;
}

.group:hover .cinemagraph-4k-loop {
  animation: cinemagraphMotion 10s ease-in-out infinite alternate;
}

/* Card Tilt & Hover Styles */
.dish-card {
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
}

.group:hover .dish-drop-shadow {
  transform: scale(1.08) translateY(2px);
}

.group:hover .dish-golden-aura {
  opacity: 1 !important;
}

.group:hover .dish-halo-ring {
  border-color: rgba(229, 197, 120, 0.75) !important;
  box-shadow: 0 0 16px rgba(229, 197, 120, 0.25), inset 0 0 10px rgba(229, 197, 120, 0.1) !important;
}

.group:hover .dish-vessel {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.95), inset 0 0 24px rgba(0, 0, 0, 0.9), 0 0 18px rgba(229, 197, 120, 0.3) !important;
  transform: scale(1.06);
}

.group:hover .dish-img {
  filter: brightness(1.05);
}

.group:hover .dish-steam {
  opacity: 0.95 !important;
}

.group:hover .dish-sparkles {
  opacity: 0.9 !important;
}

/* Custom Gold Glow */
.gold-glow {
  box-shadow: 0 0 25px rgba(229, 197, 120, 0.25);
}

/* Responsive Touch Optimizations */
button, select, input, a {
  touch-action: manipulation;
}