/* Октаграмма. Схема лежит прямо в потоке страницы: высоту SVG берёт из
   своих пропорций, никакой рамки и обрезки. */

.star-chart{
  margin:18px auto 6px;
  max-width:416px;
}
.star-chart svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;   /* подписи по краям не должны срезаться */
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.12));
}

/* ── Появление ──────────────────────────────────────────────────
   Сначала прочерчивается личный квадрат, потом проступает родовой,
   тянутся лучи, и числа всплывают по очереди. */

.star-sq{
  stroke-dasharray:1400;
  stroke-dashoffset:0;
  animation:star-draw .84s cubic-bezier(.34,0,.2,1) both;
}
@keyframes star-draw{ from{ stroke-dashoffset:1400 } to{ stroke-dashoffset:0 } }

/* Base state stays visible. `both` supplies the hidden animation frame while
   the animation is active, but a paused/throttled mobile browser can never
   leave the actual matrix permanently invisible. */
.star-sq-b{ opacity:1; animation:star-in .44s both }
.star-spoke{ opacity:1; animation:star-in .4s both }
.star-label{ opacity:1; animation:star-in .42s both }
@keyframes star-in{ from{ opacity:0 } to{ opacity:1 } }

.star-node{
  opacity:1;
  animation:star-pop .5s cubic-bezier(.18,.86,.24,1.08) both;
}
@keyframes star-pop{
  0%{ opacity:0; transform:scale(.36) }
  72%{ opacity:1; transform:scale(1.085) }
  100%{ opacity:1; transform:scale(1) }
}

/* ── Отклик на касание ── */
.star-hit{ cursor:pointer }
.star-bg{ transition:fill .2s, stroke .2s }
.star-val{ transition:fill .2s }
.star-hit:hover .star-bg{ stroke:#C89B4C; fill:rgba(200,155,76,.14) }
.star-hit:hover .star-val{ fill:#C89B4C }
.star-hit:active .star-bg{ fill:rgba(200,155,76,.22) }

/* Парная матрица: две звезды рядом на широком экране, друг под другом
   на узком. Переключение только медиазапросом, без замеров на лету. */
.star-wide{ max-width:660px; display:block }
.star-tall{ display:none }
@media (max-width:560px){
  .star-wide{ display:none }
  .star-tall{ display:block; max-width:366px }
}

.star-note{
  margin:4px auto 0;
  max-width:420px;
  text-align:center;
  font:400 12px/1.6 var(--ui,Arial,sans-serif);
  color:#B9AEC0;
}
.star-note b{ color:#C89B4C; font-weight:600 }

/* Кому анимация мешает — тем сразу готовая схема. */
@media (prefers-reduced-motion:reduce){
  .star-sq,.star-sq-b,.star-spoke,.star-node,.star-label{
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
  }
}

/* На печати анимации нет, схема должна быть целиком видна. */
@media print{
  .star-sq,.star-sq-b,.star-spoke,.star-node,.star-label{
    animation:none!important; opacity:1!important;
    stroke-dashoffset:0!important; transform:none!important;
  }
  .star-chart{ page-break-inside:avoid; break-inside:avoid }
  .star-tall{ display:none }
  .star-wide{ display:block }
}

/* v3.0.2 · after the reveal, the calculated matrix keeps a very subtle organic motion. */
.star-chart svg{transform-origin:center center;animation:star-idle 5.4s cubic-bezier(.45,.02,.55,.98) 2.15s infinite alternate}
.star-bg{animation:star-ring-breathe 3.8s ease-in-out 2.3s infinite alternate}
@keyframes star-idle{0%{transform:translate3d(-1px,1px,0) rotate(-.08deg)}45%{transform:translate3d(1.5px,-3.5px,0) rotate(.10deg)}100%{transform:translate3d(-.5px,1px,0) rotate(-.04deg)}}
@keyframes star-ring-breathe{0%{stroke-opacity:.72}100%{stroke-opacity:1}}
@media(prefers-reduced-motion:reduce){.star-chart svg,.star-bg{animation:none!important}}

/* v3.0.4 · Схема расчёта стоит неподвижно.

   Раньше качался весь чертёж целиком: при чтении длинного текста рядом
   с шевелящейся картинкой глаз устаёт и появляется ощущение тошноты.
   Оставляем движение только там, где оно не мешает читать — мягкое
   свечение обводки кружков. */
.star-chart svg{ animation:none!important; transform:none!important }
.star-bg{ animation:star-ring-soft 6.5s ease-in-out 2.4s infinite alternate }
@keyframes star-ring-soft{ 0%{ stroke-opacity:.82 } 100%{ stroke-opacity:1 } }

/* Числа внутри кружков не трогаем вовсе: любое их движение читается как
   дрожание текста. */
.star-val{ animation:none!important }


/* v3.0.5 · Result ambient motion: the calculated matrix itself stays locked
   in place. Only tiny distant specks drift and shimmer around it. */
.star-chart{position:relative;isolation:isolate}
.star-chart:before,.star-chart:after{
  content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;pointer-events:none;z-index:-1;background:#c89b4c;opacity:.22
}
.star-chart:before{
  box-shadow:-202px -78px 0 rgba(200,155,76,.48),187px -112px 0 rgba(237,230,218,.36),214px 38px 0 rgba(200,155,76,.36),-176px 126px 0 rgba(237,230,218,.30),-126px -151px 0 rgba(200,155,76,.34),94px 169px 0 rgba(200,155,76,.35),32px -187px 0 rgba(237,230,218,.28),-216px 31px 0 rgba(237,230,218,.22);
  animation:star-speck-a 15s ease-in-out infinite alternate
}
.star-chart:after{
  width:1.5px;height:1.5px;background:#ede6da;
  box-shadow:-189px 92px 0 rgba(237,230,218,.34),154px 143px 0 rgba(200,155,76,.40),181px -61px 0 rgba(237,230,218,.27),-82px 181px 0 rgba(200,155,76,.34),-39px -178px 0 rgba(200,155,76,.31),118px -145px 0 rgba(237,230,218,.30);
  animation:star-speck-b 20s ease-in-out infinite alternate
}
@keyframes star-speck-a{0%{transform:translate(-50%,-50%) translate3d(-1px,2px,0);opacity:.14}52%{opacity:.48}100%{transform:translate(-50%,-50%) translate3d(4px,-4px,0);opacity:.25}}
@keyframes star-speck-b{0%{transform:translate(-50%,-50%) translate3d(2px,-2px,0);opacity:.12}44%{opacity:.40}100%{transform:translate(-50%,-50%) translate3d(-4px,3px,0);opacity:.22}}
.star-bg{animation:star-ring-soft 8.5s ease-in-out 2.4s infinite alternate}
@media(max-width:560px){.star-chart:before,.star-chart:after{transform:scale(.82)}}
@media(prefers-reduced-motion:reduce){.star-chart:before,.star-chart:after{animation:none!important}}