/* Spud & Root recipe game: Hands off the spatula, the browning game on the
   Potato & Chorizo Breakfast Skillet page. Only that page loads this file,
   after recipe.css. The box, message, tiled wall, heat bar (.pn-hud), result
   stamp and the pn-drop animation are shared with the other games and stay
   in recipe.css ("Games"). */

/* A stainless-steel stovetop, not a marble counter */
.rp-pan .rp-slicer__stage {
  --counter: #dfe4e8;
  --counter-line: #bec6cc;
}

.pn-handle {
  fill: #231f20;
}
.pn-handle-hole {
  fill: #5a5556;
}
.pn-pan {
  fill: #2c2a2b;
  stroke: var(--ink);
  stroke-width: 4;
}
.pn-lip {
  fill: none;
  stroke: #6b6667;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.8;
}
.pn-floor {
  fill: #3b3839;
}
.pn-oil {
  fill: #f3d77e;
  opacity: 0.16;
}

/* The heat: a glow round the pan, and oil bubbling on its floor. Both follow
   the pan heat (--heat, set on the svg) and only show while it's cooking. */
.pn-glow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.is-cooking .pn-glow {
  opacity: calc(var(--heat, 1) * 0.5);
}
.pn-bubbles {
  display: none;
  pointer-events: none;
}
.is-cooking .pn-bubbles {
  display: inline;
}
.pn-bubble {
  opacity: 0.7;
  opacity: clamp(0, calc((var(--heat, 1) - var(--t, 0)) * 6), 1);
  transition: opacity 0.3s;
}
.pn-bubble circle {
  fill: rgba(243, 215, 126, 0.25);
  stroke: #f3d77e;
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}

.is-empty [data-cubes] {
  display: none;
}
.pn-cube {
  transition: transform 0.45s var(--ease-spring);
}
.pn-hop {
  transform-box: fill-box;
  transform-origin: 50% 60%;
}
.pn-top,
.pn-left,
.pn-right {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.pn-tan {
  opacity: 0.85;
}
.pn-smoke {
  opacity: 0;
  transition: opacity 0.3s;
}
.pn-smoke path {
  fill: none;
  stroke: #9a9a9a;
  stroke-width: 3;
  stroke-linecap: round;
}
.pn-smoke.is-on {
  opacity: 1;
}
.pn-spatula {
  transform: translate(356px, 62px) rotate(24deg);
  pointer-events: none;
}
.pn-spatula__move {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.pn-spatula__handle {
  fill: #9a5a2b;
  stroke: var(--ink);
  stroke-width: 3;
}
.pn-spatula__blade {
  fill: #b5723a;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.pn-spatula__slots {
  fill: none;
  stroke: #8a4f24;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* The stir timeline: time filling along, a tick for each stir (green for a
   good gap, red for a fidget) */
.pn-hud__time {
  fill: #ead9b0;
  stroke: var(--ink);
  stroke-width: 2;
}
.pn-tick {
  fill: #97d700;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.pn-tick.is-soon {
  fill: #ff4438;
}

@media (prefers-reduced-motion: no-preference) {
  .pn-hop.is-hop {
    animation: pn-hop 0.45s var(--ease-out);
  }
  .pn-hop.is-drop {
    animation: pn-drop 0.5s var(--ease-out) both;
    animation-delay: calc(var(--i) * 30ms);
  }
  .pn-spatula.is-stirring .pn-spatula__move {
    animation: pn-sweep 0.55s var(--ease-out);
  }
  .pn-smoke.is-on path {
    animation: steam 1.4s ease-in-out infinite;
  }
  .pn-smoke.is-on path:nth-child(2) {
    animation-delay: 0.5s;
  }
  .pn-bubble circle {
    animation: pn-pop 1.2s ease-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pn-cube,
  .pn-glow,
  .pn-bubble {
    transition: none;
  }
}
@keyframes pn-hop {
  40% { translate: 0 -20px; rotate: 14deg; }
}
@keyframes pn-sweep {
  35% { translate: -150px 60px; rotate: -40deg; }
  70% { translate: -40px 20px; rotate: 12deg; }
}
@keyframes pn-pop {
  0% { scale: 0.2; opacity: 0; }
  30% { opacity: 1; }
  100% { scale: 1.5; opacity: 0; }
}