/* ST2 ceny — карточки тарифов B06 с иллюстрациями и ритм блоков B04/B05 (гаунтлет «страницы цен», 10.10.2026).
   Подключается только шаблоном ST2 ceny (functions.php, после blocks.css). Все правила привязаны к классам,
   которые печатает лишь template-st2-ceny.php (.c-tiers-art, .c-prose-art, .c-steps-route), — на ST2 default,
   ST5 и прочих #b06 не действуют, даже если файл когда-нибудь подключат шире.
   Движение: дрейф корабля и звёздной пыли — CSS-анимации; «Движение: выкл.» (body.paused) их останавливает,
   prefers-reduced-motion снимает совсем (общее правило service.css). */

/* ── B06 · сетка и карточка ─────────────────────────────────────────── */
body.p-ceny #b06 .c-tiers-art{gap:22px}
body.p-ceny #b06 .c-tiers-art>.s-price-card{--px:26px;grid-row:span var(--tier-tracks,9);padding:0 var(--px) 26px;overflow:hidden;isolation:isolate;
  border-color:#cbbb9240;background:radial-gradient(120% 60% at 50% 0%,#e7b96e0d,transparent 60%),linear-gradient(165deg,#1c2a21,#0f1a14 78%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .5s}
body.p-ceny #b06 .c-tiers-art>.s-price-card:hover{transform:translateY(-6px);border-color:#e7b96e80;box-shadow:0 34px 70px #0009,0 0 0 1px #e7b96e1f}
body.p-ceny #b06 .c-tiers-art>.s-price-card:focus-within{border-color:#e7b96e99}
body.p-ceny #b06 .c-tiers-art>.c-featured{border-color:#e7b96e9e;background:radial-gradient(110% 55% at 50% 0%,#e7b96e24,transparent 62%),linear-gradient(165deg,#22311f,#101b15 78%);box-shadow:0 30px 70px #0008,0 0 0 1px #e7b96e2e,0 0 60px #e7b96e12}
body.p-ceny #b06 .c-tiers-art>.s-price-card.is-selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 30px 70px #0008}

/* Явная раскладка по дорожкам подсетки: 1 кадр · 2 заголовок · 3 цена · 4 «когда берут» · 5… строки · кнопка · примечание */
body.p-ceny #b06 .c-tiers-art .c-tier-art{grid-row:1}
body.p-ceny #b06 .c-tiers-art .c-tier-head{grid-row:2}
body.p-ceny #b06 .c-tiers-art .c-tier-price{grid-row:3}
body.p-ceny #b06 .c-tiers-art .c-tier-who{grid-row:4}
body.p-ceny #b06 .c-tiers-art .c-tier-row{grid-row:var(--r)}
body.p-ceny #b06 .c-tiers-art .s-price-card>.s-button{grid-row:-3}
body.p-ceny #b06 .c-tiers-art .s-price-note{grid-row:-2}

/* Кадр: обзорный экран борта — глубокий космос, звёздная пыль, рамка прицела, корабль ступени тарифа */
body.p-ceny #b06 .c-tier-art{position:relative;margin:0 calc(-1 * var(--px)) 24px;height:200px;overflow:hidden;
  border-bottom:1px solid #cbbb9233;
  background:radial-gradient(55% 75% at 22% 62%,#2f7fc426,transparent 70%),radial-gradient(45% 65% at 80% 30%,#e7b96e1c,transparent 70%),linear-gradient(180deg,#050a08,#0a1410)}
body.p-ceny #b06 .c-tier-art:before{content:'';position:absolute;inset:-40px 0 0;z-index:0;opacity:.75;
  background-image:radial-gradient(1px 1px at 12% 22%,#f6e7c3 50%,transparent 51%),radial-gradient(1px 1px at 38% 74%,#cfe3ff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 66% 18%,#f6e7c3 50%,transparent 51%),radial-gradient(1px 1px at 84% 64%,#f6e7c3 50%,transparent 51%),radial-gradient(1px 1px at 52% 44%,#9fc4ff 50%,transparent 51%),radial-gradient(1px 1px at 92% 12%,#f6e7c3 50%,transparent 51%);
  background-size:180px 120px;animation:cn-dust 40s linear infinite}
body.p-ceny #b06 .c-tier-art:after{content:'';position:absolute;inset:12px;z-index:2;pointer-events:none;
  background:linear-gradient(#e7b96e66,#e7b96e66) left top/14px 1px no-repeat,linear-gradient(#e7b96e66,#e7b96e66) left top/1px 14px no-repeat,
  linear-gradient(#e7b96e66,#e7b96e66) right top/14px 1px no-repeat,linear-gradient(#e7b96e66,#e7b96e66) right top/1px 14px no-repeat,
  linear-gradient(#e7b96e66,#e7b96e66) left bottom/14px 1px no-repeat,linear-gradient(#e7b96e66,#e7b96e66) left bottom/1px 14px no-repeat,
  linear-gradient(#e7b96e66,#e7b96e66) right bottom/14px 1px no-repeat,linear-gradient(#e7b96e66,#e7b96e66) right bottom/1px 14px no-repeat,
  repeating-linear-gradient(0deg,transparent 0 3px,#0508054d 3px 4px)}
body.p-ceny #b06 .c-tier-art img{position:absolute;z-index:1;left:50%;top:54%;width:var(--ship-w,80%);max-width:none;height:auto;
  transform:translate(-50%,-50%);mix-blend-mode:screen;filter:saturate(1.08) contrast(1.06);
  transition:translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1),filter .5s;animation:cn-drift 9s ease-in-out infinite alternate}
body.p-ceny #b06 [data-tier-level="1"] .c-tier-art img{--ship-w:66%}
body.p-ceny #b06 [data-tier-level="2"] .c-tier-art img{--ship-w:86%;animation-delay:-3s}
body.p-ceny #b06 [data-tier-level="3"] .c-tier-art img{--ship-w:98%;animation-delay:-6s}
body.p-ceny #b06 .c-tiers-art>.s-price-card:hover .c-tier-art img{translate:10px -2px;scale:1.04;filter:saturate(1.2) contrast(1.08) brightness(1.08)}
body.p-ceny #b06 .c-featured .c-tier-art{border-bottom-color:#e7b96e80;box-shadow:inset 0 -30px 40px -30px #e7b96e40}
@keyframes cn-drift{from{transform:translate(-51.5%,-48%) rotate(-.6deg)}to{transform:translate(-48.5%,-52%) rotate(.6deg)}}
@keyframes cn-dust{to{background-position:-180px 40px}}

/* Метка «чаще всего выбирают» — внутрь кадра: карточка обрезает всё, что за краем */
body.p-ceny #b06 .c-tiers-art .c-tag{top:16px;left:auto;right:18px;z-index:3;margin:0;padding:6px 12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border-radius:2px;box-shadow:0 8px 24px #e7b96e40}

/* Заголовок, цена, шкала */
body.p-ceny #b06 .c-tiers-art .c-tier-head{align-items:baseline;margin-bottom:12px}
body.p-ceny #b06 .c-tiers-art .c-tier-step{font-size:11px;color:var(--gold);letter-spacing:.12em}
body.p-ceny #b06 .c-tiers-art .c-tier-head h3{font-size:24px;letter-spacing:-.025em;line-height:1.15}
body.p-ceny #b06 .c-tiers-art .s-price{font-size:44px;letter-spacing:-.05em;line-height:1.05}
body.p-ceny #b06 .c-tiers-art .c-featured .s-price{color:#f3d9a3;text-shadow:0 0 30px #e7b96e2e}
body.p-ceny #b06 .c-tiers-art .s-price-period{gap:14px;margin-top:10px}
body.p-ceny #b06 .c-tiers-art .c-period{font-size:12px;color:#b3b9a8}
body.p-ceny #b06 .c-tiers-art .c-scale i{width:22px}
/* Карточка, где цена стоит в названии (S1019: названий тарифов в реестре нет, имя карточки — сама цена) */
body.p-ceny #b06 .c-tiers-art>.s-price-card:not(:has(.s-price)) .c-tier-head h3{font-size:36px;letter-spacing:-.045em;line-height:1.08;color:var(--paper)}
body.p-ceny #b06 .c-tiers-art>.c-featured:not(:has(.s-price)) .c-tier-head h3{color:#f3d9a3}

/* «Когда берут» и строки состава */
body.p-ceny #b06 .c-tiers-art .c-tier-who{font-size:14px;line-height:1.55;padding:14px 0 16px}
body.p-ceny #b06 .c-tiers-art .c-tier-who small{font-size:10.5px;color:var(--gold);margin-bottom:6px}
body.p-ceny #b06 .c-tiers-art .c-tier-row{padding:12px 0}
body.p-ceny #b06 .c-tiers-art .c-tier-label{font-size:11px;letter-spacing:.07em;color:#b7bea9}
body.p-ceny #b06 .c-tiers-art .c-tier-label b{color:#a99a72}
body.p-ceny #b06 .c-tiers-art .c-tier-value{font-size:14px;line-height:1.5}
/* Строка без значения — пункт состава: читается как список, а не как подпись к пустоте */
body.p-ceny #b06 .c-tiers-art .c-tier-row.is-item .c-tier-label{align-items:baseline;gap:10px;font-size:14px;line-height:1.5;letter-spacing:0;color:#d9dccb}
body.p-ceny #b06 .c-tiers-art .c-tier-row.is-item .c-tier-label b{flex:none;font-size:10.5px;letter-spacing:.1em;color:var(--gold)}

/* Кнопка: у выделенного тарифа — заливка, у остальных — контур */
body.p-ceny #b06 .c-tiers-art .s-price-card>.s-button{margin-top:22px}
body.p-ceny #b06 .c-tiers-art .c-featured:not(.is-selected)>.s-button{background:var(--paper);color:var(--ink);border-color:var(--gold)}
body.p-ceny #b06 .c-tiers-art .c-featured:not(.is-selected)>.s-button:hover{background:#fff0ce}

/* Карточки без состава (срез приёмки 10.10, S1019; шаблон печатает .c-tiers-bare, только если пусты ВСЕ
   карточки): 4 дорожки — кадр · заголовок-цена · шкала · кнопка; кнопка встаёт сразу под шкалой,
   пустых дорожек «когда берут» и примечания нет, низ карточки — по кнопке. */
body.p-ceny #b06 .c-tiers-art.c-tiers-bare .c-tier-head{margin-bottom:14px}
body.p-ceny #b06 .c-tiers-art.c-tiers-bare>.s-price-card>.c-tier-price{margin-bottom:0;align-self:start}
body.p-ceny #b06 .c-tiers-art.c-tiers-bare .s-price-card>.s-button{grid-row:4;margin-top:24px;align-self:start}
body.p-ceny #b06 .c-tiers-art.c-tiers-bare>.s-price-card{padding-bottom:24px}

@media(max-width:1150px){
  body.p-ceny #b06 .c-tiers-art>.s-price-card{--px:20px;padding:0 var(--px) 22px}
  body.p-ceny #b06 .c-tier-art{height:170px}
  body.p-ceny #b06 .c-tiers-art .s-price{font-size:36px}
  body.p-ceny #b06 .c-tiers-art>.s-price-card:not(:has(.s-price)) .c-tier-head h3{font-size:30px}
  body.p-ceny #b06 .c-tiers-art .c-tier-value,body.p-ceny #b06 .c-tiers-art .c-tier-row.is-item .c-tier-label{font-size:13px}
}
@media(max-width:900px){
  body.p-ceny #b06 .c-tiers-art>.s-price-card{--px:22px;padding:0 var(--px) 24px}
  body.p-ceny #b06 .c-tiers-art>.s-price-card:hover{transform:none}
  body.p-ceny #b06 .c-tier-art{height:clamp(150px,34vw,230px)}
  body.p-ceny #b06 [data-tier-level="1"] .c-tier-art img{--ship-w:58%}
  body.p-ceny #b06 [data-tier-level="2"] .c-tier-art img{--ship-w:74%}
  body.p-ceny #b06 [data-tier-level="3"] .c-tier-art img{--ship-w:92%}
  body.p-ceny #b06 .c-tiers-art .s-price-card>.s-button{margin-top:auto}
  body.p-ceny #b06 .c-tiers-art .s-price-card>.c-tier-row:last-of-type,body.p-ceny #b06 .c-tiers-art .c-tier-price:last-of-type{margin-bottom:22px}
}
@media(max-width:768px){
  body.p-ceny #b06 .c-tiers-art>.s-price-card{--px:20px;padding:0 var(--px) 22px}
  body.p-ceny #b06 .c-tiers-art .s-price{font-size:38px}
}
@media(max-width:560px){
  body.p-ceny #b06 .c-tiers-art .c-tag{right:14px;top:14px}
  body.p-ceny #b06 .c-tiers-art .c-tier-row.is-item .c-tier-label{font-size:14px}
}
@media(max-width:390px){
  body.p-ceny #b06 .c-tiers-art>.s-price-card{--px:18px;padding:0 var(--px) 20px}
  body.p-ceny #b06 .c-tiers-art .s-price{font-size:34px}
  body.p-ceny #b06 .c-tiers-art>.s-price-card:not(:has(.s-price)) .c-tier-head h3{font-size:28px}
}

/* ── B04 · из чего складывается цена: текст + модуль сборки из ангара Сид 3 ── */
body.p-ceny .c-prose-art{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,1fr);gap:56px;align-items:center}
body.p-ceny .c-prose-visual{position:relative;aspect-ratio:1;max-width:380px;width:100%;justify-self:end;border:1px solid #cbbb9226;border-radius:3px;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 58%,#e7b96e1f,transparent 70%),linear-gradient(180deg,#050a08,#0b1511)}
/* Проверка 18.10 (строка 12): рисунок — <img> спрайта 2×2 (верфь · seo / smm · ads) внутри окна <i>, а не фон <i>
   (фон зависел от ленивых фонов inc/lazy-bg.php и в кадре проверки стоял пустым; см. шаблон, B04). Картинка вдвое
   больше окна, сдвиг выбирает квадрант направления — те же квадранты, что у подуслуг (st2.css, .c-mech-module). */
body.p-ceny .c-prose-visual i{position:absolute;inset:4%;overflow:hidden;mix-blend-mode:screen;
  filter:saturate(1.08) contrast(1.05);animation:cn-hover 7s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 95%);mask-image:linear-gradient(180deg,#000 86%,transparent 95%)}
body.p-ceny .c-prose-visual i img{position:absolute;left:0;top:0;width:200%;height:200%;max-width:none;display:block}
body.p-ceny .c-prose-visual i img[data-module=seo]{left:-100%}
body.p-ceny .c-prose-visual i img[data-module=smm]{top:-100%}
body.p-ceny .c-prose-visual i img[data-module=ads]{left:-100%;top:-100%}
body.p-ceny .c-prose-visual:before{content:'';position:absolute;left:12%;right:12%;bottom:9%;height:18%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,#e7b96e33,transparent);filter:blur(6px)}
body.p-ceny .c-prose-visual:after{content:'';position:absolute;inset:12px;pointer-events:none;
  background:linear-gradient(#e7b96e59,#e7b96e59) left top/14px 1px no-repeat,linear-gradient(#e7b96e59,#e7b96e59) left top/1px 14px no-repeat,
  linear-gradient(#e7b96e59,#e7b96e59) right bottom/14px 1px no-repeat,linear-gradient(#e7b96e59,#e7b96e59) right bottom/1px 14px no-repeat,
  repeating-linear-gradient(0deg,transparent 0 3px,#0508054d 3px 4px)}
@keyframes cn-hover{from{transform:translateY(-1.5%)}to{transform:translateY(1.5%)}}

/* ── B05 · порядок работ: маршрут с узлами вместо ряда одинаковых плашек ── */
body.p-ceny .c-steps-route{gap:22px}
body.p-ceny .c-steps-route li{position:relative;padding:28px 26px 26px;border-color:#cbbb9238;
  background:radial-gradient(90% 60% at 0% 0%,#e7b96e0f,transparent 60%),linear-gradient(165deg,#1c2a21,#0f1a14 80%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .45s}
body.p-ceny .c-steps-route li:hover{transform:translateY(-4px);border-color:#e7b96e70;box-shadow:0 26px 56px #0008}
body.p-ceny .c-steps-route li:before{content:counter(step,decimal-leading-zero);font-size:46px;font-weight:600;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px #e7b96e99;margin-bottom:20px;transition:color .35s}
body.p-ceny .c-steps-route li:hover:before{color:#e7b96e33}
/* связка к следующему шагу: пунктир с узлом от номера до соседней карточки */
body.p-ceny .c-steps-route li:after{content:'';position:absolute;top:50px;left:100px;right:-23px;height:9px;pointer-events:none;
  background:radial-gradient(circle at 4px 50%,var(--gold) 0 3px,#e7b96e44 4px,transparent 6px) 0 0/12px 9px no-repeat,
  repeating-linear-gradient(90deg,#e7b96e73 0 6px,transparent 6px 12px) 12px 4px/calc(100% - 12px) 1px no-repeat}
body.p-ceny .c-steps-route li:nth-child(3n):after,body.p-ceny .c-steps-route li:last-child:after{right:26px}
body.p-ceny .c-steps-route b{font-size:20px}

@media(max-width:1150px){
  body.p-ceny .c-prose-art{grid-template-columns:minmax(0,1fr) 300px;gap:36px}
  body.p-ceny .c-steps-route li:nth-child(3n):after{right:-23px}
  body.p-ceny .c-steps-route li:nth-child(2n):after,body.p-ceny .c-steps-route li:last-child:after{right:26px}
}
@media(max-width:900px){
  body.p-ceny .c-prose-art{grid-template-columns:1fr;gap:28px}
  body.p-ceny .c-prose-visual{justify-self:center;max-width:300px;order:-1}
}
@media(max-width:768px){
  /* одна колонка: номер — кольцо слева, маршрут — вертикальный пунктир к следующему шагу */
  body.p-ceny .c-steps-route{gap:12px}
  body.p-ceny .c-steps-route li{padding:18px 18px 18px 60px}
  body.p-ceny .c-steps-route li:hover{transform:none}
  body.p-ceny .c-steps-route li:before{position:absolute;left:14px;top:16px;width:32px;height:32px;display:grid;place-items:center;margin:0;
    font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--gold);-webkit-text-stroke:0;border:1px solid #e7b96e80;border-radius:50%;background:#0b1511;box-shadow:0 0 14px #e7b96e26}
  body.p-ceny .c-steps-route li:after,body.p-ceny .c-steps-route li:nth-child(n):after{top:52px;bottom:-13px;left:30px;right:auto;width:1px;height:auto;
    background:repeating-linear-gradient(180deg,#e7b96e66 0 5px,transparent 5px 10px)}
  body.p-ceny .c-steps-route li:last-child:after{display:none}
  body.p-ceny .c-steps-route b{font-size:17px}
}
@media(max-width:390px){
  body.p-ceny .c-steps-route li{padding:16px 16px 16px 56px}
  body.p-ceny .c-steps-route li:before{left:12px}
  body.p-ceny .c-steps-route li:after,body.p-ceny .c-steps-route li:nth-child(n):after{left:28px}
}

/* Снижение движения: петли этого файла гасятся по самой системной настройке, без оглядки на
   body.motion-enabled — blocks.js ставит этот класс по умолчанию (движение «вкл.», пока посетитель
   не нажал кнопку), и общее правило service.css при reduce сейчас не срабатывает ни на одной странице. */
@media(prefers-reduced-motion:reduce){
  body.p-ceny #b06 .c-tier-art img,body.p-ceny #b06 .c-tier-art:before,body.p-ceny .c-prose-visual i{animation:none}
  body.p-ceny #b06 .c-tiers-art>.s-price-card,body.p-ceny #b06 .c-tier-art img,body.p-ceny .c-steps-route li{transition:none}
  body.p-ceny #b06 .c-tiers-art>.s-price-card:hover,body.p-ceny .c-steps-route li:hover{transform:none}
  body.p-ceny #b06 .c-tiers-art>.s-price-card:hover .c-tier-art img{translate:none;scale:none}
}