/*=============================================>>>>>
= Анимированные SVG иконки =
===============================================>>>>>*/

.icon-wrapper {
    display: inline-block;
    position: relative;
}

.animated-icon {
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
}

/* Иконка дизайна */
.icon-design {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-design .pencil {
    transform-origin: 50% 50%;
    animation: draw 3s ease-in-out infinite;
}

.icon-design .brush {
    transform-origin: 50% 50%;
    animation: paint 2s ease-in-out infinite 0.5s;
}

/* Иконка кода */
.icon-code {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-code .bracket {
    animation: blink 2s infinite;
}

.icon-code .line1 { animation: type 3s infinite 0.1s; }
.icon-code .line2 { animation: type 3s infinite 0.3s; }
.icon-code .line3 { animation: type 3s infinite 0.5s; }

/* Иконка камеры */
.icon-camera {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-camera .lens {
    animation: focus 4s ease-in-out infinite;
}

.icon-camera .flash {
    animation: flash 4s infinite;
}

/* Анимации */
@keyframes draw {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

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

@keyframes blink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.3; }
}

@keyframes type {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes focus {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes flash {
    0%, 85%, 100% { opacity: 0; }
    90% { opacity: 1; }
}