/* =============================================================================
   Animated cooking guide (cooking.html)
   =============================================================================
   The infographic is the same art as before, split in two:

     images/cooking-guide-base.{webp,jpg}  the picture with the moving parts
                                           painted out (steam, the tossed pan,
                                           the floating pasta)
     images/cooking-guide/*.webp           those parts as separate cut-outs

   The cut-outs sit on top in exactly their original spots (positions are
   percentages of the 1280x2124 artwork, so it scales with the page) and these
   rules move them. Pure CSS — no script, nothing to load or fail.

   At rest every cut-out lands back where it came from, so with motion turned
   off (prefers-reduced-motion, at the bottom) the guide looks exactly like the
   original still image.
   ========================================================================== */

.cg-stage { position: relative; }
.cg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.cg-sprite {
  position: absolute;
  height: auto;
  max-width: none;
  will-change: transform, opacity;
}

/* --- Steam: each wisp rises, sways and fades, then starts again ---------- */
.cg-steam {
  transform-origin: 50% 100%;
  animation: cg-steam 2.6s linear infinite;
}
@keyframes cg-steam {
  0%   { opacity: 0;    transform: translateY(18%) scaleY(0.85) skewX(0deg); }
  20%  { opacity: 1; }
  50%  {                transform: translateY(-8%) scaleY(1)    skewX(6deg); }
  75%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateY(-38%) scaleY(1.12) skewX(-5deg); }
}

/* --- Timer: the "3-4" blinks like a kitchen timer --------------------------
   The overlay is the screen with the digits wiped off; showing it hides them. */
.cg-blink { animation: cg-blink 1.1s steps(1, end) infinite; }
@keyframes cg-blink {
  0%   { opacity: 0; }
  62%  { opacity: 1; }
}

/* --- Burner: the red ring glows hotter and cooler ------------------------ */
.cg-glow { animation: cg-glow 1.8s ease-in-out infinite alternate; }
@keyframes cg-glow {
  from { opacity: 0.1; }
  to   { opacity: 0.85; }
}

/* --- Pot: bubbles popping on the water ----------------------------------- */
.cg-bubble {
  position: absolute;
  width: 0.62%;
  aspect-ratio: 1;
  margin: -0.31% 0 0 -0.31%;
  background: #E8F7FF;
  border: 1px solid #7FC8EE;
  border-radius: 2px;
  opacity: 0;
  animation: cg-bubble 2.2s ease-out infinite;
}
@keyframes cg-bubble {
  0%   { opacity: 0; transform: scale(0.2); }
  35%  { opacity: 1; transform: scale(1); }
  55%  { opacity: 1; transform: scale(1.25) translateY(-30%); }
  62%  { opacity: 0; transform: scale(1.6) translateY(-40%); }
  100% { opacity: 0; }
}

/* --- Dock & toss: the pan flicks and the spaghetti surges up and over ----
   Both pieces swing about the hand on the end of the handle (transform-origin,
   set inline), so the pasta always rides the pan. On top of that the pasta
   stretches and curls about the spot where it meets the pan — it never lifts
   clear, because its bottom edge was cut along the pan's rim and would show.
   The translate pair moves the pivot for that second turn from the hand to
   the pan (percentages of the pasta cut-out, so it scales with the page). */
.cg-toss-pan   { animation: cg-toss-pan 2.6s ease-in-out infinite; }
.cg-toss-pasta { animation: cg-toss-pasta 2.6s ease-in-out infinite; }
@keyframes cg-toss-pan {
  0%, 70%, 100% { transform: rotate(0deg); }
  12%  { transform: rotate(-4deg); }
  26%  { transform: rotate(9deg); }
  40%  { transform: rotate(2deg); }
  55%  { transform: rotate(-1deg); }
}
@keyframes cg-toss-pasta {
  0%, 70%, 100% { transform: rotate(0deg) translate(-102.5%, 30.4%) rotate(0deg) scale(1, 1) translate(102.5%, -30.4%); }
  12%  { transform: rotate(-4deg) translate(-102.5%, 30.4%) rotate(3deg) scale(1, 0.94) translate(102.5%, -30.4%); }
  26%  { transform: rotate(9deg) translate(-102.5%, 30.4%) rotate(-7deg) scale(1.02, 1.12) translate(102.5%, -30.4%); }
  40%  { transform: rotate(2deg) translate(-102.5%, 30.4%) rotate(6deg) scale(0.98, 1.17) translate(102.5%, -30.4%); }
  55%  { transform: rotate(-1deg) translate(-102.5%, 30.4%) rotate(-2deg) scale(1, 0.96) translate(102.5%, -30.4%); }
  62%  { transform: rotate(0deg) translate(-102.5%, 30.4%) rotate(1deg) scale(1.01, 0.99) translate(102.5%, -30.4%); }
}

/* --- Floating pasta: a slow drift in zero gravity ------------------------- */
.cg-float { animation: cg-float 6s ease-in-out infinite; }
@keyframes cg-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-5%) rotate(5deg); }
  66%      { transform: translateY(3%) rotate(-4deg); }
}
/* Pieces cut off by the edge of the picture only bob: a turn would swing the
   cut edge into view. */
.cg-float-edge { animation: cg-float-edge 6s ease-in-out infinite; }
@keyframes cg-float-edge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5%); }
}

/* --- Stars: a sparkle flares over each star now and then ------------------ */
.cg-twinkle {
  position: absolute;
  width: 2.6%;
  aspect-ratio: 1;
  margin: -1.3% 0 0 -1.3%;
  opacity: 0;
  animation: cg-twinkle 3.4s ease-in-out infinite;
  --c: #FFE27A;
}
.cg-twinkle-c { --c: #9FF3FF; }
.cg-twinkle-w { --c: #FFFFFF; width: 1.8%; margin: -0.9% 0 0 -0.9%; }
.cg-twinkle::before,
.cg-twinkle::after {
  content: '';
  position: absolute;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}
.cg-twinkle::before { left: 42%; width: 16%; top: 0; height: 100%; }
.cg-twinkle::after  { top: 42%; height: 16%; left: 0; width: 100%; }
@keyframes cg-twinkle {
  0%, 60%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  75%           { opacity: 1; transform: scale(1) rotate(45deg); }
  88%           { opacity: 0; transform: scale(0.3) rotate(90deg); }
}

/* --- Motion off: everything sits still, exactly like the original art ---- */
@media (prefers-reduced-motion: reduce) {
  .cg-sprite, .cg-steam, .cg-blink, .cg-glow, .cg-toss-pan, .cg-toss-pasta,
  .cg-float, .cg-float-edge { animation: none; }
  .cg-blink { opacity: 0; }        /* digits stay showing */
  .cg-glow { opacity: 0; }
  .cg-bubble, .cg-twinkle { display: none; }
}