/* ==========================================================================
   MEA Ecosystem — Product Icon Grid (Breathing + Directional Scan Hover)
   Menggantikan Blood Flow Explorer (SVG animateMotion) dan versi marquee
   sebelumnya (bermasalah di seamless loop). Ikon diam di tempat dengan
   animasi napas halus, hover memicu garis scan yang muncul dari sisi
   tempat kursor masuk. Nama file dipertahankan "bloodflow.css" agar
   tidak perlu ubah <link> di index.html.
   ========================================================================== */

.icon-marquee-stage{
  width: 100%;
  padding: 32px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  perspective: 800px;
}

/* ------------------------------------------------------------
   Kartu ikon — glass diperkuat (gradient diagonal + saturate),
   ukuran gagah agar tetap jelas terbaca meski wrap 2 baris.
   ------------------------------------------------------------ */
.icon-chip{
  width: 92px;
  height: 92px;
  border-radius: var(--radius-md, 18px);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(59, 130, 246, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  animation: iconBreathe 4.5s ease-in-out infinite;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
/* Delay bervariasi agar napas tidak terlihat "kompak"/serentak */
.icon-chip:nth-child(3n){ animation-delay: -1.5s; }
.icon-chip:nth-child(3n+1){ animation-delay: -3s; }

@keyframes iconBreathe{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.icon-chip:hover,
.icon-chip:focus-visible{
  animation-play-state: paused;
  border-color: rgba(59, 130, 246, 0.6);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.26), rgba(59, 130, 246, 0.07));
  box-shadow: 0 16px 32px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  outline: none;
}

.icon-chip svg{
  width: 36px;
  height: 36px;
  stroke: #5B9EFF;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(91, 158, 255, 0.35));
}

/* Badge status kecil di pojok kartu */
.icon-chip .icon-chip-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0A0A0A;
  z-index: 3;
}
.icon-chip .icon-chip-badge.active{ background: var(--green, #00E676); }
.icon-chip .icon-chip-badge.development{ background: #F59E0B; }
.icon-chip .icon-chip-badge.experimental{ background: rgba(255,255,255,0.35); }

/* ------------------------------------------------------------
   Directional scan line — muncul dari sisi tempat kursor masuk
   (dideteksi via JS saat mouseenter, lihat bloodflow.js).
   Class enter-top/bottom/left/right menentukan posisi & arah gerak.
   ------------------------------------------------------------ */
.icon-chip .icon-chip-scan{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.icon-chip.enter-top .icon-chip-scan{
  left: 0; right: 0; height: 2px; top: -5%;
  background: linear-gradient(90deg, transparent, #5B9EFF, transparent);
  animation: meaScanDown 0.9s ease-in-out infinite;
}
.icon-chip.enter-bottom .icon-chip-scan{
  left: 0; right: 0; height: 2px; bottom: -5%;
  background: linear-gradient(90deg, transparent, #5B9EFF, transparent);
  animation: meaScanUp 0.9s ease-in-out infinite;
}
.icon-chip.enter-left .icon-chip-scan{
  top: 0; bottom: 0; width: 2px; left: -5%;
  background: linear-gradient(180deg, transparent, #5B9EFF, transparent);
  animation: meaScanRight 0.9s ease-in-out infinite;
}
.icon-chip.enter-right .icon-chip-scan{
  top: 0; bottom: 0; width: 2px; right: -5%;
  background: linear-gradient(180deg, transparent, #5B9EFF, transparent);
  animation: meaScanLeft 0.9s ease-in-out infinite;
}
.icon-chip:hover .icon-chip-scan{ opacity: 1; }

@keyframes meaScanDown{ 0%{ top: -5%; } 100%{ top: 105%; } }
@keyframes meaScanUp{ 0%{ bottom: -5%; } 100%{ bottom: 105%; } }
@keyframes meaScanRight{ 0%{ left: -5%; } 100%{ left: 105%; } }
@keyframes meaScanLeft{ 0%{ right: -5%; } 100%{ right: 105%; } }

@media (prefers-reduced-motion: reduce){
  .icon-chip{ animation: none; }
  .icon-chip .icon-chip-scan{ animation: none !important; opacity: 0 !important; }
}

@media (max-width: 640px){
  .icon-chip{ width: 76px; height: 76px; }
  .icon-chip svg{ width: 30px; height: 30px; }
}