/* ══════════════════════════════════════════════════════════
   پدیده آپرانیک — جلوه‌های تعاملی
   آیکون‌های شناور سه‌بعدی + بک‌گراند زندهٔ «گرد و غبار معدنی» در هیرو
   (الهام‌گرفته از محصول پودر صنعتی/دانه‌بندی شیشهٔ خود برند)
   ══════════════════════════════════════════════════════════ */

/* ---------- بوم بک‌گراند زنده در هیرو ---------- */
.hero__canvas{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__content{ position: relative; z-index: 2; }
.hero__image-wrap{ z-index: 2; }

/* ---------- کانتینر آیکون سه‌بعدی ---------- */
.icon3d{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 700px;
  transform: rotateX(0) rotateY(0) translateZ(0);
  transition: transform .15s ease-out;
  --icon-shadow-scale: 1;
  --icon-shadow-opacity: 0.45;
}
.icon3d::after{
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: -6px;
  height: 8px; margin: 0 auto;
  width: 60%;
  background: radial-gradient(ellipse at center, rgba(28,34,38,0.32), transparent 72%);
  filter: blur(2px);
  transform: scale(var(--icon-shadow-scale));
  opacity: var(--icon-shadow-opacity);
  transition: transform .2s ease-out, opacity .2s ease-out;
  pointer-events: none;
  z-index: -1;
}
.icon3d__float{
  animation: icon-bob 4.4s ease-in-out infinite;
  transition: filter .15s ease-out;
  will-change: transform;
}
.icon3d.is-tilting .icon3d__float{ animation-play-state: paused; }

@keyframes icon-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce){
  .icon3d, .icon3d::after{ transition: none !important; }
  .icon3d__float{ animation: none !important; }
}