:root {
  --background: 34 30% 95%;
  --foreground: 16 28% 15%;
  --primary: 3 56% 36%;
  --secondary: 106 22% 33%;
  --muted: 32 18% 88%;
  --muted-foreground: 24 14% 40%;
  --destructive: 0 72% 48%;
  --border: 30 22% 78%;
  --card: 37 28% 92%;
  --shadow-sm: 0 8px 20px rgba(32, 18, 10, 0.08);
  --shadow-md: 0 18px 45px rgba(32, 18, 10, 0.16);
  --shadow-lg: 0 26px 80px rgba(20, 12, 8, 0.25);
  --transition-fast: 220ms ease;
  --transition-smooth: 700ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 24 24% 9%;
  --foreground: 38 28% 92%;
  --primary: 42 66% 60%;
  --secondary: 102 20% 32%;
  --muted: 18 18% 15%;
  --muted-foreground: 26 18% 72%;
  --destructive: 0 78% 62%;
  --border: 22 18% 24%;
  --card: 20 22% 12%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.font-serif {
  font-family: Georgia, 'Times New Roman', serif;
}

.lux-card {
  background: linear-gradient(180deg, hsla(0,0%,100%,0.08), transparent), hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}

.glass-panel {
  position: relative;
}

.glass-panel::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, hsla(0,0%,100%,0.12), transparent 40%);
  pointer-events: none;
}

.text-shadow-lux {
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.page-reveal,
.reveal-card {
  animation: revealUp var(--transition-smooth) both;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dining-depth {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 220, 150, 0.12), transparent 18%),
    radial-gradient(circle at 80% 14%, rgba(255, 194, 120, 0.12), transparent 16%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)),
    linear-gradient(90deg, rgba(45, 22, 16, 0.55), rgba(22, 12, 10, 0.2) 35%, rgba(34,18,12,0.4));
}

.scene-perspective {
  perspective: 1200px;
}

.oven-wrap {
  width: 440px;
  height: 440px;
  position: relative;
}

.oven-glow {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,182,88,0.35), rgba(145,48,26,0.18) 42%, transparent 70%);
  left: 58px;
  top: 58px;
  filter: blur(10px);
}

.pizza-oven {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 175, 86, 0.95), rgba(147, 56, 28, 0.88) 36%, rgba(69, 31, 18, 0.98) 60%, rgba(25, 12, 8, 1) 75%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
  box-shadow: inset 0 16px 50px rgba(255,255,255,0.08), inset 0 -30px 60px rgba(0,0,0,0.45), 0 40px 90px rgba(0,0,0,0.35);
  transform-style: preserve-3d;
}

.oven-mouth {
  position: absolute;
  left: 23%;
  top: 22%;
  width: 54%;
  height: 54%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255,210,120,0.92), rgba(148,52,26,0.92) 44%, rgba(20,8,6,1) 72%);
  box-shadow: inset 0 0 45px rgba(255,150,80,0.5);
}

.pizza-disc {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 999px;
  left: calc(50% - 64px);
  top: calc(50% - 64px);
  background:
    radial-gradient(circle at 40% 40%, rgba(254, 226, 170, 1), rgba(231, 174, 92, 1) 40%, rgba(159, 67, 37, 0.95) 69%, rgba(94, 42, 26, 1) 86%),
    radial-gradient(circle at 62% 54%, rgba(189, 20, 20, 0.5), transparent 20%);
  box-shadow: 0 0 30px rgba(255,164,72,0.35), inset 0 0 18px rgba(255,255,255,0.12);
  overflow: hidden;
}

.rotate-slow {
  animation: rotateSlow 18s linear infinite;
}

.spin-subtle {
  animation: rotateSlow 10s linear infinite reverse;
}

@keyframes rotateSlow {
  from { transform: rotateY(0deg) rotateX(8deg) rotateZ(0deg); }
  to { transform: rotateY(360deg) rotateX(8deg) rotateZ(360deg); }
}

.flour-particle,
.basil-leaf {
  position: absolute;
  display: block;
}

.flour-particle {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,245,235,0.7);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
  animation: drift 8s linear infinite;
}

.basil-leaf {
  width: 18px;
  height: 12px;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, rgba(113,151,84,1), rgba(46,91,49,1));
  box-shadow: 0 8px 14px rgba(0,0,0,0.15);
  animation: leafFloat 9s ease-in-out infinite;
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(-60px, -180px, 0) scale(1.3); opacity: 0; }
}

@keyframes leafFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(18deg); }
}

.flour-1 { left: 320px; top: 310px; animation-delay: 0s; }
.flour-2 { left: 300px; top: 340px; animation-delay: 1s; }
.flour-3 { left: 260px; top: 300px; animation-delay: 2.2s; }
.flour-4 { left: 330px; top: 280px; animation-delay: 0.7s; }
.flour-5 { left: 280px; top: 360px; animation-delay: 1.8s; }
.flour-6 { left: 350px; top: 320px; animation-delay: 3.1s; }
.flour-7 { left: 210px; top: 310px; animation-delay: 2.7s; }
.flour-8 { left: 240px; top: 350px; animation-delay: 4.2s; }
.flour-9 { left: 310px; top: 370px; animation-delay: 5s; }
.flour-10 { left: 190px; top: 330px; animation-delay: 3.4s; }
.flour-11 { left: 360px; top: 360px; animation-delay: 5.8s; }
.flour-12 { left: 220px; top: 280px; animation-delay: 1.5s; }
.flour-13 { left: 275px; top: 260px; animation-delay: 2.9s; }
.flour-14 { left: 340px; top: 250px; animation-delay: 4.6s; }
.flour-15 { left: 380px; top: 300px; animation-delay: 6.2s; }
.flour-16 { left: 160px; top: 360px; animation-delay: 5.2s; }
.flour-17 { left: 245px; top: 390px; animation-delay: 6.8s; }
.flour-18 { left: 310px; top: 240px; animation-delay: 7.2s; }

.basil-1 { left: 80px; top: 120px; animation-delay: 0s; }
.basil-2 { left: 120px; top: 260px; animation-delay: 1s; }
.basil-3 { left: 390px; top: 140px; animation-delay: 2.2s; }
.basil-4 { left: 360px; top: 250px; animation-delay: 3.1s; }
.basil-5 { left: 70px; top: 300px; animation-delay: 4.1s; }
.basil-6 { left: 220px; top: 90px; animation-delay: 5.3s; }
.basil-7 { left: 400px; top: 330px; animation-delay: 6.4s; }

.dish-spotlight {
  position: relative;
  min-height: 180px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.dish-plate,
.dish-visual {
  position: relative;
  border-radius: 999px;
  overflow: visible;
  transform-style: preserve-3d;
}

.dish-plate {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(234,229,223,0.98) 54%, rgba(186,176,168,1) 80%);
  box-shadow: inset 0 8px 18px rgba(255,255,255,0.55), 0 18px 50px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatSubtle 5s ease-in-out infinite;
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(0deg); }
  50% { transform: translateY(-15px) rotateX(12deg) rotateY(5deg); }
}

.dish-image {
  width: 85%;
  height: 85%;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  transform: translateZ(30px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-card:hover .dish-image {
  transform: translateZ(60px) scale(1.08);
}

.steam {
  position: absolute;
  width: 22px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  filter: blur(3px);
  animation: steamRise 4.2s ease-in-out infinite;
  opacity: 0.6;
  z-index: 20;
  pointer-events: none;
}

.steam-1 { left: 44%; top: -10px; animation-delay: 0s; }
.steam-2 { left: 55%; top: -4px; animation-delay: 1.4s; }
.steam-3 { left: 36%; top: -8px; animation-delay: 2.5s; }

@keyframes steamRise {
  0% { transform: translateY(14px) scale(0.9); opacity: 0; }
  30% { opacity: 0.5; }
  100% { transform: translateY(-34px) scale(1.1); opacity: 0; }
}

.candle-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  min-height: 92px;
}

.candle {
  width: 18px;
  height: 54px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,249,231,1), rgba(224,206,171,1));
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.flame {
  position: absolute;
  width: 14px;
  height: 24px;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  border-radius: 60% 60% 55% 55%;
  background: radial-gradient(circle at 50% 30%, rgba(255,251,200,1), rgba(255,173,73,1) 45%, rgba(174,67,18,0.95) 78%);
  box-shadow: 0 0 20px rgba(255,187,84,0.75);
  animation: flicker 1.8s ease-in-out infinite;
}

.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }

@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) rotate(-2deg); }
  50% { transform: translateX(-50%) scaleY(1.15) rotate(3deg); }
}

.room-depth {
  position: relative;
  height: 220px;
  perspective: 1200px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(35,18,13,0.25), rgba(15,8,6,0.55));
}

.room-layer {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-smooth);
}

.parallax-panel:hover .layer-back { transform: translateY(-6px) translateZ(-30px) scale(1.03); }
.parallax-panel:hover .layer-mid { transform: translateY(-10px) scale(1.04); }
.parallax-panel:hover .layer-front { transform: translateY(-15px) scale(1.05); }

.layer-back {
  background: radial-gradient(circle at 50% 18%, rgba(255,206,130,0.22), transparent 24%), repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 48px, transparent 48px 96px);
}

.layer-mid {
  background: linear-gradient(180deg, transparent 35%, rgba(64,38,28,0.75) 36% 100%), radial-gradient(circle at 15% 60%, rgba(255,221,164,0.14), transparent 18%), radial-gradient(circle at 83% 60%, rgba(255,221,164,0.14), transparent 18%);
}

.layer-front {
  background: linear-gradient(180deg, transparent 50%, rgba(32,18,12,0.92) 51% 100%);
}

.menu-card {
  transform-style: preserve-3d;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.menu-card:hover {
  transform: rotateX(8deg) rotateY(-8deg) translateY(-12px);
  box-shadow: var(--shadow-lg);
}

.dish-visual {
  height: 190px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(227,220,212,0.98) 56%, rgba(187,175,164,1) 80%);
  box-shadow: inset 0 10px 20px rgba(255,255,255,0.45), 0 15px 35px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  animation: floatSubtle 6s ease-in-out infinite;
}

.tuscan-kitchen {
  position: relative;
}

.kitchen-scene {
  position: relative;
  height: 360px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(214,190,152,0.16), rgba(92,54,37,0.42)), linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.22));
}

.shelf {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(111,68,46,1), rgba(58,31,18,1));
}

.shelf-1 { top: 72px; }
.shelf-2 { top: 145px; }

.copper-pan {
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,202,140,0.95), rgba(180,98,48,1) 52%, rgba(96,44,23,1) 75%);
  box-shadow: inset 0 6px 10px rgba(255,255,255,0.16), 0 12px 24px rgba(0,0,0,0.18);
}

.pan-1 { left: 18%; top: 188px; }
.pan-2 { left: 58%; top: 206px; width: 66px; height: 66px; }

.hanging-herbs {
  position: absolute;
  right: 12%;
  top: 30px;
  width: 74px;
  height: 140px;
  background: radial-gradient(circle at 50% 14%, rgba(103,133,72,0.9), transparent 20%), linear-gradient(180deg, rgba(74,112,62,0.95), rgba(47,78,44,0.9));
  clip-path: polygon(46% 0, 52% 0, 56% 12%, 70% 28%, 64% 44%, 74% 62%, 62% 100%, 44% 74%, 35% 100%, 22% 60%, 30% 44%, 24% 26%, 38% 12%);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.2));
}

.countertop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(162,152,144,0.65), rgba(94,86,79,0.92));
}

.marble-frame {
  position: relative;
  overflow: hidden;
}

.marble-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.12), transparent 30%, rgba(255,255,255,0.06) 56%, transparent 72%), linear-gradient(180deg, rgba(94,94,94,0.06), transparent), repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(180,180,180,0.02) 12px 26px);
  pointer-events: none;
}

.table-stage {
  position: relative;
  min-height: 290px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.14)), linear-gradient(180deg, rgba(96,58,39,0.5), rgba(50,28,18,0.7));
  overflow: hidden;
  perspective: 1200px;
}

.table-stage::after {
  content: '';
  position: absolute;
  inset: auto 8% 18px 8%;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,215,160,0.08), transparent 70%);
}

.table-node {
  position: absolute;
  width: 84px;
  height: 84px;
  background: transparent;
  border: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--transition-fast);
}

.table-node:hover {
  transform: translateY(-6px) scale(1.04);
}

.table-top {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255,241,217,0.24), transparent 16%), linear-gradient(180deg, rgba(123,79,54,1), rgba(64,35,22,1));
  box-shadow: inset 0 8px 12px rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.08);
}

.table-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
}

.table-node.active .table-top {
  box-shadow: 0 0 0 3px hsla(42,66%,60%,0.35), 0 18px 36px rgba(0,0,0,0.32);
}

.table-1 { left: 10%; top: 16%; }
.table-2 { left: 58%; top: 12%; }
.table-3 { left: 24%; top: 42%; }
.table-4 { left: 64%; top: 38%; }
.table-5 { left: 12%; top: 66%; }
.table-6 { left: 56%; top: 68%; }

.oven-core {
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 10px 25px rgba(140, 56, 28, 0.22); }
  50% { box-shadow: 0 0 24px rgba(255,184,86,0.35), 0 16px 34px rgba(140, 56, 28, 0.28); }
}

/* Iconic Dishes Page Styles */
.dish-spotlight-large {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.dish-plate-large {
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(234,229,223,0.98) 54%, rgba(186,176,168,1) 80%);
  box-shadow: inset 0 12px 24px rgba(255,255,255,0.55), 0 24px 60px rgba(0,0,0,0.3);
  position: relative;
  animation: floatLarge 7s ease-in-out infinite;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes floatLarge {
  0%, 100% { transform: translateY(0) rotateX(12deg) rotateY(6deg); }
  50% { transform: translateY(-35px) rotateX(18deg) rotateY(-6deg); }
}

.dish-image-large {
  width: 88%;
  height: 88%;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
  transform: translateZ(50px);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.dish-spotlight-large:hover .dish-image-large {
  transform: translateZ(100px) scale(1.12);
}

@media (max-width: 640px) {
  .oven-wrap {
    width: 300px;
    height: 300px;
  }

  .pizza-oven {
    inset: 28px;
  }

  .dish-plate {
    width: 180px;
    height: 180px;
  }

  .dish-plate-large {
    width: 240px;
    height: 240px;
  }
}