/* ==========================================================================
   Tullaby Universal 3D Icon & Emoji System
   Ultra-modern, refined, executive 3D assets with realistic lighting,
   proportional sizing, and subtle, non-distracting micro-interactions.
   ========================================================================== */

/* 1. Real 3D Graphic Icons */
.icon-3d {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  transform-style: preserve-3d;
  will-change: transform, filter;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Subtle, Elegant Hover (Gentle Lift, No Giant Balloons) */
.sidebar-link:hover .icon-3d,
.btn:hover .icon-3d,
.btn-shortcut:hover .icon-3d,
.tab-btn:hover .icon-3d,
.stat-card:hover .icon-3d,
.btn-student-portal:hover .icon-3d,
.btn-submit-login:hover .icon-3d,
button:hover .icon-3d,
a:hover .icon-3d,
.icon-3d:hover {
  transform: translateY(-1px) scale(1.08) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 6px rgba(99, 102, 241, 0.3)) !important;
}

/* Proportional Sizing Utilities */
.icon-3d-xs { width: 14px; height: 14px; }
.icon-3d-sm { width: 16px; height: 16px; }
.icon-3d-md { width: 18px; height: 18px; }
.icon-3d-lg { width: 22px; height: 22px; }
.icon-3d-xl { width: 28px; height: 28px; }
.icon-3d-hero { width: 44px; height: 44px; }

/* 2. Standard Unicode Emojis (Subtle Hover) */
.emoji-3d {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: -0.12em !important;
  transform-style: preserve-3d;
  will-change: transform, filter;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  cursor: default;
  user-select: none;
}

button:hover .emoji-3d,
a:hover .emoji-3d,
.sidebar-link:hover .emoji-3d,
.stat-card:hover .emoji-3d,
.tab-btn:hover .emoji-3d,
.quick-actions-bar button:hover .emoji-3d,
.emoji-3d:hover {
  transform: translateY(-1px) scale(1.08) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

/* 3. Hero 3D Badge */
.hero-3d-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5),
              inset 0 1px 2px rgba(255, 255, 255, 0.25),
              0 0 16px rgba(99, 102, 241, 0.2);
  backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.hero-3d-box:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.6),
              inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 0 22px rgba(99, 102, 241, 0.35);
}

.hero-3d-box .icon-3d {
  width: 32px;
  height: 32px;
}

/* Sidebar 3D Link Customizer */
.sidebar-link .icon-3d {
  width: 17px;
  height: 17px;
  margin-left: 6px;
}

.sidebar-link.active .icon-3d {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.45));
}