/* ============================================================
   WAJAN HIDUP — aset bergerak utama di bagian dapur.
   Teknik dari referensi (transform-origin di koordinat SVG,
   transform-box: fill-box, delay bertingkat), ditingkatkan:
   - pendar panas yang ikut berdenyut (referensi: api mengambang)
   - bahan memutar saat melompat, bukan hanya naik-turun
   - uap bergantian dengan skala, bukan hanya geser
   - mati total saat tidak memasak (hemat baterai)
   ============================================================ */

.wok-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
  background: var(--ink);
  color: #e8f1f7;
  border-radius: var(--r-ui);
  padding: clamp(14px, 1.6vw, 20px);
  margin-block: 18px;
  width: 100%;
  overflow: hidden;
}

.wok-art {
  width: clamp(120px, 17vw, 170px);
  height: auto;
  flex: none;
  overflow: visible;
}

.wok-txt b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.wok-txt small {
  display: block;
  font-size: var(--t-small);
  color: #a9c2d3;
  line-height: 1.45;
}

/* ---------- keadaan diam ---------- */
.wok-art .flame,
.wok-art .bits,
.wok-art .smoke path { opacity: 0.28; }

/* ---------- keadaan memasak ---------- */
.wok-card[data-cooking="true"] .wok-art .flame {
  opacity: 1;
  transform-origin: 110px 132px;
  animation: flame-pulse 0.62s ease-in-out infinite alternate;
}
.wok-card[data-cooking="true"] .wok-art .pan {
  transform-origin: 110px 100px;
  animation: pan-toss 1.15s ease-in-out infinite;
}
.wok-card[data-cooking="true"] .wok-art .bits circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: bit-hop 0.92s ease-in-out infinite;
}
.wok-art .bits circle:nth-child(2n) { animation-delay: 0.16s; }
.wok-art .bits circle:nth-child(3n) { animation-delay: 0.34s; }
.wok-art .bits circle:nth-child(4n) { animation-delay: 0.5s; }

.wok-card[data-cooking="true"] .wok-art .smoke path {
  opacity: 0.8;
  animation: steam-rise 1.7s ease-in-out infinite;
}
.wok-art .smoke path:nth-child(2) { animation-delay: 0.45s; }
.wok-art .smoke path:nth-child(3) { animation-delay: 0.9s; }

/* pendar panas ikut berdenyut */
.wok-card[data-cooking="true"] { animation: heat-glow 1.5s ease-in-out infinite alternate; }

@keyframes flame-pulse {
  from { transform: scale(1, 1); }
  to   { transform: scale(1.07, 1.16); }
}
@keyframes pan-toss {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  28%      { transform: rotate(-5deg) translateY(-4px); }
  62%      { transform: rotate(3deg) translateY(1px); }
}
@keyframes bit-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  42%      { transform: translateY(-22px) rotate(38deg); }
}
@keyframes steam-rise {
  0%   { opacity: 0; transform: translateY(6px) scaleY(0.5); }
  35%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-16px) scaleY(1.3); }
}
@keyframes heat-glow {
  from { box-shadow: inset 0 0 0 1px rgba(255, 176, 96, 0.12); }
  to   { box-shadow: inset 0 0 44px -10px rgba(255, 138, 61, 0.5); }
}

/* ---------- mobile ---------- */
@media (max-width: 560px) {
  .wok-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .wok-art { width: 132px; }
}

/* ---------- hormati prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wok-card[data-cooking="true"],
  .wok-card[data-cooking="true"] .wok-art .flame,
  .wok-card[data-cooking="true"] .wok-art .pan,
  .wok-card[data-cooking="true"] .wok-art .bits circle,
  .wok-card[data-cooking="true"] .wok-art .smoke path {
    animation: none !important;
  }
  .wok-art .flame,
  .wok-art .bits,
  .wok-art .smoke path { opacity: 0.85; }
}