/* ============================================================
   HOMEPAGE · PREMIUM 3D FEATURE ICONS
   96×96 sliced WebP icons inside .bento-item.holo-card
   Hides legacy .card-icon-viewport canvas to avoid duplicate visual
   ============================================================ */

/* Hide legacy 3D canvas placeholder — prevent duplicate visual */
.bento-item .card-icon-viewport {
  display: none !important;
}

.feature-icon-3d {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 0 1.25rem;
  object-fit: contain;
  /* mix-blend-mode: screen makes glow pop on dark surfaces */
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 4px 14px rgba(232, 160, 32, 0.35))
    drop-shadow(0 2px 6px rgba(34, 211, 238, 0.18));
  transition:
    transform 400ms cubic-bezier(.2,.8,.2,1),
    filter 400ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, filter;
  /* Prevent first-paint flash before image decodes */
  background: transparent;
  pointer-events: none;
}

.bento-item.holo-card:hover .feature-icon-3d,
.bento-item.holo-card:focus-within .feature-icon-3d {
  transform: scale(1.06) translateZ(0);
  filter:
    drop-shadow(0 8px 22px rgba(232, 160, 32, 0.55))
    drop-shadow(0 4px 10px rgba(34, 211, 238, 0.35))
    brightness(1.08);
}

/* Featured card: bigger icon */
.bento-item.featured .feature-icon-3d {
  width: 128px;
  height: 128px;
}

/* RTL: icons remain centered/start aligned. RTL-safe via logical props above. */
[dir="rtl"] .feature-icon-3d {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Mobile sizing */
@media (max-width: 640px) {
  .feature-icon-3d { width: 72px; height: 72px; }
  .bento-item.featured .feature-icon-3d { width: 96px; height: 96px; }
}

/* Reduced-motion: kill hover transform */
@media (prefers-reduced-motion: reduce) {
  .feature-icon-3d {
    transition: none;
  }
  .bento-item.holo-card:hover .feature-icon-3d {
    transform: none;
  }
}