/* ==========================================================================
   Микроанимации голубых иконок в плашках (по образцу ton.org).

   - Запуск — при наведении на плашку (или на саму иконку); длительность ~1 с.
   - Анимация проигрывается один раз; чтобы повторить — увести курсор и навести снова
     (CSS-анимация снимается вместе с :hover и запускается заново).
   - У каждой иконки свой сценарий. Иконки встраиваются в страницу сборкой
     (scripts/build.py), поэтому можно двигать их отдельные детали:
     [data-icon="i-…"] g > :nth-child(N) — N-я фигура внутри символа из partials/icons.html.
   ========================================================================== */

.ico[data-icon] g, .ico[data-icon] g > * { transform-box: view-box; transform-origin: 12px 12px; }
.ico[data-icon] { overflow: visible; }

/* ---------- Кошелёк: застёжка выезжает и возвращается ---------- */
:is(.card, .panel__cell):hover [data-icon="i-wallet"] g > :nth-child(3),
[data-icon="i-wallet"]:hover g > :nth-child(3) { animation: ico-clasp 1s var(--ease) 1; }
@keyframes ico-clasp {
    0%, 100% { transform: none; }
    30% { transform: translateX(3px); }
    55% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

/* ---------- Щит с пульсом: кардиограмма прорисовывается заново ---------- */
:is(.card, .panel__cell):hover [data-icon="i-pulse"] g > :nth-child(2),
[data-icon="i-pulse"]:hover g > :nth-child(2) { stroke-dasharray: 16; animation: ico-draw16 1s ease-out 1; }
:is(.card, .panel__cell):hover [data-icon="i-pulse"] g > :nth-child(1),
[data-icon="i-pulse"]:hover g > :nth-child(1) { animation: ico-beat 1s var(--ease) 1; }
@keyframes ico-draw16 { 0% { stroke-dashoffset: 16; } 100% { stroke-dashoffset: 0; } }
@keyframes ico-beat { 0%, 100% { transform: none; } 20% { transform: scale(1.08); } 40% { transform: scale(.97); } 60% { transform: scale(1.04); } }

/* ---------- Радар: стрелка делает оборот ---------- */
:is(.card, .panel__cell):hover [data-icon="i-radar"] g > :nth-child(3),
[data-icon="i-radar"]:hover g > :nth-child(3) { animation: ico-spin 1s cubic-bezier(.45, 0, .2, 1) 1; }
:is(.card, .panel__cell):hover [data-icon="i-radar"] g > :nth-child(2),
[data-icon="i-radar"]:hover g > :nth-child(2) { animation: ico-ping 1s ease-out 1; }
@keyframes ico-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ico-ping { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .2; } 51% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Стрелка «отправить»: улетает вверх и возвращается снизу ---------- */
:is(.card, .panel__cell):hover [data-icon="i-send"] g,
[data-icon="i-send"]:hover g { animation: ico-launch 1s var(--ease) 1; }
@keyframes ico-launch {
    0% { transform: none; opacity: 1; }
    40% { transform: translateY(-9px); opacity: 0; }
    41% { transform: translateY(9px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

/* ---------- Лупа: осматривается по кругу ---------- */
:is(.card, .panel__cell):hover [data-icon="i-search"] g,
[data-icon="i-search"]:hover g { animation: ico-look 1s ease-in-out 1; }
@keyframes ico-look {
    0%, 100% { transform: none; }
    25% { transform: translate(-1.5px, -1.5px); }
    50% { transform: translate(1.5px, -1px); }
    75% { transform: translate(.5px, 1.5px); }
}

/* ---------- Ключ: поворачивается в замке ---------- */
:is(.card, .panel__cell):hover [data-icon="i-key"] g,
[data-icon="i-key"]:hover g { transform-origin: 8px 15px; animation: ico-turn 1s var(--ease) 1; }
@keyframes ico-turn { 0%, 100% { transform: none; } 30% { transform: rotate(-28deg); } 55% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }

/* ---------- Участники: второй подпрыгивает следом за первым ---------- */
:is(.card, .panel__cell):hover [data-icon="i-users"] g > :nth-child(1),
[data-icon="i-users"]:hover g > :nth-child(1) { animation: ico-hop 1s var(--ease) 1; }
:is(.card, .panel__cell):hover [data-icon="i-users"] g > :nth-child(3),
[data-icon="i-users"]:hover g > :nth-child(3) { animation: ico-hop 1s var(--ease) .15s 1 backwards; }
@keyframes ico-hop { 0%, 60%, 100% { transform: none; } 25% { transform: translateY(-2.5px); } 45% { transform: translateY(.5px); } }

/* ---------- Песочные часы: переворачиваются ---------- */
:is(.card, .panel__cell):hover [data-icon="i-hourglass"] g,
[data-icon="i-hourglass"]:hover g { animation: ico-flip 1s cubic-bezier(.6, -0.2, .3, 1.3) 1; }
@keyframes ico-flip { from { transform: rotate(0); } to { transform: rotate(180deg); } }

/* ---------- Документ: строки «печатаются» ---------- */
:is(.card, .panel__cell):hover [data-icon="i-doc"] g > :nth-child(2),
[data-icon="i-doc"]:hover g > :nth-child(2) { stroke-dasharray: 26; animation: ico-draw26 1s ease-out 1; }
@keyframes ico-draw26 { 0% { stroke-dashoffset: 26; } 100% { stroke-dashoffset: 0; } }

/* ---------- Предупреждение: встряхивается, знак мигает ---------- */
:is(.card, .panel__cell):hover [data-icon="i-alert"] g,
[data-icon="i-alert"]:hover g { transform-origin: 12px 20px; animation: ico-shake 1s ease-in-out 1; }
:is(.card, .panel__cell):hover [data-icon="i-alert"] g > :nth-child(2),
[data-icon="i-alert"]:hover g > :nth-child(2) { animation: ico-blink 1s steps(1) 1; }
@keyframes ico-shake { 0%, 100% { transform: none; } 10%, 50% { transform: rotate(-9deg); } 30%, 70% { transform: rotate(9deg); } 85% { transform: rotate(-3deg); } }
@keyframes ico-blink { 0%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } 50% { opacity: 1; } }

/* ---------- Снежинка: прокручивается на 60° с «заморозкой» ---------- */
:is(.card, .panel__cell):hover [data-icon="i-snow"] g,
[data-icon="i-snow"]:hover g { animation: ico-freeze 1s var(--ease) 1; }
@keyframes ico-freeze { 0% { transform: none; } 60% { transform: rotate(75deg) scale(.88); } 100% { transform: rotate(60deg); } }

/* ---------- PIN: точки вводятся по очереди ---------- */
:is(.card, .panel__cell):hover [data-icon="i-pin"] g > :nth-child(2),
[data-icon="i-pin"]:hover g > :nth-child(2) { animation: ico-dot .9s ease-out 1 backwards; }
:is(.card, .panel__cell):hover [data-icon="i-pin"] g > :nth-child(3),
[data-icon="i-pin"]:hover g > :nth-child(3) { animation: ico-dot .9s ease-out .12s 1 backwards; }
:is(.card, .panel__cell):hover [data-icon="i-pin"] g > :nth-child(4),
[data-icon="i-pin"]:hover g > :nth-child(4) { animation: ico-dot .9s ease-out .24s 1 backwards; }
:is(.card, .panel__cell):hover [data-icon="i-pin"] g > :is(:nth-child(2), :nth-child(3), :nth-child(4)),
[data-icon="i-pin"]:hover g > :is(:nth-child(2), :nth-child(3), :nth-child(4)) { transform-box: fill-box; transform-origin: center; }
@keyframes ico-dot { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.8); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Паспорт: лицо «сканируется», подпись дописывается ---------- */
:is(.card, .panel__cell):hover [data-icon="i-passport"] g > :nth-child(2),
[data-icon="i-passport"]:hover g > :nth-child(2) { transform-origin: 12px 10px; animation: ico-scan 1s var(--ease) 1; }
:is(.card, .panel__cell):hover [data-icon="i-passport"] g > :nth-child(3),
[data-icon="i-passport"]:hover g > :nth-child(3) { stroke-dasharray: 6; animation: ico-draw6 1s ease-out .2s 1 backwards; }
@keyframes ico-scan { 0%, 100% { transform: none; } 35% { transform: scale(1.25); } 65% { transform: scale(.9); } }
@keyframes ico-draw6 { 0% { stroke-dashoffset: 6; } 100% { stroke-dashoffset: 0; } }

/* ---------- Телефон: вибрирует, как при уведомлении ---------- */
:is(.card, .panel__cell):hover [data-icon="i-device"] g,
[data-icon="i-device"]:hover g { animation: ico-buzz 1s linear 1; }
@keyframes ico-buzz {
    0%, 60%, 100% { transform: none; }
    6%, 18%, 30%, 42% { transform: translateX(-1.4px) rotate(-4deg); }
    12%, 24%, 36%, 48% { transform: translateX(1.4px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ico[data-icon] *, .ico[data-icon] { animation: none !important; }
}