/* Анимированные иконки сайта GALSA (варианты согласованы 26.09.2026).
   .ic.an — плитка в 1,5 раза крупнее прежней; .ic.an.chip — значок канала в схеме «Единое окно».
   Анимация идёт, пока у иконки есть класс .play: site.js ставит его, пока курсор на плашке
   с иконкой (или плашка в фокусе с клавиатуры). В покое иконка стоит в исходном виде. */

.ic.an, .card .ic.an { display: grid; place-items: center; width: 63px; height: 63px; border-radius: 18px; font-size: 28px; position: relative; flex: none; perspective: 320px; isolation: isolate; }
.ic.an .g { display: inline-block; line-height: 1; will-change: transform; }
.ic.an.chip { width: 36px; height: 36px; border-radius: 10px; font-size: 22px; margin: 0; background: transparent; border: 0; }
.ic.an::before, .ic.an::after { pointer-events: none; }

/* ₽ Платежи — монета */
.rub-coin.play .g { animation: coin 4.2s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes coin { 0%, 55% { transform: rotateY(0); } 80% { transform: rotateY(200deg); } 92%, 100% { transform: rotateY(360deg); } }

/* ⇄ 1С, ЭДО, API — обмен данными */
.g.swap { display: grid; font-size: 20px; line-height: .8; font-weight: 700; }
.g.swap i { font-style: normal; display: block; }
.sync-swap.play .g.swap i:first-child { animation: swapR 2.8s ease-in-out infinite; }
.sync-swap.play .g.swap i:last-child { animation: swapL 2.8s ease-in-out infinite; }
@keyframes swapR { 0%, 20% { transform: none; } 45% { transform: translateX(7px); } 70%, 100% { transform: none; } }
@keyframes swapL { 0%, 20% { transform: none; } 45% { transform: translateX(-7px); } 70%, 100% { transform: none; } }

/* ✨ ИИ распознаёт — сканер */
.ai-scan { overflow: hidden; }
.ai-scan::after { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 2px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px 2px rgba(197, 248, 42, .8); opacity: 0; }
.ai-scan.play::after { animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 0% { top: 4px; opacity: 0; } 10% { opacity: 1; } 55% { top: calc(100% - 6px); opacity: 1; } 65%, 100% { top: calc(100% - 6px); opacity: 0; } }

/* ✓ Инженер проверяет — рисуется галочка */
.ok-draw svg path { stroke-dasharray: 26; stroke-dashoffset: 0; }
.ok-draw.play svg path { stroke-dashoffset: 26; }
.ok-draw.play svg path { animation: draw 3s ease-in-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 26; opacity: 1; } 35%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ⚓ Суда — качка */
.anchor-sway .g { transform-origin: 50% 10%; }
.anchor-sway.play .g { animation: sway 3.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }

/* 🐟 Путина — всплеск с пузырьками */
.fish-jump.play .g { animation: jump 3.4s cubic-bezier(.3, 0, .3, 1) infinite; }
.fish-jump::before, .fish-jump::after { content: ""; position: absolute; bottom: 8px; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid rgba(197, 248, 42, .8); opacity: 0; }
.fish-jump::before { left: 14px; }
.fish-jump::after { right: 15px; width: 4px; height: 4px; }
.fish-jump.play::before { animation: bubble 3.4s ease-out infinite; }
.fish-jump.play::after { animation: bubble 3.4s ease-out .25s infinite; }
@keyframes jump { 0%, 45%, 100% { transform: none; } 60% { transform: translateY(-13px) rotate(-22deg); } 75% { transform: translateY(0) rotate(12deg); } 85% { transform: rotate(0); } }
@keyframes bubble { 0%, 55% { opacity: 0; transform: translateY(0); } 65% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }

/* 🛡 Хранение в РФ — блик */
.shield-shine { overflow: hidden; }
.shield-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }
.shield-shine.play::after { animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 45% { left: -60%; } 80%, 100% { left: 130%; } }

/* 🇷🇺 Хранение в России — флаг развевается */
.flag-wave .g { transform-origin: 0 50%; }
.flag-wave.play .g { animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 25% { transform: skewY(-5deg) scaleX(.95); } 75% { transform: skewY(4deg) scaleX(.98); } }

/* 🔐 Доступ по ролям — проверка доступа */
.lock-check.play .g { animation: jitter 3.4s ease-in-out infinite; }
.lock-check.play { animation: granted 3.4s ease-in-out infinite; }
@keyframes jitter { 0%, 10%, 40%, 100% { transform: none; } 15% { transform: translateX(-3px); } 20% { transform: translateX(3px); } 25% { transform: translateX(-2px); } 30% { transform: translateX(2px); } 50% { transform: scale(1.15); } 60% { transform: none; } }
@keyframes granted { 0%, 40%, 85%, 100% { box-shadow: 0 0 0 rgba(197, 248, 42, 0); border-color: rgba(197, 248, 42, .18); } 55% { box-shadow: 0 0 28px rgba(197, 248, 42, .6); border-color: var(--lime); } }

/* 🖥 Своя установка — включение */
.pc-power.play .g { animation: power 3.6s ease-in-out infinite; }
.pc-power.play { animation: tileflash 3.6s ease-in-out infinite; }
@keyframes power { 0%, 20% { filter: brightness(.35) saturate(.4); } 28% { filter: brightness(1.5); } 32% { filter: brightness(.6); } 38%, 85% { filter: brightness(1.15) drop-shadow(0 0 8px rgba(197, 248, 42, .7)); } 100% { filter: brightness(.35) saturate(.4); } }
@keyframes tileflash { 0%, 30%, 85%, 100% { box-shadow: 0 0 0 rgba(197, 248, 42, 0); } 45% { box-shadow: 0 0 26px rgba(197, 248, 42, .5); } }

/* 📁 Сетевая папка — скан падает в папку */
.folder-drop { overflow: hidden; }
.folder-drop::before { content: "📄"; position: absolute; top: -30%; left: 50%; font-size: .55em; transform: translateX(-50%); z-index: -1; opacity: 0; }
.folder-drop.play::before { animation: fall 3s ease-in infinite; }
.folder-drop.play .g { animation: catch 3s ease-in-out infinite; }
@keyframes fall { 0%, 10% { top: -30%; opacity: 0; } 20% { opacity: 1; } 50% { top: 34%; opacity: 1; } 58%, 100% { top: 42%; opacity: 0; } }
@keyframes catch { 0%, 50%, 70%, 100% { transform: none; } 58% { transform: scaleY(.88) translateY(2px); } }

/* ✉️ Почта — письмо прилетело */
.mail-fly { overflow: hidden; }
.mail-fly.play .g { animation: fly 3.8s cubic-bezier(.3, .8, .3, 1) infinite; }
@keyframes fly { 0% { transform: translateX(-34px) rotate(-10deg); opacity: 0; } 25% { transform: translateX(3px) rotate(3deg); opacity: 1; } 32%, 75% { transform: none; opacity: 1; } 95%, 100% { transform: translateX(34px); opacity: 0; } }

/* ✈️ Telegram — парение */
.tg-glide.play .g { animation: glide 3s ease-in-out infinite; }
@keyframes glide { 0%, 100% { transform: translateY(3px) rotate(4deg); } 50% { transform: translateY(-5px) rotate(-6deg); } }

/* 💬 MAX — печатает… */
.max-typing::after { content: "•••"; position: absolute; right: -2px; bottom: 4px; font-size: 13px; letter-spacing: 1px; color: var(--lime); width: 0; overflow: hidden; white-space: nowrap; }
.max-typing.play::after { animation: typing 2.4s steps(4) infinite; }
.chip.max-typing::after { right: -10px; bottom: auto; top: -7px; font-size: 11px; }
@keyframes typing { 0% { width: 0; } 70%, 100% { width: 20px; } }

/* 📲 Мобильное приложение — телефон вибрирует от новой заявки */
.phone-buzz.play .g { animation: buzz 2.6s ease-in-out infinite; }
.phone-buzz.play { animation: tileflash 2.6s ease-in-out infinite; }
@keyframes buzz { 0%, 55%, 100% { transform: none; } 60% { transform: translateX(-3px) rotate(-6deg); } 64% { transform: translateX(3px) rotate(6deg); }
  68% { transform: translateX(-3px) rotate(-5deg); } 72% { transform: translateX(3px) rotate(5deg); } 76% { transform: none; } }

/* ⏰ Сроки и напоминания — будильник звенит */
.alarm-ring .g { transform-origin: 50% 20%; }
.alarm-ring.play .g { animation: ring 3s ease-in-out infinite; }
@keyframes ring { 0%, 50%, 100% { transform: none; } 54% { transform: rotate(-16deg); } 58% { transform: rotate(14deg); } 62% { transform: rotate(-12deg); }
  66% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } 74% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ic.an, .ic.an .g, .ic.an::before, .ic.an::after, .ic.an svg path { animation: none !important; }
  .ok-draw svg path { stroke-dashoffset: 0; }
}