/* ═══════════════════════════════════════════════════════════
   PIZZA SCENE — Pizza Guy
   ═══════════════════════════════════════════════════════════ */

/* Scene layout — mirrors .compass-scene exactly */
.pizza-scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 60px;
  gap: 0;
}

.pizza-scene.scene-out { display: none; }

/* Pizza wrap — identical to .compass-wrap */
.pizza-wrap {
  position: relative;
  width: 520px;
  height: 520px;
  flex-shrink: 0;
  transform: scale(clamp(0.55, min(calc(100vw / 1000), calc(82vh / 700)), 1.55));
  transform-origin: center center;
}

@media (min-width: 1200px) { .pizza-wrap { margin: 32px 0; } }
@media (min-width: 1600px) { .pizza-wrap { margin: 72px 0; } }
@media (min-width: 1920px) { .pizza-wrap { margin: 110px 0; } }

/* Pizza SVG fills the wrap */
.pizza-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Slice groups ────────────────────────────────────────── */
.pslice-group {
  cursor: pointer;
  /* Smooth spring animation when slice lifts on hover */
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cheese wedge base */
.pslice {
  fill: rgba(220, 150, 30, 0.07);
  transition: fill 0.25s ease;
}

.pslice-group:hover .pslice,
.pslice-group.pactive .pslice {
  fill: rgba(220, 150, 30, 0.20);
}

/* Crust ring segment (outer band per slice) */
.pizza-crust-seg {
  fill: rgba(175, 98, 18, 0.60);
  stroke: rgba(220, 140, 20, 0.28);
  stroke-width: 0.5;
  transition: fill 0.25s ease;
}

.pslice-group:hover .pizza-crust-seg,
.pslice-group.pactive .pizza-crust-seg {
  fill: rgba(205, 125, 30, 0.80);
}

/* ── Cut lines between slices ────────────────────────────── */
.pizza-cut {
  stroke: rgba(232, 0, 138, 0.38);
  stroke-width: 0.9;
}

/* ── Toppings ────────────────────────────────────────────── */
.pizza-topping-a {
  fill: rgba(232, 0, 138, 0.52);
  transition: fill 0.25s ease;
}
.pizza-topping-b {
  fill: rgba(220, 155, 30, 0.62);
  transition: fill 0.25s ease;
}

.pslice-group:hover .pizza-topping-a,
.pslice-group.pactive .pizza-topping-a {
  fill: rgba(232, 0, 138, 0.90);
  filter: drop-shadow(0 0 4px rgba(232,0,138,0.6));
}
.pslice-group:hover .pizza-topping-b,
.pslice-group.pactive .pizza-topping-b {
  fill: rgba(240, 175, 50, 0.95);
  filter: drop-shadow(0 0 4px rgba(220,155,30,0.5));
}

/* ── Outer glow ring ─────────────────────────────────────── */
.pizza-outer-ring {
  fill: none;
  stroke: rgba(180, 100, 20, 0.55);
  stroke-width: 1.5;
}

/* ── Center hub ──────────────────────────────────────────── */
.pizza-center-hub {
  fill: var(--bg);
  stroke: rgba(232, 0, 138, 0.50);
  stroke-width: 1.2;
}

.pizza-center-dot {
  fill: rgba(232, 0, 138, 0.70);
  animation: pizzaCenterPulse 3s ease-in-out infinite;
}

@keyframes pizzaCenterPulse {
  0%,100% { opacity: 0.70; r: 6; }
  50%      { opacity: 1;    r: 8; }
}

/* ── Slice text labels ───────────────────────────────────── */
.pizza-slice-num {
  font-size: 15px;
  font-family: var(--font-mono);
  fill: rgba(220, 150, 30, 0.55);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  transition: fill 0.25s ease;
  letter-spacing: 0.06em;
}

.pizza-slice-name {
  font-size: 7px;
  font-family: var(--font-mono);
  fill: rgba(200, 130, 22, 0.42);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  transition: fill 0.25s ease;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pslice-group:hover .pizza-slice-num,
.pslice-group.pactive .pizza-slice-num {
  fill: rgba(240, 180, 60, 1);
}
.pslice-group:hover .pizza-slice-name,
.pslice-group.pactive .pizza-slice-name {
  fill: rgba(225, 160, 50, 0.85);
}

/* Pulse animation when a slice is clicked */
@keyframes slicePulse {
  0%   { opacity: 1; }
  30%  { opacity: 0.4; }
  60%  { opacity: 0.9; }
  100% { opacity: 1; }
}
.pslice-group.pslice-pulse .pslice,
.pslice-group.pslice-pulse .pizza-crust-seg {
  animation: slicePulse 0.55s ease;
}

/* ── Amber neon sign (pizza variant) ─────────────────────── */
.pizza-neon {
  color: var(--amber);
  border-color: rgba(64, 37, 132, 0.30);
  text-shadow:
    0 0 8px  var(--amber),
    0 0 18px rgba(64, 37, 132,0.55),
    0 0 36px rgba(64, 37, 132,0.18);
  background: rgba(64, 37, 132, 0.03);
  animation: pizzaNeonFlicker 10s ease infinite;
}

.pizza-neon .pnd {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber), 0 0 14px rgba(64, 37, 132,0.60);
}

@keyframes pizzaNeonFlicker {
  0%, 19%, 22%, 25%, 28%, 100% {
    text-shadow: 0 0 8px var(--amber), 0 0 18px rgba(64, 37, 132,0.55), 0 0 36px rgba(64, 37, 132,0.18);
    border-color: rgba(64, 37, 132,0.30);
    opacity: 1;
  }
  20%, 23%, 26% {
    text-shadow: none;
    border-color: rgba(64, 37, 132,0.08);
    opacity: 0.80;
  }
}