/* ============================================================================
   Матч&мяч v69
   1. «Размышление» Аналитики — вместо одного пульсирующего круга
      многослойная сцена: сканирующий луч, расходящиеся волны мысли и
      живое ядро.
   2. Мобильная вёрстка hero «Мои тренировки»: под управляемой фотографией
      текст был нечитаем, потому что маска-подложка hero отключена глобально.
   ========================================================================= */

/* ============================================================
   1. AI thinking — сцена размышления
   ============================================================ */

/* Сцена дышит целиком: лёгкое «вдох-выдох» вместо статичной картинки. */
.page-analytics .analytics-orbit{
  animation:ace-think-breathe 3.6s cubic-bezier(.45,0,.55,1) infinite;
}

/* Внешнее свечение — аура вычисления, живёт в противофазе с ядром. */
.page-analytics .analytics-orbit::before{
  content:'';
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(200,255,61,.14) 0%,rgba(200,255,61,.05) 42%,transparent 68%);
  animation:ace-think-aura 3.6s cubic-bezier(.45,0,.55,1) infinite;
  pointer-events:none;
}

/* Сканирующий луч: тонкое кольцо с conic-градиентом — «читаю данные».
   Медленный, неравномерный ход даёт ощущение работы, а не спиннера. */
.page-analytics .analytics-orbit::after{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,rgba(200,255,61,.10) 300deg,rgba(200,255,61,.55) 352deg,rgba(233,255,168,.9) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:ace-think-scan 2.9s cubic-bezier(.6,.05,.3,.95) infinite;
  pointer-events:none;
}

/* Волны мысли: три расходящихся кольца со сдвигом по фазе.
   Сам элемент + два псевдо — три волны без правки разметки. */
.page-analytics .analytics-data-pulse,
.page-analytics .analytics-data-pulse::before,
.page-analytics .analytics-data-pulse::after{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(200,255,61,.4);
  animation:ace-think-wave 2.85s cubic-bezier(.22,.68,.24,1) infinite;
  pointer-events:none;
}
.page-analytics .analytics-data-pulse{animation-delay:0s}
.page-analytics .analytics-data-pulse::before{content:'';animation-delay:.95s}
.page-analytics .analytics-data-pulse::after{content:'';animation-delay:1.9s}

/* Кольца: разная скорость и лёгкое «раздумье» на паузе — не механический спин. */
.page-analytics .analytics-orbit-ring{
  animation:ace-think-orbit 5.4s cubic-bezier(.5,.02,.5,.98) infinite!important;
}
.page-analytics .analytics-orbit-ring.is-two{
  animation:ace-think-orbit 4.1s cubic-bezier(.5,.02,.5,.98) infinite reverse!important;
}
/* Точки на кольцах пульсируют — «узлы», в которых что-то посчиталось. */
.page-analytics .analytics-orbit-ring i{
  animation:ace-think-node 1.35s ease-in-out infinite;
}
.page-analytics .analytics-orbit-ring.is-two i{
  animation-duration:1.75s;
  animation-delay:.4s;
}

/* Ядро: пульс глубины + светящийся ободок, синхронно с аурой. */
.page-analytics .analytics-orbit-core{
  animation:ace-think-core 3.6s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
}

/* Шов мяча.
   Старая версия рисовалась двумя боковыми дугами «( )» — симметричная пара
   вертикальных скобок читалась совсем не как мяч. Теперь это настоящий шов:
   две встречные дуги сверху и снизу, как на теннисном мяче. */
.page-analytics .analytics-orbit-core::before,
.page-analytics .analytics-orbit-core::after{
  content:none!important;
}
.page-analytics .analytics-ball-seam{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  animation:ace-ball-roll 16s linear infinite;
}
.page-analytics .analytics-ball-seam path{
  fill:none;
  stroke:#151713;
  stroke-width:2.6;
  stroke-linecap:round;
  opacity:.82;
  /* Шов «прочерчивается» на старте разбора — мяч будто собирается.
     Длина нормирована через pathLength="100" в разметке. */
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:ace-ball-stitch .85s cubic-bezier(.3,.8,.3,1) forwards;
}
.page-analytics .analytics-ball-seam path:last-child{animation-delay:.16s}
/* Внутренний блик пробегает по ядру — короткая «искра мысли». */
.page-analytics .analytics-orbit-core>i{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.72) 50%,transparent 66%);
  opacity:0;
  animation:ace-think-spark 3.6s ease-in-out infinite;
  pointer-events:none;
}

/* Заголовок «Разбираю твою игру» — мягкое движение света по тексту. */
.page-analytics .analytics-thinking-copy h2{
  background:linear-gradient(96deg,var(--text) 24%,#e9ffa8 48%,var(--text) 72%);
  background-size:280% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ace-think-text 4.4s ease-in-out infinite;
}

/* Активный шаг: по строке проходит светлая волна — здесь идёт работа. */
.page-analytics .analytics-stage.is-active{
  position:relative;
  overflow:hidden;
}
.page-analytics .analytics-stage.is-active::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 12%,rgba(200,255,61,.11) 48%,transparent 84%);
  animation:ace-think-sweep 1.5s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
/* Точка активного шага дышит вместе со сценой. */
.page-analytics .analytics-stage.is-active>i{
  animation:ace-think-node 1.35s ease-in-out infinite;
}

@keyframes ace-think-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.028)}
}
@keyframes ace-think-aura{
  0%,100%{opacity:.5;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.04)}
}
/* Луч идёт полтора оборота и «задумывается» на месте. */
@keyframes ace-think-scan{
  0%{transform:rotate(0deg)}
  62%{transform:rotate(300deg)}
  74%{transform:rotate(312deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ace-think-wave{
  0%{transform:scale(.52);opacity:0}
  14%{opacity:.85}
  100%{transform:scale(1.24);opacity:0}
}
@keyframes ace-think-orbit{
  0%{transform:rotate(0deg)}
  46%{transform:rotate(190deg)}
  56%{transform:rotate(196deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ace-think-node{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.5);opacity:1}
}
@keyframes ace-think-core{
  0%,100%{transform:scale(1);box-shadow:0 0 0 12px rgba(200,255,61,.06),0 0 44px rgba(200,255,61,.18)}
  50%{transform:scale(1.06);box-shadow:0 0 0 17px rgba(200,255,61,.09),0 0 62px rgba(200,255,61,.32)}
}
@keyframes ace-think-spark{
  0%,64%{opacity:0;transform:translateX(-38%)}
  76%{opacity:.5}
  90%{opacity:0;transform:translateX(38%)}
  100%{opacity:0;transform:translateX(38%)}
}
@keyframes ace-think-text{
  0%,100%{background-position:120% 50%}
  50%{background-position:-20% 50%}
}
@keyframes ace-think-sweep{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
@keyframes ace-ball-roll{
  to{transform:rotate(360deg)}
}
@keyframes ace-ball-stitch{
  to{stroke-dashoffset:0}
}

/* Уважаем системную настройку «меньше движения»: сцена остаётся,
   но замирает — читается как статичная иллюстрация. */
@media(prefers-reduced-motion:reduce){
  .page-analytics .analytics-orbit,
  .page-analytics .analytics-orbit::before,
  .page-analytics .analytics-orbit::after,
  .page-analytics .analytics-orbit-core,
  .page-analytics .analytics-orbit-core>i,
  .page-analytics .analytics-orbit-ring,
  .page-analytics .analytics-orbit-ring.is-two,
  .page-analytics .analytics-orbit-ring i,
  .page-analytics .analytics-data-pulse,
  .page-analytics .analytics-data-pulse::before,
  .page-analytics .analytics-data-pulse::after,
  .page-analytics .analytics-thinking-copy h2,
  .page-analytics .analytics-stage.is-active::after,
  .page-analytics .analytics-stage.is-active>i,
  .page-analytics .analytics-ball-seam{
    animation:none!important;
  }
  /* Шов не «прочерчивается», а сразу нарисован. */
  .page-analytics .analytics-ball-seam path{
    animation:none!important;
    stroke-dashoffset:0;
  }
  .page-analytics .analytics-thinking-copy h2{
    -webkit-text-fill-color:var(--text);
    background:none;
  }
  .page-analytics .analytics-data-pulse::before,
  .page-analytics .analytics-data-pulse::after{opacity:0}
}

/* ============================================================
   1b. «Разбор вслух» — диалог перед подробной статистикой
   ============================================================ */
.page-analytics .analytics-dialogue{
  margin-top:34px;
  padding:22px 22px 8px;
  border:1px solid var(--border);
  border-radius:26px;
  background:var(--card);
}
.page-analytics .analytics-dialogue-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.page-analytics .analytics-dialogue-who{display:flex;align-items:center;gap:11px;min-width:0}
.page-analytics .analytics-dialogue-avatar{
  flex:0 0 34px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:11px;
  background:rgba(200,255,61,.09);
  color:var(--accent);
}
.page-analytics .analytics-dialogue-who b{display:block;font-size:12.5px;color:var(--text)}
.page-analytics .analytics-dialogue-who small{display:block;margin-top:2px;color:var(--text-faint);font-size:10px;line-height:1.4}
.page-analytics .analytics-dialogue-skip{
  flex:0 0 auto;
  height:30px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--text-dim);
  font:700 10px/1 var(--font-body);
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.page-analytics .analytics-dialogue-skip:hover{
  color:var(--text);
  border-color:var(--border-strong);
  background:rgba(255,255,255,.04);
}

.page-analytics .analytics-dialogue-thread{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 0;
}
.page-analytics .analytics-bubble{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:min(100%,660px);
  animation:ace-bubble-in .32s cubic-bezier(.2,.8,.2,1) both;
}
.page-analytics .analytics-bubble p{
  margin:0;
  padding:11px 14px;
  border-radius:16px;
  font-size:12.5px;
  line-height:1.55;
  /* Пустая реплика в момент появления не должна схлопывать пузырь. */
  min-height:19px;
  min-width:12px;
}
/* Реплика Матч&мяч — на «своей» стороне, с акцентной меткой. */
.page-analytics .analytics-bubble.is-ace p{
  border:1px solid var(--border);
  border-top-left-radius:6px;
  background:var(--bg-secondary);
  color:var(--text);
}
.page-analytics .analytics-bubble-mark{
  flex:0 0 26px;
  width:26px;height:26px;
  margin-top:2px;
  display:grid;place-items:center;
  border-radius:9px;
  background:rgba(200,255,61,.09);
  color:var(--accent);
}

/* Индикатор набора: три точки, пока Матч&мяч «формулирует». */
.page-analytics .analytics-bubble.is-typing p::after{
  content:'···';
  display:inline-block;
  color:var(--accent);
  letter-spacing:.14em;
  animation:ace-typing .9s steps(3,end) infinite;
}

@keyframes ace-bubble-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes ace-typing{
  0%{opacity:.3}
  50%{opacity:1}
  100%{opacity:.3}
}

@media(max-width:720px){
  .page-analytics .analytics-dialogue{margin-top:22px;padding:16px 15px 4px;border-radius:20px}
  .page-analytics .analytics-dialogue-head{gap:10px;flex-wrap:wrap}
  .page-analytics .analytics-bubble{max-width:100%}
  .page-analytics .analytics-bubble p{font-size:12px;padding:10px 12px}
}

@media(prefers-reduced-motion:reduce){
  .page-analytics .analytics-bubble{animation:none!important}
  .page-analytics .analytics-bubble.is-typing p::after{animation:none!important}
}

/* ============================================================
   2. Hero «Мои тренировки» на мобильном

   Управляемая фотография ставится фоном самого hero
   (.ace-content-bg-root), а маска-подложка .visual-page-hero::before
   глобально выключена хотфиксом в ace-v3.css — из-за этого текст лежал
   прямо на снимке. Возвращаем подложку и разводим слои по вертикали:
   сверху дышит фотография, ниже — тёмная плашка с текстом и действием.
   ============================================================ */
@media(max-width:900px){
  body.page-my-trainings .visual-page-hero.visual-page-hero-my-trainings.ace-content-bg-root{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:end!important;
    align-items:end!important;
    gap:18px!important;
    min-height:min(74vh,430px)!important;
    padding:22px 20px 20px!important;
    /* Кадр смещаем вверх: снимок читается полосой над текстом. */
    background-position:center 22%!important;
    background-size:cover!important;
    overflow:hidden!important;
  }

  /* Возвращаем подложку и делаем её вертикальной: верх прозрачный,
     низ — почти сплошной, чтобы текст лежал на плотном фоне. */
  body.page-my-trainings .visual-page-hero.visual-page-hero-my-trainings.ace-content-bg-root::before{
    content:''!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background:linear-gradient(
      180deg,
      rgba(9,13,8,.10) 0%,
      rgba(9,13,8,.34) 26%,
      rgba(9,13,8,.78) 52%,
      rgba(9,13,8,.94) 74%,
      rgba(9,13,8,.97) 100%
    )!important;
    pointer-events:none!important;
  }
  /* Декоративный круг поверх фотографии только шумит. */
  body.page-my-trainings .visual-page-hero.visual-page-hero-my-trainings.ace-content-bg-root::after{
    display:none!important;
  }

  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .visual-page-hero-copy{
    position:relative!important;
    z-index:2!important;
    max-width:none!important;
  }

  /* Светлый текст поверх снимка — перебиваем «тёмную» палитру v64,
     которая рассчитана на кремовый hero без фотографии. */
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root .visual-page-eyebrow{
    color:var(--accent)!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root h1{
    margin:9px 0 8px!important;
    color:#f5f9ee!important;
    font-size:clamp(33px,8.6vw,44px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    text-wrap:balance;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root p{
    max-width:36ch!important;
    color:rgba(238,244,231,.82)!important;
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  /* Действие — отдельная плашка на плотном фоне, а не карточка,
     висящая посреди фотографии. */
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-hero-actions{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    min-width:0!important;
    align-self:auto!important;
    justify-self:stretch!important;
    justify-content:flex-start!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-action-card{
    max-width:none!important;
    padding:15px 15px 14px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:18px!important;
    background:rgba(18,23,16,.62)!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.05)!important;
            backdrop-filter:blur(9px) saturate(1.05)!important;
    gap:7px!important;
    color:#eef4e7!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-action-kicker{
    color:rgba(233,241,224,.62)!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-action-kicker::before{
    background:var(--accent)!important;
    opacity:1!important;
    box-shadow:0 0 0 4px rgba(200,255,61,.12)!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-action-card>strong{
    max-width:none!important;
    color:#f4f8ed!important;
    font-size:14.5px!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-action-card>small{
    max-width:none!important;
    color:rgba(232,240,224,.66)!important;
    font-size:11px!important;
    line-height:1.45!important;
  }
}

/* Совсем узкие экраны: снимку хватает полосы, остальное — текст. */
@media(max-width:420px){
  body.page-my-trainings .visual-page-hero.visual-page-hero-my-trainings.ace-content-bg-root{
    min-height:min(78vh,410px)!important;
    padding:20px 16px 18px!important;
    gap:15px!important;
    border-radius:22px!important;
  }
  body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root p{
    max-width:32ch!important;
    font-size:12px!important;
  }
}