/* ============================================
   CANDY SCENE v2 -- Level 3's living Candy Village + Fizz's bakery
   Used by game/js/candy-scene.js on top of css/scene-kit.css (stage,
   layers, props, generic reactions, particles). This file holds the
   candy look: the two rooms and their crossfade, the worktable strip,
   Fizz's hop/bob, the pokable reactions, the oven glow, the CAKES cake
   and the warm "room baked" finale.
   ============================================ */

.fs-root.fs-candy { background: #f7b8d8; }

/* ---- Rooms: one screen each, crossfaded ---- */
.cv-room {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.cv-room.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}
.cv-room.no-fade { transition: none; }
.cv-room .fs-layer { width: 960px; }
.cv-ground img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 960px;
  height: auto;
  image-rendering: auto;
}
/* The worktable: a foreground strip whose top edge hides Fizz's feet */
.cv-counter-strip {
  position: absolute;
  left: 0;
  bottom: -102px;
  width: 960px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  image-rendering: auto;
}
.cv-fore .fs-prop img { filter: brightness(0.96) saturate(1.05); }

/* ---- Fizz ---- */
.cv-fizz .fs-body { position: relative; }
.cv-fizz-body { animation: cv-bob 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.cv-fizz.talking .cv-fizz-body { animation-duration: 1.1s; }
.cv-fizz.hopping .cv-fizz-body { animation: none; }
@keyframes cv-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-3px) scale(0.99, 1.02); }
}
.cv-fizz .fs-body > img {
  filter: drop-shadow(0 4px 6px rgba(120, 30, 70, 0.35));
}
.cv-fizz-shadow {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 62%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 30, 70, 0.35) 0%, rgba(120, 30, 70, 0) 70%);
  pointer-events: none;
}
.in-bakery .cv-fizz-shadow { display: none; }

/* ---- "Tap to continue": the prop that starts the next beat beckons ---- */
.cv-beckon .fs-body > img { animation: cv-beckon 1.5s ease-in-out infinite; }
@keyframes cv-beckon {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(255, 232, 136, 0.5)); transform: scale(1); }
  50%      { filter: brightness(1.18) drop-shadow(0 0 16px rgba(255, 232, 136, 0.95)); transform: scale(1.05); }
}
.cv-beckon.top-anchored .fs-body > img { transform-origin: 50% 0; }

/* ---- Pokable reactions ---- */
@keyframes cv-lid-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-6px) scale(0.96, 1.06); }
  60%  { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}
.fs-body.cv-lid-hop { animation: cv-lid-hop 0.5s ease-out; }

@keyframes cv-clock-spin {
  0%   { transform: rotate(0deg); }
  70%  { transform: rotate(380deg); }
  85%  { transform: rotate(350deg); }
  100% { transform: rotate(360deg); }
}
.fs-body.cv-clock-spin { animation: cv-clock-spin 1.1s cubic-bezier(0.3, 0, 0.3, 1); transform-origin: 50% 40%; }

@keyframes cv-whisk-spin {
  0%, 100% { transform: rotate(0deg); }
  15%  { transform: rotate(-22deg); }
  35%  { transform: rotate(22deg); }
  55%  { transform: rotate(-18deg); }
  75%  { transform: rotate(14deg); }
}
.fs-body.cv-whisk-spin { animation: cv-whisk-spin 0.9s ease-in-out; }

@keyframes cv-roll {
  0%   { transform: translateX(0) rotate(0deg); }
  45%  { transform: translateX(56px) rotate(160deg); }
  55%  { transform: translateX(56px) rotate(160deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.fs-body.cv-roll { animation: cv-roll 1.1s ease-in-out; transform-origin: 50% 50%; }

@keyframes cv-swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(9deg); }
  45%  { transform: rotate(-7deg); }
  70%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
.fs-body.cv-swing { animation: cv-swing 1.2s ease-out; }
.cv-leaf {
  position: absolute;
  width: 9px;
  height: 6px;
  border-radius: 60% 0 60% 0;
  background: #6fbf5a;
  box-shadow: inset 0 0 2px #3d8a2e;
  pointer-events: none;
}

@keyframes cv-tip {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-32deg) translateX(-4px); }
  70%  { transform: rotate(-30deg) translateX(-4px); }
  100% { transform: rotate(0deg); }
}
.fs-body.cv-tip { animation: cv-tip 1s ease-in-out; transform-origin: 50% 90%; }

.cv-bubble {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 230, 0.9);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.8), rgba(255, 180, 220, 0.15) 60%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

@keyframes cv-door-swing {
  0%   { transform: scaleX(1); }
  40%  { transform: scaleX(0.72) skewY(-3deg); }
  100% { transform: scaleX(1); }
}
.fs-body.cv-door-swing { animation: cv-door-swing 0.7s ease-in-out; transform-origin: 8% 100%; }
.fs-prop.open .fs-body > img { filter: drop-shadow(0 0 10px rgba(255, 232, 136, 0.55)); }

@keyframes cv-lolly-spin {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(-1); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}
.fs-body.cv-lolly-spin { animation: cv-lolly-spin 1.2s ease-in-out; }

@keyframes cv-squish {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.22, 0.74); }
  55%  { transform: scale(0.9, 1.16); }
  80%  { transform: scale(1.06, 0.96); }
  100% { transform: scale(1, 1); }
}
.fs-body.cv-squish { animation: cv-squish 0.7s ease-out; }

/* The window: a bare tap region over the painted window; a gummy bear
   peeks up inside the clipped pane */
.cv-window .fs-body { width: 180px; height: 210px; }
.cv-peek-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cv-peek-clip img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  transform: translate(-50%, 100%);
  image-rendering: pixelated;
}
.cv-room-village [data-id="house-a"] .cv-peek-clip { inset: auto; left: 16%; top: 40%; width: 24%; height: 24%; }

/* Ingredient animation (4-cell strip) over the bowl */
.cv-ingredient {
  position: absolute;
  width: 104px;
  height: 92px;
  background-size: 400% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  pointer-events: none;
}

/* The oven's breathing glow (in front of the oven door) */
.cv-oven-glow {
  position: absolute;
  left: 870px;
  top: 340px;
  width: 220px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 60, 0.55) 0%, rgba(255, 120, 40, 0.28) 35%, rgba(255, 120, 40, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 215;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.cv-oven-glow.on { opacity: 0.7; animation: cv-glow-breathe 2.4s ease-in-out infinite; }
.cv-baking .cv-oven-glow.on { animation-duration: 1.1s; }
@keyframes cv-glow-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
.cv-oven-glow.cv-glow-flash { animation: cv-glow-flash 1.2s ease-out; }
@keyframes cv-glow-flash { 0% { opacity: 0.2; } 25% { opacity: 1; } 100% { opacity: 0.6; } }

/* The CAKES cake on the counter and its icing letters */
.cv-cake .fs-body > img { filter: drop-shadow(0 4px 10px rgba(255, 150, 60, 0.45)); }
.cv-cake-letters {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.cv-cake-letter {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 3px 2px;
  color: #fff;
  background: linear-gradient(180deg, #ff7fb6, #e0407f);
  border: 2px solid #fff4f9;
  border-radius: 4px;
  text-shadow: 0 1px 0 #a02050;
  box-shadow: 0 2px 0 #a02050;
  opacity: 0;
  transform: scale(0);
}
.cv-cake-letter.on { animation: cv-letter-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes cv-letter-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Butterflies (candy wrappers) */
.cv-butterfly img { filter: drop-shadow(0 2px 3px rgba(120, 30, 70, 0.35)); }

/* ---- Atmosphere ---- */
.fs-mote.cv-mote {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px rgba(255, 220, 240, 0.9);
}
.fs-mote.cv-mote:nth-child(3n)  { background: #ff8ac4; box-shadow: 0 0 4px #ff8ac4; }
.fs-mote.cv-mote:nth-child(3n+1) { background: #5ad1ff; box-shadow: 0 0 4px #5ad1ff; }
.fs-mote.cv-mote:nth-child(5n)  { background: #ffd23f; box-shadow: 0 0 4px #ffd23f; }
.fs-firefly.cv-sparkle {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ffffff 0%, #fff0f8 40%, rgba(255, 220, 240, 0.4) 65%, transparent 100%);
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
}
.cv-sun {
  position: absolute;
  left: 50%;
  top: 0;
  width: 700px;
  height: 320px;
  transform: translate(-50%, -40%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 245, 220, 0.5) 0%, rgba(255, 220, 240, 0.2) 40%, rgba(255, 220, 240, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cv-sun-breathe 8s ease-in-out infinite;
}
@keyframes cv-sun-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ---- The room "bakes" (correct code): warm gold flash over everything ---- */
.cv-warm {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 215, 110, 0.55) 0%, rgba(255, 190, 80, 0.3) 45%, rgba(255, 160, 60, 0.1) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
}
.fs-candy .fs-backdrop img, .fs-candy .cv-counter-strip { transition: filter 2.5s ease; }
.fs-candy.room-baked .cv-warm { opacity: 0.55; }
.fs-candy.room-baked .fs-backdrop img { filter: brightness(1.08) saturate(1.15); }
.fs-candy.room-baked .cv-counter-strip { filter: brightness(1.06) saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
  .cv-fizz-body, .cv-sun, .cv-oven-glow.on, .cv-beckon .fs-body > img { animation: none !important; }
  .cv-beckon .fs-body > img { filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 232, 136, 0.9)); }
}