/* ==========================================================================
   MEA Ecosystem — Hero Puzzle
   Puzzle interaktif logo+teks di hero, menggantikan judul+tagline lama.
   File terpisah dari landing.css supaya landing.css tidak makin gemuk,
   dan supaya mudah dicabut/diganti tanpa menyentuh file lain.

   Dependensi: shared/token/token-color.css (untuk var warna)
   ========================================================================== */

.mea-puzzle {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 160;
  margin: 0 auto;
  /* Puzzle harus di BAWAH search box & hasil pencarian secara stacking,
     tapi tetap di atas background hero biasa */
  z-index: 1;
  touch-action: none; /* supaya drag piece tidak ikut men-scroll halaman di mobile */
}

/* Search box dan panel hasil pencarian (elemen lain di hero) wajib
   z-index lebih tinggi dari ini. Ditulis di landing.css yang sudah ada,
   cukup pastikan nilainya > 1, misalnya z-index: 10. */

.mea-puzzle-svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* supaya shadow filter tidak terpotong di tepi viewBox */
}

.mea-puzzle-piece {
  cursor: grab;
  stroke: var(--mea-border-strong, #3A3A3A);
  stroke-width: 0.6;
}

.mea-puzzle-piece:active,
.mea-puzzle-piece.is-dragging {
  cursor: grabbing;
}

/* CATATAN PENTING: filter shadow utama (mea-piece-shadow) di-set lewat
   atribut SVG filter="url(#mea-piece-shadow)" oleh puzzle.js, BUKAN di
   sini — karena CSS filter akan MENIMPA atribut filter SVG sepenuhnya,
   bukan digabung. Jadi kelas .is-dragging di bawah ini HANYA menambah
   sedikit efek visual lain (brightness), tidak menyentuh properti filter,
   supaya shadow dasar dari SVG tetap tampil terus. */
.mea-puzzle-piece.is-dragging {
  opacity: 0.97;
}

/* Lapisan highlight kaca — sama shape dengan piece, fill gradient
   transparan, tidak menangkap pointer event (drag tetap milik piece
   utama di bawahnya) */
.mea-puzzle-glass-overlay {
  pointer-events: none;
}

/* Piece yang jadi umpan (berkedip) saat load pertama kali, sebelum
   disentuh — pakai CSS animation pada opacity glow, bukan filter,
   supaya tidak bentrok dengan shadow filter SVG */
.mea-puzzle-piece.is-hint {
  animation: mea-piece-hint-pulse 1.8s ease-in-out infinite;
}

@keyframes mea-piece-hint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

/* Slot kosong (tempat piece belum ditaruh / piece lagi diangkat):
   background putih polos, kontras sengaja terhadap tema gelap,
   kesan "lubang belum terisi" */
.mea-puzzle-slot-empty {
  fill: #FFFFFF;
  opacity: 0.06;
}