/* استایل‌های آیکون‌های سه‌بعدی - سبک مدرن و مینیمال */

:root {
    --icon-primary-color: #4a90e2;
    --icon-secondary-color: #357abd;
    --icon-shadow-color: rgba(0, 0, 0, 0.15);
    --icon-highlight: rgba(255, 255, 255, 0.3);
    --icon-size: 64px;
}

.icon-3d {
    display: inline-block;
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    perspective: 1000px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.icon-3d:hover {
    transform: translateY(-8px) rotateX(8deg) rotateY(-5deg) scale(1.05);
}

.icon-3d:active {
    transform: translateY(-3px) rotateX(5deg) scale(0.98);
    transition: transform 0.1s ease;
}

.icon-3d svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px var(--icon-shadow-color));
    transition: filter 0.4s ease, transform 0.4s ease;
    transform-style: preserve-3d;
}

.icon-3d:hover svg {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
}

/* آیکون نایلکس - استایل‌های سفارشی */
.icon-3d.nail-icon svg {
    transform-origin: center center;
}

.icon-3d.nail-icon:hover svg {
    transform: rotateZ(-5deg);
}

/* اندازه‌های مختلف */
.icon-3d.size-small {
    --icon-size: 32px;
}

.icon-3d.size-medium {
    --icon-size: 64px;
}

.icon-3d.size-large {
    --icon-size: 96px;
}

.icon-3d.size-xlarge {
    --icon-size: 128px;
}

/* رنگ‌های مختلف */
.icon-3d.color-blue {
    --icon-primary-color: #4a90e2;
    --icon-secondary-color: #357abd;
}

.icon-3d.color-green {
    --icon-primary-color: #28a745;
    --icon-secondary-color: #1e7e34;
}

.icon-3d.color-red {
    --icon-primary-color: #dc3545;
    --icon-secondary-color: #c82333;
}

.icon-3d.color-orange {
    --icon-primary-color: #fd7e14;
    --icon-secondary-color: #e85d00;
}

.icon-3d.color-purple {
    --icon-primary-color: #6f42c1;
    --icon-secondary-color: #5a32a3;
}

/* انیمیشن چرخش */
@keyframes icon-rotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.icon-3d.animated {
    animation: icon-rotate 3s linear infinite;
}

.icon-3d.animated:hover {
    animation-play-state: paused;
}

/* افکت سه‌بعدی با transform */
.icon-3d-container {
    display: inline-block;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.icon-3d-container:hover {
    transform: rotateY(15deg) rotateX(5deg);
}