/* Модуль «Детские кружки» (modules.kids_fx): карта с педагогами на первом экране и приветственный ролик. */

/* ---------- сцена: рисованная карта справа ---------- */
.kfx-scene{position:absolute;right:2%;top:50%;transform:translateY(-54%);width:min(44%,720px);aspect-ratio:800/560;z-index:1}
.kfx-map{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 18px 30px color-mix(in srgb,var(--ink) 14%,transparent))}
.kfx-pin{animation:kfx-pin 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .35s)}
.kfx-route{animation:kfx-route 2.4s linear infinite}
@keyframes kfx-pin{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes kfx-route{to{stroke-dashoffset:-28}}

/* ---------- педагог: ссылка с рисунком и подписью ---------- */
.kfx-p{position:absolute;display:block;width:15%;aspect-ratio:160/200;color:inherit;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}
.kfx-p:focus-visible .kfx-fig{outline:3px solid var(--g);outline-offset:4px;border-radius:12px}
.kfx-fig{width:100%;height:100%;overflow:visible;display:block}
.kfx-shadow{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.kfx-body{transform-origin:60px 190px;animation:kfx-bob 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.kfx-eyes{transform-origin:60px 60px;animation:kfx-blink 4.6s infinite;animation-delay:var(--d,0s)}
.kfx-ar{transform-origin:85px 96px;animation:kfx-wave 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.kfx-al{transform-origin:35px 96px}
.kfx-say{position:absolute;left:50%;bottom:96%;width:max-content;max-width:190px;transform:translate(-50%,8px) scale(.92);opacity:0;pointer-events:none;
  padding:8px 12px;border-radius:14px;background:#fff;color:#2b2340;font:700 13px/1.25 var(--font-b);box-shadow:0 8px 22px #0002;transition:.22s;z-index:5;text-align:center}
.kfx-say::after{content:"";position:absolute;left:50%;top:100%;border:7px solid transparent;border-top-color:#fff;transform:translateX(-50%)}
.kfx-say small{display:block;margin-top:3px;font:600 11px var(--font-b);color:var(--g)}
.kfx-p:hover,.kfx-p:focus-visible,.kfx-p.on{z-index:6}
.kfx-p:hover .kfx-say,.kfx-p:focus-visible .kfx-say,.kfx-p.on .kfx-say{opacity:1;transform:translate(-50%,0) scale(1)}
.kfx-p:hover .kfx-body,.kfx-p:focus-visible .kfx-body,.kfx-p.on .kfx-body{animation:kfx-hop .5s ease-out}

@keyframes kfx-bob{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes kfx-blink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes kfx-wave{0%,58%,92%,100%{transform:rotate(0)}64%{transform:rotate(-150deg)}68%{transform:rotate(-128deg)}72%{transform:rotate(-156deg)}76%{transform:rotate(-128deg)}80%{transform:rotate(-150deg)}86%{transform:rotate(-30deg)}}
@keyframes kfx-hop{0%{translate:0 0}40%{translate:0 -10px}100%{translate:0 0}}

/* наведение: каждый делает своё */
:is(.kfx-p:hover,.kfx-p:focus-visible,.kfx-p.on) .kfx-ar{animation:kfx-wave-fast .9s ease-in-out infinite}
@keyframes kfx-wave-fast{0%,100%{transform:rotate(-150deg)}50%{transform:rotate(-120deg)}}

/* тренер: пинает мяч */
.kfx-ball{transform-box:fill-box;transform-origin:center}
.kfx-coach .kfx-leg-r{transform-origin:68px 140px}
:is(.kfx-coach:hover,.kfx-coach:focus-visible,.kfx-coach.on) .kfx-ball{animation:kfx-kick 1.1s ease-in-out infinite}
:is(.kfx-coach:hover,.kfx-coach:focus-visible,.kfx-coach.on) .kfx-leg-r{animation:kfx-leg 1.1s ease-in-out infinite}
@keyframes kfx-kick{0%,100%{translate:0 0;rotate:0deg}40%{translate:26px -64px;rotate:280deg}70%{translate:36px -6px;rotate:500deg}85%{translate:14px 0;rotate:620deg}}
@keyframes kfx-leg{0%,100%{transform:rotate(0)}18%{transform:rotate(-34deg)}30%{transform:rotate(8deg)}}

/* хореограф: кружится, руки вверх */
.kfx-dancer .kfx-body{transform-origin:60px 120px}
.kfx-stars{opacity:0;transform-box:fill-box;transform-origin:center}
:is(.kfx-dancer:hover,.kfx-dancer:focus-visible,.kfx-dancer.on) .kfx-body{animation:kfx-spin 1.3s ease-in-out infinite}
:is(.kfx-dancer:hover,.kfx-dancer:focus-visible,.kfx-dancer.on) .kfx-al{transform:rotate(150deg)}
:is(.kfx-dancer:hover,.kfx-dancer:focus-visible,.kfx-dancer.on) .kfx-ar{animation:none;transform:rotate(-150deg)}
:is(.kfx-dancer:hover,.kfx-dancer:focus-visible,.kfx-dancer.on) .kfx-stars{animation:kfx-twinkle 1.3s ease-in-out infinite}
@keyframes kfx-spin{0%,100%{transform:scaleX(1) translateY(0)}25%{transform:scaleX(-1) translateY(-8px)}50%{transform:scaleX(1) translateY(0)}75%{transform:scaleX(-1) translateY(-8px)}}
@keyframes kfx-twinkle{0%,100%{opacity:0;scale:.6}50%{opacity:1;scale:1.15}}

/* художница: кисть и мазки на мольберте */
.kfx-paint{stroke-dasharray:90;stroke-dashoffset:0}
:is(.kfx-artist:hover,.kfx-artist:focus-visible,.kfx-artist.on) .kfx-ar{animation:kfx-brush .5s ease-in-out infinite}
:is(.kfx-artist:hover,.kfx-artist:focus-visible,.kfx-artist.on) .kfx-paint{animation:kfx-draw 1.6s ease-out infinite}
:is(.kfx-artist:hover,.kfx-artist:focus-visible,.kfx-artist.on) .kfx-paint2{animation-delay:.3s}
:is(.kfx-artist:hover,.kfx-artist:focus-visible,.kfx-artist.on) .kfx-paint3{animation:kfx-twinkle 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes kfx-brush{0%,100%{transform:rotate(-58deg)}50%{transform:rotate(-34deg)}}
@keyframes kfx-draw{0%{stroke-dashoffset:90}60%,100%{stroke-dashoffset:0}}

/* музыкант: играет, ноты улетают */
.kfx-notes{opacity:0}
:is(.kfx-musician:hover,.kfx-musician:focus-visible,.kfx-musician.on) .kfx-ar{animation:kfx-strum .28s ease-in-out infinite}
:is(.kfx-musician,.kfx-singer):is(:hover,:focus-visible,.on) .kfx-notes{animation:kfx-notes 1.4s ease-out infinite}
@keyframes kfx-strum{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}}
@keyframes kfx-notes{0%{opacity:0;translate:0 10px}30%{opacity:1}100%{opacity:0;translate:8px -26px}}

/* робототехник: робот подпрыгивает, мигает и машет */
.kfx-bot{transform-box:fill-box;transform-origin:bottom center}
.kfx-botarm{transform-origin:141px 168px}
:is(.kfx-robo:hover,.kfx-robo:focus-visible,.kfx-robo.on) .kfx-ar{animation:none;transform:rotate(-78deg)}
:is(.kfx-robo:hover,.kfx-robo:focus-visible,.kfx-robo.on) .kfx-bot{animation:kfx-botjump .6s ease-in-out infinite}
:is(.kfx-robo:hover,.kfx-robo:focus-visible,.kfx-robo.on) .kfx-botarm{animation:kfx-botwave .3s ease-in-out infinite}
:is(.kfx-robo:hover,.kfx-robo:focus-visible,.kfx-robo.on) .kfx-led{animation:kfx-led .3s steps(2) infinite}
:is(.kfx-robo:hover,.kfx-robo:focus-visible,.kfx-robo.on) .kfx-boteye{fill:#69db7c}
@keyframes kfx-botjump{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes kfx-botwave{0%,100%{transform:rotate(0)}50%{transform:rotate(-40deg)}}
@keyframes kfx-led{0%{fill:#ff6b6b}100%{fill:#ffd43b}}

/* шахматист: подбрасывает фигуру */
.kfx-piece{transform-box:fill-box;transform-origin:center}
:is(.kfx-chess:hover,.kfx-chess:focus-visible,.kfx-chess.on) .kfx-piece{animation:kfx-toss 1.1s ease-in-out infinite}
@keyframes kfx-toss{0%,100%{translate:0 0;rotate:0deg}45%{translate:0 -46px;rotate:360deg}}

/* педагог по вокалу: поёт в микрофон на стойке */
.kfx-mouth{transform-box:fill-box;transform-origin:center}
:is(.kfx-singer:hover,.kfx-singer:focus-visible,.kfx-singer.on) .kfx-mouth{animation:kfx-sing .5s ease-in-out infinite}
@keyframes kfx-sing{0%,100%{scale:1 1}50%{scale:1.2 2.2}}

/* ---------- левая полоса широких экранов ---------- */
.kfx-side{display:none}
@media(min-width:1560px){
  .kfx-side{display:flex;position:absolute;left:0;bottom:0;z-index:1;width:min(330px,calc((100vw - 1140px) / 2 - 16px));height:72%;align-items:flex-end;justify-content:center;gap:6%;padding-bottom:18px}
  .kfx-side .kfx-p{position:relative;width:44%}
  .kfx-side .kfx-say{max-width:150px}
}

/* ---------- телефон и планшет: карта под текстом ---------- */
@media(max-width:900px){
  .kfx-scene{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:560px;margin:var(--s5) auto 0}
  .kfx-say{font-size:12px;max-width:150px}
}

/* ---------- приветственный ролик ---------- */
.kfx-video{padding:var(--s7) 0}
.kfx-video h2{text-align:center}
.kfx-video .lead{text-align:center;margin:0 auto var(--s5);max-width:640px}
.kfx-vbox{position:relative;max-width:980px;margin:0 auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#000;
  box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 22%,transparent);border:4px solid #fff}
.kfx-vbox video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.kfx-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;background:var(--g);color:var(--on, #fff);
  font-size:30px;line-height:84px;padding-left:6px;cursor:pointer;box-shadow:0 10px 30px #0005;transition:transform .2s}
.kfx-play:hover{transform:scale(1.08)}
.kfx-vbox.playing .kfx-play{opacity:0;pointer-events:none}
.kfx-sound{position:absolute;right:14px;bottom:14px;border:0;border-radius:999px;padding:8px 14px;background:#fffe;color:#2b2340;font:700 13px var(--font-b);cursor:pointer;box-shadow:0 4px 14px #0003}
.kfx-sound[aria-pressed="true"]{background:var(--g);color:var(--on,#fff)}

@media(prefers-reduced-motion:reduce){
  .kfx-scene *,.kfx-side *{animation:none !important;transition:none !important}
}