/* ============================================================
   Блок «Полезные инструменты» (2-й экран главной).
   Все стили scope-нуты под .main-tools чтобы не конфликтовать с глобалом.
   ============================================================ */
.main-tools{
  /* Отступы как у соседних секций (categorycards): через margin, не padding.
     Margin collapse с соседом → visual gap = 49.5px ровно как между Книгами и Популярным. */
  padding:0;
  margin:49.5px 0;
  background:#fff;
  color:#111314;
}
/* На мобиле уменьшаем gap до Книг через отрицательный margin-bottom:
   max(-18, books.mt=43.68) = 43.68 + (-18) = 25.68px — заметно компактнее. */
@media (max-width:820px){.main-tools{margin:43.68px 0 -18px}}

/* Сетка — без внутреннего bottom-padding. Тени hover (translateY(-4) + shadow до 60px вниз)
   выпадают вниз в margin-зону секции, не съедая пространство. На overflow:visible они видны. */
.main-tools__grid{padding:0 0 0; overflow:visible}
@media (max-width:820px){.main-tools__grid{padding:0; overflow-x:auto; overflow-y:visible}}

/* === Стабилизация карточек при скролле на мобиле ===
   Без contain браузер при scroll-snap репэйнтит детей slider'а — у пользователя
   это выглядит как «карточки прогружаются заново». contain делает layout и paint
   изолированными — снаружи карточки никакие изменения не триггерят её repaint.
   transform: translateZ(0) — собственный композитный слой, чтобы scroll не вызывал
   повторную растеризацию SVG-градиентов.
*/
.main-tools .tc{
  contain:layout style paint;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* === Perf: пауза анимаций когда .main-tools вне viewport ===
   IntersectionObserver ставит класс .is-out на секцию, и все decorative animation'ы
   приостанавливаются (paused). Когда секция снова в viewport — играют дальше. Анимации
   не теряются, юзер видит их живыми. На фоне (когда секция выскроллена) GPU отдыхает. */
.main-tools.is-out *{animation-play-state:paused !important}

/* === Perf: пауза анимаций в скрытых lb-sheets ===
   .lb-sheet рендерится в DOM на всех страницах через visibility:hidden — но animations
   в .lb-bento__taro / .lb-bento__moon-orbit / .lb-bento__wave продолжают крутить GPU.
   Когда sheet не открыт (нет класса .is-opened) — паузим всё внутри. */
.lb-sheet:not(.is-opened) *{animation-play-state:paused !important}

/* На тач-устройствах убираем hover-эффекты (подъём и тень при тапе) — раздражают,
   потому что зависают после касания. Анимации внутри карточек остаются — они на GPU,
   compositor-only (translate/opacity), не блокируют main thread. */
@media (hover:none){
  .main-tools .tc:hover,
  .main-tools .tc:active,
  .main-tools .tc:focus{
    transform:none !important;
    box-shadow:none !important;
  }
  .main-tools .tc:hover .tc__cta,
  .main-tools .tc:active .tc__cta{opacity:0}
  /* Внутренние hover-эффекты (scale/glow на эмблемах) тоже не нужны на тапе */
  .main-tools .tc--china:hover .hzw,
  .main-tools .tc--meta:hover .bagua,
  .main-tools .tc--luna:hover .moon-cal,
  .main-tools .tc--name:hover .solar,
  .main-tools .tc--tarosp:hover .stack3,
  .main-tools .tc--taro:hover .mini{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
}
.main-tools__header{margin-bottom:32px; max-width:62ch}
@media (max-width:820px){.main-tools__header{margin-bottom:20px}}
.main-tools__title{
  font-family:Forum, Georgia, serif;
  font-size:7.6rem; line-height:0.9;
  letter-spacing:-0.01em; font-weight:400;
  color:#111314; margin:0;
}
@media (max-width:1120px){.main-tools__title{font-size:5.9rem}}
@media (max-width:580px){.main-tools__title{font-size:4.2rem; line-height:0.78}}

/* === Сетка 3×2 === */
.main-tools__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:1120px){.main-tools__grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:820px){
  .main-tools__grid{
    display:flex !important; flex-direction:row !important;
    gap:14px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
    /* выйти за padding .wrap чтобы slider шёл до краёв viewport */
    margin:0 calc(-1 * var(--wrapper-offset));
    /* первая карточка ровняется по левому краю заголовка (= padding .wrap) */
    padding:16px var(--wrapper-offset) 32px;
    /* scroll-snap отлипает на padding-left — иначе первая карточка прыгает за viewport */
    scroll-padding-left:var(--wrapper-offset);
    scroll-padding-right:var(--wrapper-offset);
    scrollbar-width:none;
    grid-template-columns:none !important;
  }
  .main-tools__grid::-webkit-scrollbar{display:none}
  .main-tools__grid > *{flex:0 0 80%; scroll-snap-align:start; min-height:260px}
}

/* === Базовая карточка: вертикальная композиция === */
.main-tools .tc{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  border-radius:24px;
  padding:32px 24px 28px;
  min-height:400px;
  color:#f5efe5;
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.25,1), box-shadow .35s ease;
}
.main-tools .tc:hover{transform:translateY(-4px); box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.main-tools .tc::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='mt-n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23mt-n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.main-tools .tc > *{position:relative; z-index:1}
.main-tools .tc__visual{
  flex-shrink:0; width:100%; height:200px;
  display:grid; place-items:center;
  position:relative; margin-bottom:auto;
}
.main-tools .tc__body{margin-top:24px; width:100%}
.main-tools .tc__title{font-family:Forum, serif; font-size:28px; line-height:1.05; color:#fff; margin-bottom:8px}
.main-tools .tc__desc{font:400 15px/1.5 Manrope, sans-serif; color:rgba(245,239,229,0.74); max-width:30ch; margin:0 auto}
.main-tools .tc__cta{
  margin-top:14px; display:inline-flex; align-items:center; gap:6px;
  font:600 11px/1 Manrope, sans-serif; letter-spacing:.10em; text-transform:uppercase;
  color:#fbd890;
  opacity:0;
  transition:opacity .3s ease;
}
.main-tools .tc:hover .tc__cta{opacity:1}
.main-tools .tc__cta svg{width:14px; height:10px; stroke:currentColor; fill:none}

@media (max-width:1440px){.main-tools .tc__title{font-size:26px}}
@media (max-width:1120px){.main-tools .tc__title{font-size:24px} .main-tools .tc__desc{font-size:14px} .main-tools .tc{min-height:380px} .main-tools .tc__visual{height:180px}}

/* mobile: типографика — как .item-catalog__caption b на главной */
@media (max-width:820px){
  .main-tools .tc__desc{font-size:16px; line-height:1.45}
  .main-tools .tc__title{
    font-family:Manrope, sans-serif;
    font-size:18px; font-weight:700; line-height:1.2;
    margin-bottom:6px;
  }
  /* На мобиле «Открыть» не нужен — клик по всей карточке открывает ссылку */
  .main-tools .tc__cta{display:none !important}
  /* На мобиле скрываем pc-визуалы и показываем mobile-визуалы для 3 карточек */
  .main-tools .tc__visual--pc{display:none !important}
  .main-tools .tc__visual--mobile{display:flex !important}
}
@media (min-width:821px){
  .main-tools .tc__visual--mobile{display:none !important}
}

/* ════════════════════════════════════════════════════════════
   1 · Китайский календарь (флагман) — 命 + красная плашка + Hanzi Writer
   ════════════════════════════════════════════════════════════ */
.main-tools .tc--china{
  /* зелёный — светлее, как темно-изумрудный с теплом */
  background:linear-gradient(160deg, #2b6b4a 0%, #1a4830 60%, #103022 100%);
  border:1px solid rgba(168,232,200,0.32);
}
.main-tools .tc--china:hover{border-color:rgba(86,200,140,0.7); box-shadow:0 30px 60px -28px rgba(0,0,0,0.7), 0 0 36px rgba(204,166,86,0.12)}
.main-tools .tc--china .emblem-square{
  width:140px; height:140px; border-radius:20px;
  background:radial-gradient(circle at 30% 28%, #8a2c24 0%, #6a1d18 60%, #4a120e 100%);
  border:1px solid rgba(204,166,86,0.45);
  display:grid; place-items:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 24px rgba(0,0,0,.25),
    0 14px 36px -10px rgba(74,18,14,.5);
  position:relative; overflow:hidden;
}
.main-tools .tc--china .emblem-square::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='mt-n1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23mt-n1)' opacity='0.25'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.45;
}
.main-tools .tc--china .hzw{
  position:relative; z-index:1;
  width:96px; height:96px;
  display:grid; place-items:center;
  font-family:'Noto Serif SC', Forum, serif;
  font-size:78px; color:#fbd890;
  text-shadow:0 2px 6px rgba(0,0,0,.4); line-height:1;
  transition:transform .45s cubic-bezier(.2,.7,.25,1), filter .45s ease;
  transform-origin:center center;
}
.main-tools .tc--china:hover .hzw{
  transform:scale(1.18);
  filter:drop-shadow(0 0 6px rgba(251,216,144,0.35)) drop-shadow(0 0 14px rgba(204,166,86,0.18));
}

/* ════════════════════════════════════════════════════════════
   2 · Справочник по китайской метафизике — багуа 八卦 + Тайцзи
   ════════════════════════════════════════════════════════════ */
.main-tools .tc--meta{
  /* гранат — ярче, чуть краснее и сочнее */
  background:linear-gradient(160deg, #8e2630 0%, #6a1c24 60%, #4a121a 100%);
  border:1px solid rgba(232,140,110,0.40);
}
.main-tools .tc--meta:hover{border-color:rgba(218,120,90,0.45)}
.main-tools .tc--meta .tc__desc{color:#dab8b0}
.main-tools .tc--meta .bagua{
  position:relative; width:180px; height:180px;
  display:grid; place-items:center;
  transition:transform .45s cubic-bezier(.2,.7,.25,1), filter .45s ease;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}
.main-tools .tc--meta:hover .bagua{
  transform:scale(1.12);
  filter:drop-shadow(0 14px 30px rgba(204,166,86,0.45)) drop-shadow(0 0 12px rgba(251,216,144,0.25));
}
.main-tools .tc--meta .bagua-spin{
  width:100%; height:100%;
  animation:mt-bagua-spin 120s linear infinite;
}
.main-tools .tc--meta .bagua-spin svg{width:100%; height:100%}
@keyframes mt-bagua-spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
.main-tools .tc--meta .bagua .yinyang{
  transform-box:view-box;
  transform-origin:100px 100px;
  animation:mt-yinyang-spin 60s linear infinite;
}
@keyframes mt-yinyang-spin{from{transform:rotate(0deg)} to{transform:rotate(-360deg)}}

/* ════════════════════════════════════════════════════════════
   3 · Расклад Таро — фиолетовый веер 4 карты
   ════════════════════════════════════════════════════════════ */
.main-tools .tc--taro{
  /* фиолетовый — светлее, лиловая глубина */
  background:linear-gradient(160deg, #4a2270 0%, #321858 60%, #200e3a 100%);
  border:1px solid rgba(168,130,224,0.40);
}
.main-tools .tc--taro:hover{border-color:rgba(140,80,220,0.7); box-shadow:0 30px 60px -28px rgba(0,0,0,0.7), 0 0 36px rgba(140,80,220,0.18)}
.main-tools .tc--taro .deck{
  position:relative; width:100%; height:200px;
  perspective:800px; pointer-events:none;
}
.main-tools .tc--taro .deck::after{
  content:""; position:absolute; left:50%; bottom:-6px;
  width:140px; height:22px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 40%, transparent 75%);
  filter:blur(10px); z-index:11;
  transition:opacity .35s ease;
}
.main-tools .tc--taro:hover .deck::after{opacity:0}
.main-tools .tc--taro .mini{
  position:absolute; bottom:0; aspect-ratio:2/3; height:170px; left:50%;
  border-radius:7px; overflow:hidden;
  border:1px solid rgba(204,166,86,0.45);
  transform-origin:50% 100%;
  transition:transform 1.15s cubic-bezier(.2,.85,.25,1.05), box-shadow .35s ease;
}
.main-tools .tc--taro:hover .mini{box-shadow:0 14px 30px -10px rgba(0,0,0,0.6)}
.main-tools .tc--taro .mini svg{width:100%; height:100%; display:block}
.main-tools .tc--taro .mini:nth-child(1){transform:translateX(-50%) rotate(-3deg) translateY(0); z-index:4}
.main-tools .tc--taro .mini:nth-child(2){transform:translateX(-50%) rotate(-1deg) translateY(-2px); z-index:3}
.main-tools .tc--taro .mini:nth-child(3){transform:translateX(-50%) rotate(1deg)  translateY(-4px); z-index:2}
.main-tools .tc--taro .mini:nth-child(4){transform:translateX(-50%) rotate(3deg)  translateY(-6px); z-index:1}
.main-tools .tc--taro:hover .mini:nth-child(1){transform:translateX(calc(-50% - 70px)) rotate(-18deg) translateY(-8px)}
.main-tools .tc--taro:hover .mini:nth-child(2){transform:translateX(calc(-50% - 24px)) rotate(-6deg)  translateY(-22px)}
.main-tools .tc--taro:hover .mini:nth-child(3){transform:translateX(calc(-50% + 24px)) rotate(6deg)   translateY(-22px)}
.main-tools .tc--taro:hover .mini:nth-child(4){transform:translateX(calc(-50% + 70px)) rotate(18deg)  translateY(-8px)}

/* ════════════════════════════════════════════════════════════
   4 · Справочник Таро — stack3 (3 тёмно-фиолетовые карты, дыхание)
   ════════════════════════════════════════════════════════════ */
.main-tools .tc--tarosp{
  /* синеватый sapphire — fon под рубашки в синих тонах */
  background:linear-gradient(160deg, #2e5286 0%, #1d3868 60%, #0d1f3e 100%);
  border:1px solid rgba(140,180,220,0.40);
}
.main-tools .tc--tarosp:hover{
  border-color:rgba(160,200,232,0.60);
  box-shadow:
    0 30px 60px -28px rgba(0,0,0,0.6),
    0 0 44px rgba(120,160,220,0.35),
    inset 0 0 30px rgba(120,160,220,0.10);
}
.main-tools .tc--tarosp .tc__desc{color:#b8c8e0}

/* ============ PC: deck 3 карты как у Расклад Таро (s3 паттерн) ============ */
.main-tools .tc--tarosp .deck{
  position:relative; width:100%; height:200px;
  perspective:800px; pointer-events:none;
}
.main-tools .tc--tarosp .deck::after{
  content:""; position:absolute; left:50%; bottom:-6px;
  width:140px; height:22px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 40%, transparent 75%);
  filter:blur(10px); z-index:11;
  transition:opacity .35s ease;
}
.main-tools .tc--tarosp:hover .deck::after{opacity:0}
.main-tools .tc--tarosp .mini{
  position:absolute; bottom:0; aspect-ratio:2/3; height:170px; left:50%;
  border-radius:7px; overflow:hidden;
  border:1px solid rgba(140,180,232,0.50);
  transform-origin:50% 100%;
  transition:transform 1.15s cubic-bezier(.2,.85,.25,1.05), box-shadow .35s ease;
}
.main-tools .tc--tarosp:hover .mini{box-shadow:0 14px 30px -10px rgba(0,0,0,0.6)}
.main-tools .tc--tarosp .mini svg{width:100%; height:100%; display:block}
/* s3 stack — 3 карты слегка сдвинуты вверх */
.main-tools .tc--tarosp .mini:nth-child(1){transform:translateX(-50%) rotate(-2deg) translateY(0); z-index:3}
.main-tools .tc--tarosp .mini:nth-child(2){transform:translateX(-50%) rotate(0deg)  translateY(-2px); z-index:2}
.main-tools .tc--tarosp .mini:nth-child(3){transform:translateX(-50%) rotate(2deg)  translateY(-4px); z-index:1}
/* hover — раскрытие веером */
.main-tools .tc--tarosp:hover .mini:nth-child(1){transform:translateX(calc(-50% - 56px)) rotate(-14deg) translateY(-10px)}
.main-tools .tc--tarosp:hover .mini:nth-child(2){transform:translateX(-50%)               rotate(0deg)   translateY(-22px)}
.main-tools .tc--tarosp:hover .mini:nth-child(3){transform:translateX(calc(-50% + 56px)) rotate(14deg)  translateY(-10px)}

/* На мобиле .deck не показываем, .stack3 остаётся (с !important — иначе перебивается базовым display:flex далее) */
@media (max-width:820px){
  .main-tools .tc--tarosp .deck{display:none !important}
}
@media (min-width:821px){
  .main-tools .tc--tarosp .stack3{display:none !important}
}
.main-tools .tc--tarosp .stack3{
  position:relative;
  width:180px; height:160px;
  display:flex; align-items:center; justify-content:center;
}
/* Веер из 3 одинаковых карт (как в /taro/ блоке «3 карты»):
   лёгкий поворот ±10°, лёгкое смещение, центр поверх. */
.main-tools .tc--tarosp .stack3 i{
  position:absolute;
  left:50%; top:50%;
  width:84px; height:128px;
  border-radius:8px;
  border:1px solid rgba(232,210,180,0.42);
  box-shadow:0 6px 18px -4px rgba(0,0,0,0.5);
  animation:mt-stack3-breath 6s ease-in-out infinite;
  opacity:1;
  overflow:hidden;
}
.main-tools .tc--tarosp .stack3 i svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
/* Прогрессивный веер: левая внизу, центр поверх левой, правая поверх центра.
   Раскинуты пошире + крайние чуть ниже центра — классический fan. */
.main-tools .tc--tarosp .stack3 i:nth-child(1){
  transform:translate(-96%, -42%) rotate(-14deg);
  z-index:1;
  animation-delay:0s;
}
.main-tools .tc--tarosp .stack3 i:nth-child(2){
  transform:translate(-50%, -50%) rotate(0deg);
  z-index:2;
  animation-delay:0.2s;
}
.main-tools .tc--tarosp .stack3 i:nth-child(3){
  transform:translate(-4%, -42%) rotate(14deg);
  z-index:3;
  animation-delay:0.4s;
}
@keyframes mt-stack3-breath{0%, 100%{filter:brightness(1)} 50%{filter:brightness(1.15)}}
.main-tools .tc--tarosp .stack3{transition:transform .45s cubic-bezier(.2,.7,.25,1), filter .45s ease}
.main-tools .tc--tarosp:hover .stack3{
  transform:scale(1.12);
  filter:drop-shadow(0 0 8px rgba(180,140,220,0.30)) drop-shadow(0 0 18px rgba(168,130,224,0.18));
}

/* ════════════════════════════════════════════════════════════
   5 · Лунный календарь — белая луна + орбита с mini-луной
   ════════════════════════════════════════════════════════════ */
.main-tools .tc--luna{
  /* navy ночь — светлее, индиго */
  background:linear-gradient(180deg, #1f2a55 0%, #141a3a 60%, #0a0e22 100%);
  border:1px solid rgba(204,166,86,0.28);
}
.main-tools .tc--luna:hover{border-color:rgba(204,166,86,0.45)}
.main-tools .tc--luna .moonbox{
  position:relative; width:200px; height:200px;
  display:grid; place-items:center;
}
.main-tools .tc--luna .orb-ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none}
.main-tools .tc--luna .orb-ring--1{width:180px; height:180px; border:1px dashed rgba(204,166,86,0.35)}
.main-tools .tc--luna .orb-ring--2{width:230px; height:230px; border:1px solid rgba(204,166,86,0.22)}
.main-tools .tc--luna .moon-cal{
  position:relative; width:140px; height:140px;
}
.main-tools .tc--luna .moon-cal svg{width:100%; height:100%; display:block; overflow:visible}
/* На hover увеличивается ТОЛЬКО тело луны (group.moon-body), halo остаётся неподвижным */
.main-tools .tc--luna .moon-cal svg .moon-body{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .45s cubic-bezier(.2,.7,.25,1), filter .45s ease;
}
.main-tools .tc--luna:hover .moon-cal svg .moon-body{
  transform:scale(1.30);
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.45));
}
.main-tools .tc--luna .moon-orbit{
  position:absolute; top:50%; left:50%;
  width:0; height:0; pointer-events:none;
  animation:mt-mini-orbit 12s linear infinite;
}
.main-tools .tc--luna .moon-mini{
  position:absolute;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #ebe4d3 60%, #c8bfa6 100%);
  box-shadow:inset -2.5px -1.8px 4px rgba(120,108,78,0.3), 0 1.5px 5px rgba(0,0,0,0.25);
  transform:translate(-50%, -50%) translateX(86px);
}
@keyframes mt-mini-orbit{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
.main-tools .tc--luna .stars i{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fbd890; box-shadow:0 0 6px rgba(251,216,144,0.7);
  animation:mt-twinkle 3s ease-in-out infinite;
}
.main-tools .tc--luna .stars i:nth-child(1){top:5%;  left:10%; animation-delay:.1s}
.main-tools .tc--luna .stars i:nth-child(2){top:18%; right:8%; animation-delay:.7s}
.main-tools .tc--luna .stars i:nth-child(3){bottom:10%; left:20%; animation-delay:1.2s}
.main-tools .tc--luna .stars i:nth-child(4){bottom:25%; right:5%; animation-delay:1.8s}
.main-tools .tc--luna .stars i:nth-child(5){top:55%; left:0%; width:2px; height:2px; animation-delay:2.3s}
@keyframes mt-twinkle{0%,100%{opacity:.3; transform:scale(.85)} 50%{opacity:1; transform:scale(1.1)}}

/* ════════════════════════════════════════════════════════════
   6 · Калькулятор имени — солнечная система
   ════════════════════════════════════════════════════════════ */
.main-tools .tc--name{
  /* вариант 6 — Azure, лазурный голубой */
  background:linear-gradient(160deg, #1e5ca8 0%, #103a72 55%, #051e44 100%);
  border:1px solid rgba(168,200,232,0.40);
}
.main-tools .tc--name:hover{border-color:rgba(204,166,86,0.45)}
/* Единая планета-радиал (1:1 из swatches preview) — для ПК и мобилы */
.main-tools .tc--name .name-planet{
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8e0 0%, #fbd890 35%, #cca656 65%, #8a5a18 100%);
  box-shadow:0 0 40px rgba(251,216,144,0.4);
  transition:transform .45s cubic-bezier(.2,.7,.25,1), filter .45s ease;
}
.main-tools .tc--name:hover .name-planet{
  transform:scale(1.15);
  filter:drop-shadow(0 0 18px rgba(251,216,144,0.55));
}

/* ════════════════════════════════════════════════════════════
   Mobile визуалы (1:1 из секции fp-promo «Калькуляторы» на главной)
   ════════════════════════════════════════════════════════════ */
.main-tools .tc__visual--mobile{
  position:relative; width:100%; height:220px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:auto;
  overflow:visible;
}

/* (Планета теперь единая, описана выше как .name-planet — без отдельной мобильной разметки) */

/* Луна (Лунный) */
.main-tools .tc--luna .fpvis-moon{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transform:translate(-12%, -14%);
}
.main-tools .tc--luna .fpvis-moon-rings{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:115%; aspect-ratio:1; pointer-events:none; z-index:1;
}
.main-tools .tc--luna .fpvis-moon-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(251,216,144,0.22);
  animation:mt-ring-rot 90s linear infinite;
}
.main-tools .tc--luna .fpvis-moon-ring--r2{inset:7%; border-style:solid; border-color:rgba(204,166,86,0.32); animation-duration:120s; animation-direction:reverse}
.main-tools .tc--luna .fpvis-moon-ring--r3{inset:14%; border-color:rgba(251,216,144,0.32); animation-duration:70s}
.main-tools .tc--luna .fpvis-moon-ring--r4{inset:21%; border-style:solid; border-color:rgba(255,255,255,0.12)}
@keyframes mt-ring-rot{to{transform:rotate(360deg)}}
.main-tools .tc--luna .fpvis-moon-aura{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(204,166,86,0.30) 0%, rgba(204,166,86,0) 60%);
  animation:mt-aura-pulse 5s ease-in-out infinite;
  z-index:2; pointer-events:none;
}
@keyframes mt-aura-pulse{0%,100%{opacity:0.7; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}}
.main-tools .tc--luna .fpvis-moon-svg{
  position:relative; z-index:3; width:90%; max-width:none; aspect-ratio:1;
  filter:drop-shadow(0 16px 32px rgba(42,43,65,0.20));
}
.main-tools .tc--luna .fpvis-moon-mini{
  position:absolute; z-index:4;
  left:78%; top:55%; width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fefdfa 0%, #ebe4d3 60%, #c8bfa6 100%);
  box-shadow:inset -8px -6px 14px rgba(120,108,78,0.32), 0 6px 16px rgba(42,43,65,0.18);
  --orbit-r:45px;
  animation:mt-mini-fp-orbit 18s linear infinite;
}
@keyframes mt-mini-fp-orbit{
  from{transform:rotate(0deg)   translateX(var(--orbit-r, 5rem)) rotate(0deg)}
  to  {transform:rotate(360deg) translateX(var(--orbit-r, 5rem)) rotate(-360deg)}
}

/* Расклад Таро (12 карт круг ↔ веер) */
.main-tools .tc--taro .fpvis-taro-stage{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.main-tools .tc--taro .fpvis-taro-stage::before{
  content:""; position:absolute; left:50%; top:50%;
  width:180px; height:180px; transform:translate(-50%,-50%);
  background:radial-gradient(circle at center, rgba(204,166,86,0.15) 0%, rgba(204,166,86,0.06) 35%, transparent 65%);
  pointer-events:none; z-index:1;
}
.main-tools .tc--taro .fpvis-taro-stage::after{
  content:""; position:absolute; left:50%; top:50%;
  width:300px; height:300px; transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 35% 60%, rgba(220,80,180,0.22) 0%, transparent 58%),
    radial-gradient(ellipse at 70% 40%, rgba(140,80,220,0.20) 0%, transparent 58%);
  filter:blur(24px); pointer-events:none; z-index:0;
}
.main-tools .tc--taro .fpvis-taro-deck{
  position:relative; z-index:3; width:0; height:0;
  transform:scale(0.624);
}
.main-tools .tc--taro .fpvis-taro-slot{position:absolute; top:0; left:0; width:0; height:0; will-change:transform}
.main-tools .tc--taro .fpvis-taro-card{
  position:absolute; top:-72px; left:-45px;
  width:90px; height:144px; border-radius:8px;
  /* ярче, в тон ПК-обложкам */
  background:linear-gradient(170deg, #4a3486 0%, #2a1858 100%);
  border:1px solid rgba(204,166,86,0.78);
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.main-tools .tc--taro .fpvis-taro-card::before{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(204,166,86,0.32); border-radius:5px; pointer-events:none;
}
.main-tools .tc--taro .fpvis-taro-card svg{width:56%; height:56%; opacity:0.65}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(1){animation:mt-taro-0 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(2){animation:mt-taro-1 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(3){animation:mt-taro-2 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(4){animation:mt-taro-3 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(5){animation:mt-taro-4 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(6){animation:mt-taro-5 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(7){animation:mt-taro-6 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(8){animation:mt-taro-7 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(9){animation:mt-taro-8 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(10){animation:mt-taro-9 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(11){animation:mt-taro-10 9s cubic-bezier(.45,.05,.35,.95) infinite}
.main-tools .tc--taro .fpvis-taro-slot:nth-child(12){animation:mt-taro-11 9s cubic-bezier(.45,.05,.35,.95) infinite}
@keyframes mt-taro-0  {0%,12%{transform:translate(0rem,-12rem) rotate(0deg)}      38%,62%{transform:translate(-16.85rem,3.86rem) rotate(-50deg)}     88%,100%{transform:translate(0rem,-12rem) rotate(0deg)}}
@keyframes mt-taro-1  {0%,12%{transform:translate(6rem,-10.39rem) rotate(30deg)} 38%,62%{transform:translate(-14.41rem,1.37rem) rotate(-40.91deg)} 88%,100%{transform:translate(6rem,-10.39rem) rotate(30deg)}}
@keyframes mt-taro-2  {0%,12%{transform:translate(10.39rem,-6rem) rotate(60deg)} 38%,62%{transform:translate(-11.6rem,-0.69rem) rotate(-31.82deg)} 88%,100%{transform:translate(10.39rem,-6rem) rotate(60deg)}}
@keyframes mt-taro-3  {0%,12%{transform:translate(12rem,0rem) rotate(90deg)}      38%,62%{transform:translate(-8.5rem,-2.29rem) rotate(-22.73deg)}  88%,100%{transform:translate(12rem,0rem) rotate(90deg)}}
@keyframes mt-taro-4  {0%,12%{transform:translate(10.39rem,6rem) rotate(120deg)} 38%,62%{transform:translate(-5.19rem,-3.38rem) rotate(-13.64deg)} 88%,100%{transform:translate(10.39rem,6rem) rotate(120deg)}}
@keyframes mt-taro-5  {0%,12%{transform:translate(6rem,10.39rem) rotate(150deg)} 38%,62%{transform:translate(-1.74rem,-3.93rem) rotate(-4.55deg)}  88%,100%{transform:translate(6rem,10.39rem) rotate(150deg)}}
@keyframes mt-taro-6  {0%,12%{transform:translate(0rem,12rem) rotate(180deg)}     38%,62%{transform:translate(1.74rem,-3.93rem) rotate(4.55deg)}    88%,100%{transform:translate(0rem,12rem) rotate(180deg)}}
@keyframes mt-taro-7  {0%,12%{transform:translate(-6rem,10.39rem) rotate(210deg)} 38%,62%{transform:translate(5.19rem,-3.38rem) rotate(13.64deg)}  88%,100%{transform:translate(-6rem,10.39rem) rotate(210deg)}}
@keyframes mt-taro-8  {0%,12%{transform:translate(-10.39rem,6rem) rotate(240deg)} 38%,62%{transform:translate(8.5rem,-2.29rem) rotate(22.73deg)}    88%,100%{transform:translate(-10.39rem,6rem) rotate(240deg)}}
@keyframes mt-taro-9  {0%,12%{transform:translate(-12rem,0rem) rotate(270deg)}     38%,62%{transform:translate(11.6rem,-0.69rem) rotate(31.82deg)}  88%,100%{transform:translate(-12rem,0rem) rotate(270deg)}}
@keyframes mt-taro-10 {0%,12%{transform:translate(-10.39rem,-6rem) rotate(300deg)} 38%,62%{transform:translate(14.41rem,1.37rem) rotate(40.91deg)}  88%,100%{transform:translate(-10.39rem,-6rem) rotate(300deg)}}
@keyframes mt-taro-11 {0%,12%{transform:translate(-6rem,-10.39rem) rotate(330deg)} 38%,62%{transform:translate(16.85rem,3.86rem) rotate(50deg)}     88%,100%{transform:translate(-6rem,-10.39rem) rotate(330deg)}}