/* =========  HOMEWORK 39 · анимированные иконки и 5 стилей кнопок  =========
   Иконки (.ai) оживают при наведении на кнопку/ссылку/карточку.
   Стиль кнопок задаётся классом anim-1 … anim-5 на <body> (или любом предке).
   Все движения в одном темпе (1.3 с, мягкий ease) и в одних цветах: синий + оранжевый. */

:where(.ai) {
  width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.ai * { transform-box: fill-box; transform-origin: center; }
.ai .ai-paint { fill: var(--a, #FF8A00); stroke: none; opacity: 0; transform-origin: top; }
.ai .ai-spark, .ai .ai-dust { stroke: var(--a, #FF8A00); opacity: 0; }
.ai .ai-leaf { fill: var(--a, #FF8A00); stroke: none; opacity: 0; }
.ai .ai-sway, .ai .ai-nod { transform-origin: bottom; }
.ai .ai-screen { stroke-dasharray: 8; }
.ai .ai-plus { transition: transform .35s ease; }

/* ---- запуск анимаций при наведении ---- */
:root { --ai-t: 1.3s; --ai-ease: cubic-bezier(.45, 0, .25, 1); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-roll   { animation: ai-roll var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-paint  { animation: ai-paint var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-bolt   { animation: ai-bolt var(--ai-t) linear var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-spark  { animation: ai-spark var(--ai-t) ease-out var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-drive  { animation: ai-drive var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-dust   { animation: ai-dust var(--ai-t) ease-out var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-sway   { animation: ai-sway var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-leaf   { animation: ai-leaf var(--ai-t) ease-in var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-screen { animation: ai-screen var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-keys > * { animation: ai-key var(--ai-t) ease var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-rows > * { animation: ai-row var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-tiles > * { animation: ai-tile var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-star   { animation: ai-star var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-nod    { animation: ai-nod var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-ring   { animation: ai-ring var(--ai-t) ease var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-fly    { animation: ai-fly var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-copy   { animation: ai-copy var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-plus   { transform: rotate(90deg); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-lens   { animation: ai-lens var(--ai-t) var(--ai-ease) var(--ai-iter, infinite); }
:is(a, button, .cat, .case, .drop):hover .ai .ai-flash  { animation: ai-flash var(--ai-t) ease var(--ai-iter, infinite); }

.ai-keys > :nth-child(2), .ai-rows > :nth-child(2), .ai-tiles > :nth-child(2) { animation-delay: .15s !important; }
.ai-keys > :nth-child(3), .ai-rows > :nth-child(3), .ai-tiles > :nth-child(3) { animation-delay: .3s !important; }
.ai-keys > :nth-child(4), .ai-tiles > :nth-child(4) { animation-delay: .45s !important; }

/* галочка на странице «заявка принята» рисуется сама */
.done__mark { width: 76px; height: 76px; margin: 0 auto 20px; color: var(--b, #0E3A8C); stroke-width: 1.6; }
.done__mark .ai-tick { stroke: var(--a, #FF8A00); stroke-width: 2.2; stroke-dasharray: 16; animation: ai-draw .7s .2s ease-out both; }

@keyframes ai-roll   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes ai-paint  { 0%, 100% { opacity: .5; transform: scaleY(.45); } 50% { opacity: .5; transform: scaleY(1); } }
@keyframes ai-bolt   { 0%, 100% { fill: transparent; } 10% { fill: var(--a, #FF8A00); } 20% { fill: transparent; } 32% { fill: var(--a, #FF8A00); } 60% { fill: transparent; } }
@keyframes ai-spark  { 0%, 100% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.1); } 40% { opacity: 0; transform: scale(1.3); } }
@keyframes ai-drive  { 0% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(16px); opacity: 0; } 41% { transform: translateX(-16px); opacity: 0; } 75%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes ai-dust   { 0%, 100% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 40% { opacity: 0; transform: translateX(-4px); } }
@keyframes ai-sway   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes ai-leaf   { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-5px, 12px) rotate(120deg); } }
@keyframes ai-screen { 0% { stroke-dashoffset: 8; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes ai-key    { 0%, 100% { fill: transparent; } 20% { fill: var(--a, #FF8A00); } 40% { fill: transparent; } }
@keyframes ai-row    { 0%, 100% { transform: translateX(0); opacity: 1; } 30% { transform: translateX(-3px); opacity: .25; } }
@keyframes ai-tile   { 0%, 100% { transform: scale(1); } 25% { transform: scale(.6); } }
@keyframes ai-star   { 0%, 100% { transform: rotate(0) scale(1); fill: transparent; } 50% { transform: rotate(72deg) scale(1.15); fill: var(--a, #FF8A00); } }
@keyframes ai-nod    { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg) translateY(-1px); } 60% { transform: rotate(6deg); } }
@keyframes ai-ring   { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
@keyframes ai-fly    { 0% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(6px, -6px); opacity: 0; } 41% { transform: translate(-6px, 6px); opacity: 0; } 80%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes ai-copy   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } }
@keyframes ai-lens   { 0%, 100% { transform: scale(1); fill: transparent; } 30% { transform: scale(.7); fill: var(--a, #FF8A00); } 50% { transform: scale(1.08); fill: transparent; } }
@keyframes ai-flash  { 0%, 100% { stroke: currentColor; stroke-width: 2; } 30% { stroke: var(--a, #FF8A00); stroke-width: 4; } }
@keyframes ai-draw   { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }

/* =========  5 стилей поведения кнопок  ========= */
.btn, .nav a, .tab, .catmenu a, .top__phone, .cat { transition: background-color .25s, background-size .4s var(--ai-ease), color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ai-ease); }
.nav a, .catmenu a, .tab { display: inline-flex; align-items: center; gap: 8px; }

/* 1 · Живые иконки — двигается только иконка, кнопка мягко меняет цвет */
.anim-1 { --ai-iter: infinite; }

/* 2 · Заливка — цвет «наливается» слева направо, иконка оживает */
.anim-2 .btn { background-image: linear-gradient(var(--fill, var(--a2)), var(--fill, var(--a2))); background-size: 0 100%; background-repeat: no-repeat; }
.anim-2 .btn:hover { background-color: var(--a); background-size: 100% 100%; }
.anim-2 .btn--ghost { --fill: var(--b); }
.anim-2 .btn--ghost:hover { background-color: transparent; }
.anim-2 .btn--light { --fill: rgba(255,255,255,.16); }
.anim-2 .btn--light:hover { background-color: transparent; }
.anim-2 .nav a:not(.nav__cta) { border-bottom: 0 !important; background: linear-gradient(var(--a), var(--a)) left bottom / 0 2px no-repeat; }
.anim-2 .nav a:not(.nav__cta):hover, .anim-2 .nav a.on:not(.nav__cta) { background-size: 100% 2px; }
.anim-2 .cat { background-image: linear-gradient(var(--a), var(--a)); background-size: 0 4px; background-position: left bottom; background-repeat: no-repeat; }
.anim-2 .cat:hover { background-size: 100% 4px; }

/* 3 · Подъём — кнопка приподнимается с тенью, иконка проигрывает анимацию один раз */
.anim-3 { --ai-iter: 1; }
.anim-3 .btn:hover, .anim-3 .tab:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(10,44,107,.22); }
.anim-3 .nav a:hover { transform: translateY(-2px); }
.anim-3 .cat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10,44,107,.16); }

/* 4 · Выезд иконки — в кнопках иконка спрятана и выезжает при наведении */
.anim-4 .btn, .anim-4 .nav a, .anim-4 .top__phone { gap: 0; }
.anim-4 :is(.btn, .nav a, .top__phone) > .ai { width: 0; opacity: 0; margin-right: 0; transform: translateX(-8px); transition: width .3s var(--ai-ease), opacity .3s, margin .3s, transform .3s var(--ai-ease); }
.anim-4 :is(.btn, .nav a, .top__phone):hover > .ai,
.anim-4 :is(.btn, .nav a, .top__phone).ai-measure > .ai { width: 1.2em; opacity: 1; margin-right: 10px; transform: none; }
/* замер должен перебивать правило «спрятано» (у него :is(.nav a) даёт высокий приоритет) — поэтому та же форма селектора */
.anim-4 :is(.btn, .nav a, .top__phone).ai-measure > .ai { transition: none !important; }
/* ширину «с иконкой» app.js закрепляет заранее (min-width), поэтому при наведении ничего не сдвигается и не переносится */

/* 5 · Пульс — иконка в кружке, при наведении от неё расходится кольцо */
.anim-5 :is(.btn, .nav a, .top__phone, .tab) > .ai { box-sizing: content-box; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.18); }
.anim-5 :is(.btn--ghost, .tab) > .ai { background: var(--b-soft, #E3EBF8); }
.anim-5 :is(.btn, .nav a, .top__phone, .tab):hover > .ai { animation: ai-pulse 1.3s ease-out infinite; }
.anim-5 .cat__ico { box-sizing: content-box; padding: 10px; border-radius: 50%; background: var(--b-soft, #E3EBF8); }
.anim-5 .cat:hover .cat__ico { animation: ai-pulse 1.3s ease-out infinite; }
@keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,138,0,.55); } 100% { box-shadow: 0 0 0 10px rgba(255,138,0,0); } }

@media (prefers-reduced-motion: reduce) {
  .ai *, .ai, .btn, .cat { animation: none !important; transition: none !important; }
}