/* Social Crew — десять героїв на публічному сайті (site/crew.js кладе їх у сторінку).

   Принципи, від яких залежить решта файла:
   • Герої ДЕКОР. pointer-events:none, aria-hidden, жодного власного місця в потоці
     (крім ряду «знайомтесь» на головній) — вони стоять у вільному куті заголовка
     секції або визирають з-за краю картки й не відсувають текст чи кнопки.
   • Колір береться з самого SVG (бурштин + світло). Тут жодних власних кольорів
     героїв, лише бульбашка підказки, яка рахується від токенів секції
     (--fg/--bg), тож однаково читається і в темній, і в кремовій смузі.
   • Рух дешевий: лише transform/opacity, і тільки поки герой на екрані (.live) та
     вкладка видима (html.crew-paused ставить усе на паузу).
   • Шари героя (див. crew.js → mount): .crew > .c-clip (обрізка) > .c-move (вхід/визирання)
     > .c-lean (нахил від скролу) > .c-act (жести) > .cw (гойдання) > svg. Кожен шар має
     СВІЙ transform, тому рухи складаються, а не перебивають один одного.
   • prefers-reduced-motion: герої статичні й видимі повністю, підказок немає. */

.crew-host{position:relative}

.crew{
  --cs:104px;
  position:absolute; z-index:3; width:var(--cs); height:var(--cs);
  pointer-events:none; user-select:none; -webkit-user-select:none;
  opacity:0; transform:translateY(18%) scale(.92); transform-origin:50% 100%;
  transition:opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.crew.in{opacity:1; transform:none}
.crew-l{--cs:128px}
.crew-m{--cs:104px}
.crew-s{--cs:76px}

/* Місця. head — у правому верхньому куті блока заголовка, поруч із ним;
   edge — визирає з-за верхнього краю предмета (телефон, картка);
   step — так само з-за краю кроку, ліворуч. */
.crew[data-pos="head"]{top:-6px; right:0; transform:none; transition:opacity .4s ease}
.crew[data-pos="edge"]{bottom:calc(100% - 2px); right:10%; transform:none; transition:opacity .3s ease}
.crew[data-pos="step"]{bottom:calc(100% - 2px); left:14px; transform:none; transition:opacity .3s ease}
.crew[data-pos="flow"]{position:relative; width:var(--cs); height:var(--cs); margin:0 auto;
  transform:translateY(16px) scale(.86);
  transition:opacity .45s ease calc(var(--k,0) * 70ms), transform .8s cubic-bezier(.34,1.56,.64,1) calc(var(--k,0) * 70ms)}
.crew[data-pos="flow"].in{transform:none}

.c-clip,.c-move,.c-lean,.c-act,.cw{display:block; width:100%; height:100%}
.c-move,.c-lean,.c-act,.cw{transform-origin:50% 100%}

/* Визирач: нижня межа .c-clip — це край картки; усе, що нижче, «за карткою». */
.crew[data-pos="edge"] .c-clip,.crew[data-pos="step"] .c-clip{clip-path:inset(-70% -70% 0 -70%)}
.crew[data-pos="edge"] .c-move,.crew[data-pos="step"] .c-move{
  transform:translateY(46%);
  transition:transform .75s cubic-bezier(.34,1.45,.55,1);
}
.crew.up .c-move{transform:none !important}
.crew.hid .c-move{transform:translateY(104%) !important; transition-duration:.35s; transition-timing-function:cubic-bezier(.5,0,.75,0)}
.crew.duck .c-move{transform:translateY(104%) !important; transition-duration:.24s; transition-timing-function:cubic-bezier(.5,0,.75,0)}

/* Спокій: гойдання + дихання. */
.crew.live .cw{animation:crew-sway 7s ease-in-out infinite alternate; animation-delay:var(--d,0s)}
.crew-svg{display:block; width:100%; height:100%; overflow:visible}
/* how_scenes.css задає `svg path{vector-effect:non-scaling-stroke}` для всіх інлайн-SVG сторінки;
   у героя штрихи рахуються в одиницях viewBox, тож це правило його ламає (брови, контур, руки). */
.crew-svg path,.crew-svg circle,.crew-svg ellipse,.crew-svg rect{vector-effect:none}
.crew.live .crew-svg .body{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:crew-breathe 4.2s ease-in-out infinite; animation-delay:var(--d,0s);
}
/* F2: спокій без масштабу — scale розмазує растр; лише зсув і крихітний нахил. */
@keyframes crew-breathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-1.5%) rotate(.6deg)}}
@keyframes crew-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}

/* Літуни не гойдаються на місці, а ширяють: бджола Мел і літачок Зіп. */
.crew.live[data-crew="mel"] .cw,.crew.live[data-crew="zip"] .cw{animation:crew-hover 3.6s ease-in-out infinite; animation-delay:var(--d,0s)}
@keyframes crew-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5%) rotate(1.2deg)}}

/* Дрібниці характеру — у кожного своя, усі тихі. */
.crew-svg .ly-wing_l,.crew-svg .ly-wing_r{transform-box:fill-box}
.crew-svg .ly-wing_l{transform-origin:90% 85%}
.crew-svg .ly-wing_r{transform-origin:10% 85%}
.crew.live .crew-svg .ly-wing_l{animation:crew-wing-l .16s ease-in-out infinite alternate}
.crew.live .crew-svg .ly-wing_r{animation:crew-wing-r .16s ease-in-out infinite alternate}
@keyframes crew-wing-l{to{transform:rotate(-9deg)}}
@keyframes crew-wing-r{to{transform:rotate(9deg)}}
.crew.live .crew-svg .ly-rays,.crew.live .crew-svg .ly-glow{animation:crew-glow 3.2s ease-in-out infinite alternate; animation-delay:var(--d,0s)}
@keyframes crew-glow{from{opacity:.55}to{opacity:1}}
.crew-svg .ly-tongue_l,.crew-svg .ly-tongue_r,.crew-svg .ly-tip{transform-box:fill-box; transform-origin:50% 100%}
.crew.live .crew-svg .ly-tip{animation:crew-flame 1.1s ease-in-out infinite alternate}
.crew.live .crew-svg .ly-tongue_l{animation:crew-flame .8s ease-in-out infinite alternate -.3s}
.crew.live .crew-svg .ly-tongue_r{animation:crew-flame .95s ease-in-out infinite alternate -.6s}
@keyframes crew-flame{from{transform:scale(1,.93) skewX(-2deg)}to{transform:scale(.97,1.06) skewX(2deg)}}
.crew-svg .ly-star,.crew-svg .ly-spark1,.crew-svg .ly-spark2{transform-box:fill-box; transform-origin:50% 50%}
.crew.live .crew-svg .ly-star{animation:crew-twinkle 3.8s ease-in-out infinite; animation-delay:var(--d,0s)}
.crew.live .crew-svg .ly-spark1{animation:crew-twinkle 1.9s ease-in-out infinite}
.crew.live .crew-svg .ly-spark2{animation:crew-twinkle 2.3s ease-in-out infinite -.9s}
@keyframes crew-twinkle{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(.82); opacity:.7}}

/* LOD (data-lod="s", ≤ 80 px): без дрібниць, що на малому розмірі лише мулять. Очі трохи
   більші — статично, не анімацією. Підключає shared/crew_svg.js (.so-mascot) і crew.js. */
[data-lod="s"] .crew-svg .hl,.crew[data-lod="s"] .crew-svg .hl,.crew-s .crew-svg .hl{display:none}
[data-lod="s"] .crew-svg g[opacity=".45"],.crew-s .crew-svg g[opacity=".45"]{display:none}
[data-lod="s"] .crew-svg .ly-filament path,.crew-s .crew-svg .ly-filament path{stroke-width:5}
[data-lod="s"] .crew-svg .eyes,.crew-s .crew-svg .eyes{transform:scale(1.12);transform-box:fill-box;transform-origin:50% 50%}

/* Очі: зіниці їдуть за курсором на --gx/--gy (від −1 до 1, ставить JS), повіки — клас .blink. */
.crew-svg .eye{transform-box:fill-box; transform-origin:50% 50%; transition:transform .09s ease-in}
.crew.blink .crew-svg .eye{transform:scaleY(.08)}
.crew-svg .pp{transform:translate(calc(var(--gx,0)*5px), calc(var(--gy,0)*6px)); transition:transform .14s ease-out}
.crew-svg .gl{transform:translate(calc(var(--gx,0)*1.2px), calc(var(--gy,0)*1.2px)); transition:transform .14s ease-out}
.crew-svg .face{transform:translate(calc(var(--gx,0)*3px), calc(var(--gy,0)*2px)); transition:transform .18s ease-out}

/* Рот: у спокої — .m-s; коли герой говорить (.talk) — відкритий .m-o «жує» склади. */
.crew-svg .m-o{opacity:0; transform-box:fill-box; transform-origin:50% 0}
.crew.crew-talk .crew-svg .m-s{opacity:0}
.crew.crew-talk .crew-svg .m-o{opacity:1; animation:crew-talk .46s linear infinite}
@keyframes crew-talk{
  0%{transform:scale(1,.25)} 22%{transform:scale(.95,.95)} 40%{transform:scale(1,.4)}
  58%{transform:scale(.9,.75)} 78%{transform:scale(1,.3)} 100%{transform:scale(1,.25)}
}

/* Підказка. Одна на екрані за раз (це гарантує JS), без інтерактивності. */
.crew-tip{
  position:absolute; z-index:4; top:8%; right:calc(100% + 4px);
  width:max-content; max-width:min(240px, 62vw);
  padding:8px 12px; border-radius:12px;
  background:var(--fg, #f6f4f1); color:var(--bg, #1b1713);
  font:500 13px/1.35 var(--font-sans, system-ui, sans-serif); letter-spacing:0;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.55);
  opacity:0; transform:translate(var(--tx,0px), 6px) scale(.96); transform-origin:100% 40%;
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
  pointer-events:none; text-align:left; white-space:normal;
}
.crew-tip::after{
  content:""; position:absolute; top:16px; right:-5px; width:10px; height:10px;
  background:inherit; transform:rotate(45deg); border-radius:2px;
}
.crew-tip.show{opacity:1; transform:translate(var(--tx,0px), 0) scale(1)}
.crew-tip.r{right:auto; left:calc(100% + 4px); transform-origin:0 40%}
.crew-tip.r::after{right:auto; left:-5px}
/* Бульбашка в ряду «знайомтесь»: над героєм по центру. */
.crew-tip.up{top:auto; bottom:calc(100% + 6px); right:auto; left:50%; transform:translate(calc(-50% + var(--tx,0px)), 6px) scale(.96); transform-origin:50% 100%}
.crew-tip.up.show{transform:translate(calc(-50% + var(--tx,0px)), 0) scale(1)}
.crew-tip.up::after{top:auto; bottom:-5px; right:auto; left:calc(50% - 5px - var(--tx,0px))}
/* Друк: невидимий відбиток повного тексту тримає розмір, поверх друкується видимий. */
.crew-tip .ct{display:block; position:relative}
.crew-tip .ct-s{visibility:hidden}
.crew-tip .ct-t{position:absolute; inset:0}
.crew-tip.typing .ct-t::after{
  content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px;
  vertical-align:-.15em; background:currentColor; opacity:.55;
}

/* ── Ряд «Знайомтесь, команда» на головній ───────────────────────────── */
.crew-sec .sub{max-width:62ch}
.crew-row{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 12px;
}
.crew-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; cursor:default; position:relative}
.crew-card .crew{--cs:112px}
.crew-card b{font-weight:650; font-size:15px; margin-top:6px}
.crew-card i{font-style:normal; font-size:13px; color:var(--dim)}
.crew-card .crew .c-clip{transition:transform .35s cubic-bezier(.22,1,.36,1); transform-origin:50% 100%}
.crew-card:hover .crew .c-clip{transform:translateY(-4px) scale(1.05)}

/* Вкладка схована — усе завмирає. */
html.crew-paused .crew *,html.crew-paused .crew{animation-play-state:paused !important}

@media (max-width:899px){
  .crew{--cs:64px}
  .crew-l{--cs:76px}
  .crew-m{--cs:64px}
  .crew-s{--cs:52px}
  /* Вузько: поруч із заголовком місця нема, тож герой стоїть НАД блоком у
     відступі секції, трохи заходячи на його верх. */
  .crew[data-pos="head"]{top:auto; bottom:calc(100% - 8px); right:0}
  .crew[data-pos="edge"]{bottom:calc(100% - 2px); right:6%}
  .crew[data-pos="step"]{left:auto; right:0}
  .crew[data-m="0"]{display:none}
  .crew-tip{font-size:12px; padding:6px 10px; max-width:min(210px, 58vw)}
  .crew-card .crew{--cs:56px}
  .crew-card b{font-size:13px}
  .crew-card i{font-size:11px; line-height:1.25}
}
@media (max-width:640px){
  .crew-row{gap:22px 4px; margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .crew,.crew[data-pos="flow"]{opacity:1; transform:none; transition:none}
  .crew .c-clip,.crew .c-move,.crew .c-lean,.crew .c-act,.crew .cw,.crew-svg *{animation:none!important; transition:none!important}
  .crew .c-move{transform:none!important}
  .crew-tip{display:none}
  .crew-card:hover .crew .c-clip{transform:none}
}