/* winner-rocket.css — notifikasi pemenang voucher (maskot rocket)
   Dua lane yang disuntikkan oleh winner-rocket.js:
   #gz-wr-lane     : KANAN -> KIRI (antara #banner dan #flash-sale)
   #gz-wr-lane-2   : KIRI  -> KANAN (antara #flash-sale dan section "Baru Dirilis")
   Keduanya hanya memengaruhi lane masing-masing, tidak mengubah section lain. */

.gz-wr-lane {
  position: relative;
  width: 100%;
  height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  contain: layout style;
}
.gz-wr-lane[hidden] { display: none; }

.gz-wr-clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--gz-wr-h, 32px);
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.gz-wr-marquee {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--gz-wr-h, 32px);
  white-space: nowrap;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  animation: none;
}

@keyframes gzWrMarquee {
  from { transform: translate3d(var(--gz-wr-from, 100%), 0, 0); }
  to   { transform: translate3d(var(--gz-wr-to, -100%), 0, 0); }
}

.gz-wr-card {
  display: flex;
  align-items: center;
  height: var(--gz-wr-h, 32px);
  background: linear-gradient(180deg, rgba(26, 34, 44, .96), rgba(19, 22, 28, .96));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  margin-left: calc(var(--gz-wr-h, 32px) * -0.28);
  padding: 0 calc(var(--gz-wr-h, 32px) * 0.18) 0 calc(var(--gz-wr-h, 32px) * 0.28);
  gap: 6px;
  box-sizing: border-box;
  overflow: visible;
}

.gz-wr-rocket {
  position: relative;
  z-index: 2;
  height: var(--gz-wr-h, 32px);
  width: auto;
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255, 40, 0, .35));
}

/* Lane 2: rocket & api di-mirror (scaleX -1); TEKS TIDAK di-mirror */
#gz-wr-lane-2 .gz-wr-rocket { transform: scaleX(-1); }
#gz-wr-lane-2 .gz-wr-fx { transform: scaleX(-1); }

.gz-wr-fx {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--gz-wr-h, 32px) * 1.4);
  height: var(--gz-wr-h, 32px);
  margin-left: -4px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(255, 90, 0, .45));
}

/* Api: animasi HANYA transform & opacity pada wrapper HTML (dikomposisi),
   bukan transform pada <g> SVG. Tidak ada drop-shadow teranimasi di dalam SVG. */
.gz-wr-flame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: gzwrFlame .2s ease-in-out infinite alternate;
}
.gzwr-lay { transform-box: view-box; }

@keyframes gzwrFlame {
  from { transform: translate3d(0, 0, 0) scale(1, 1); opacity: .9; }
  to   { transform: translate3d(0, -1px, 0) scale(1.1, .92); opacity: 1; }
}

.gz-wr-spark {
  position: absolute;
  left: 60%;
  top: 55%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd04a;
  box-shadow: 0 0 6px #ff8a00;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: gzwrSpark .9s ease-out infinite;
}
.gz-wr-spark.s2 { top: 42%; animation-delay: .22s; width: 4px; height: 4px; }
.gz-wr-spark.s3 { top: 68%; animation-delay: .45s; width: 3px; height: 3px; }
.gz-wr-spark.s4 { top: 58%; animation-delay: .68s; width: 4px; height: 4px; }
@keyframes gzwrSpark {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(20px, -6px, 0) scale(.3); }
}

.gz-wr-puff {
  position: absolute;
  left: 28%;
  top: 28%;
  width: calc(var(--gz-wr-h, 32px) * 0.95);
  height: calc(var(--gz-wr-h, 32px) * 0.7);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: gzwrPuff 1.5s ease-out infinite;
}
.gz-wr-puff svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gz-wr-puff.b { animation-delay: .37s; }
.gz-wr-puff.c { animation-delay: .75s; }
.gz-wr-puff.d { animation-delay: 1.12s; }
@keyframes gzwrPuff {
  0%   { opacity: 0; transform: translate3d(-4px, 6px, 0) scale(.35); }
  15%  { opacity: .9; }
  100% { opacity: 0; transform: translate3d(18px, -16px, 0) scale(1.2) rotate(10deg); }
}

.gz-wr-text {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(10px, calc(var(--gz-wr-h, 32px) * 0.34), 14px);
  line-height: 1.2;
  color: var(--text-primary, #f3f0f0);
  font-weight: 500;
  font-family: inherit;
}
.gz-wr-congrats { margin-right: .25em; }
.gz-wr-phone { color: var(--primary, #ff0000); font-weight: 800; margin: 0 .25em; }
.gz-wr-chosen { margin: 0 .25em; }
.gz-wr-voucherword { margin: 0 .25em; }
.gz-wr-nominal { color: #fff; font-weight: 800; margin: 0 .25em; }
.gz-wr-free { margin-left: .25em; }

/* Saat lane tidak aktif: pause SEMUA animasi anak (api, asap, percikan, marquee) */
.gz-wr-idle .gzwr-lay,
.gz-wr-idle .gz-wr-flame,
.gz-wr-idle .gz-wr-spark,
.gz-wr-idle .gz-wr-puff { animation-play-state: paused !important; }

/* Layar kecil / sentuh: kurangi puff 4->2 dan spark 4->2 (ukuran/posisi/teks tetap) */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .gz-wr-puff.c, .gz-wr-puff.d,
  .gz-wr-spark.s3, .gz-wr-spark.s4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gzwr-lay, .gz-wr-flame, .gz-wr-spark, .gz-wr-puff { animation: none !important; }
  .gz-wr-marquee { animation-duration: 40s !important; }
}