/* ============================================================
 *  parts.css — фоновые частицы-инструменты автосервиса:
 *               шестерёнки (с вращением), гаечные ключи,
 *               болты, гайки. Тонко гармонирует с тёмной темой
 *               сайта, не использует ярких цветов.
 *
 *  Не зависит от grass.css: содержит свой контейнер #site-particles
 *  и собственное keyframe-имя drift-part, чтобы при отдельном
 *  подключении эффект работал самостоятельно.
 * ============================================================ */

/* Базовый контейнер. Если уже определён в grass.css — повторное
   объявление не вредит (правила одинаковы). */
#site-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    will-change: transform, opacity;
    opacity: 0;
}

/* Контент должен быть поверх частиц. Дублируем для случая,
   когда grass.css не подключён. */
main,
.footer {
    position: relative;
    z-index: 2;
}

/* ============================================
 *  ЧАСТИЦЫ-ИНСТРУМЕНТЫ
 * ============================================ */
.particle.part {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.particle.part svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ШЕСТЕРЁНКА — вращается вокруг своего центра.
   Внешний div делает drift по экрану, внутренний .part-spin —
   вращение. Два уровня анимации позволяют комбинировать движение. */
.particle.part-gear .part-spin {
    width: 100%;
    height: 100%;
    animation: spin-cw var(--spin-dur, 6s) linear infinite;
    transform-origin: 50% 50%;
}
.particle.part-gear .part-spin.ccw {
    animation-name: spin-ccw;
}

@keyframes spin-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes spin-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* ============================================
 *  DRIFT — движение по диагонали снизу-вверх
 *  Имя отличается от grass-овского drift-leaf, чтобы не конфликтовать.
 * ============================================ */
@keyframes drift-part {
    0%   { transform: translate(var(--x0), var(--y0)) rotate(0deg); opacity: 0; }
    6%   { opacity: var(--maxOp, .7); }
    96%  { opacity: var(--maxOp, .7); }
    100% { transform: translate(var(--x1), var(--y1)) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* prefers-reduced-motion: всё замирает */
@media (prefers-reduced-motion: reduce) {
    .particle.part { animation: none; display: none; }
    .particle.part-gear .part-spin { animation: none; }
}