/*
 * V69 stack visuals · r2 «большие инфографики»
 * По приказу шефа: не виджеты, а крупные сцены уровня Apple - один
 * герой-объект на карточку, глубокий свет, спокойные живые движения.
 * 01 кристалл ядра · 02 сборка в воздухе (exploded view) · 03 гигантская
 * дуга рабочей точки · 04 большой фан и поток воздуха · 05 изометрическая
 * ферма с волной раската · 06 петля deploy/rollback.
 * Анимации живут только на .stack-card.is-current (механизм v53-journey).
 * Откат: минус файл + v69-stack.js + вернуть старые .stack-visual.
 */

/* сцены крупнее, чем родные визуалы v53 */
.stack-card > .stack-visual {
  width: 46%;
  right: 3.4%;
  height: 76%;
  transform: translateY(calc(-50% + (1 - var(--stack-progress)) * 18px)) scale(calc(0.96 + var(--stack-progress) * 0.04));
}

.stack-card .stack-visual { overflow: visible; }

/* не-текущая карточка: всё замирает */
.stack-card:not(.is-current) .stack-visual *,
.stack-card:not(.is-current) .stack-visual::before,
.stack-card:not(.is-current) .stack-visual::after { animation-play-state: paused !important; }

/* ================= 01 · КРИСТАЛЛ ЯДРА ================= */
.sg-core {
  position: relative;
  width: 100%;
  height: 100%;
}

/* печатная плата под кристаллом: тонкие дорожки во всю сцену */
.sg-core::before {
  content: "";
  position: absolute;
  inset: -4%;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(242, 195, 106, 0.07) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(242, 195, 106, 0.07) 34px 35px),
    radial-gradient(circle at 24% 30%, rgba(242, 195, 106, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 64%, rgba(242, 195, 106, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 18%, rgba(133, 214, 255, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 78%, rgba(133, 214, 255, 0.1) 0 2px, transparent 3px);
  mask-image: radial-gradient(circle at 50% 46%, black 0 42%, transparent 78%);
  pointer-events: none;
}

.sg-core-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(242, 195, 106, 0.16), transparent 46%),
    radial-gradient(circle at 42% 58%, rgba(133, 214, 255, 0.06), transparent 52%);
  animation: sgHalo 5.2s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes sgHalo {
  from { opacity: 0.7; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

.sg-die {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(64%, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: sgFloat 6.4s ease-in-out infinite;
}

@keyframes sgFloat {
  0%, 100% { transform: translate(-50%, -52%); }
  50% { transform: translate(-50%, -46%); }
}

.sg-die-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  border-radius: 22px;
  border: 1px solid rgba(255, 224, 150, 0.55);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 236, 190, 0.32), transparent 44%),
    radial-gradient(circle at 72% 80%, rgba(180, 120, 30, 0.30), transparent 52%),
    linear-gradient(155deg, #2a2113, #14100a 55%, #0a0806);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.3),
    inset 0 0 46px rgba(242, 195, 106, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 70px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.sg-die-mark {
  width: 34%;
  justify-self: center;
  height: auto;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 12px rgba(242, 195, 106, 0.35));
}

.sg-die-face b {
  color: #ffe4a3;
  font-size: clamp(15px, 1.5vw, 23px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-shadow: 0 0 20px rgba(242, 195, 106, 0.5);
}

.sg-die-face small {
  color: rgba(247, 243, 234, 0.5);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
}

/* кремниевые дорожки внутри кристалла */
.sg-traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sg-traces path {
  fill: none;
  stroke: rgba(255, 224, 150, 0.16);
  stroke-width: 1;
}

.sg-traces .sg-trace-live {
  stroke: rgba(255, 224, 150, 0.9);
  stroke-width: 1.4;
  stroke-dasharray: 10 130;
  filter: drop-shadow(0 0 4px rgba(255, 214, 130, 0.8));
  animation: sgTraceRun 2.6s linear infinite;
}

.sg-tl2 { animation-delay: 0.4s; }
.sg-tl3 { animation-delay: 0.8s; }
.sg-tl4 { animation-delay: 1.2s; }
.sg-tl5 { animation-delay: 1.6s; }
.sg-tl6 { animation-delay: 2s; }
.sg-tl7 { animation-delay: 2.4s; }
.sg-tl8 { animation-delay: 2.8s; }

@keyframes sgTraceRun { to { stroke-dashoffset: -140; } }

.sg-die-shadow {
  position: absolute;
  left: 50%;
  top: 84%;
  width: 52%;
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7), transparent 68%);
  filter: blur(6px);
  animation: sgShadowBreath 6.4s ease-in-out infinite;
}

@keyframes sgShadowBreath {
  0%, 100% { transform: translateX(-50%) scaleX(0.9); opacity: 0.9; }
  50% { transform: translateX(-50%) scaleX(1.08); opacity: 0.6; }
}

/* шины к подсистемам */
.sg-bus {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(247, 243, 234, 0.52);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
}

.sg-bus i {
  display: block;
  width: 54px;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(255, 224, 150, 0.7) 30%, transparent 30%);
  background-size: 10px 1px;
  animation: sgBusFlow 1.2s linear infinite;
}

@keyframes sgBusFlow { to { background-position: 10px 0; } }

.sg-bus--a { left: -4%; top: 16%; }
.sg-bus--b { right: -2%; top: 24%; flex-direction: row-reverse; }
.sg-bus--b i { animation-direction: reverse; }
.sg-bus--c { left: 4%; bottom: 5%; }

/* ================= 02 · ОТБОР СБОРОК (кастинг файлов) ================= */
.sg-cast {
  position: relative;
  width: 100%;
  height: 100%;
}

/* приёмник справа: ANIM07 gold-black firmware core (Бивис, WebGL).
   Плашки-сборки въезжают прямо в кольцо реактора. */
.sg-core7 {
  position: absolute;
  right: -3%;
  top: 49%;
  width: 62%;
  height: 118%;
  transform: translateY(-50%);
}

/* мягкая золотая подложка под сценой, без атмосфер поверх ядра */
.sg-core7::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 108%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 195, 106, 0.1), transparent 46%);
  pointer-events: none;
}

/* отражение в полу под постаментом */
.sg-core7::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 84%;
  height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 207, 121, 0.12), transparent 62%);
  pointer-events: none;
}

.sg-core7-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* официальный rich-лого: позицию и ширину выставляет v71-anim07.js
   проекцией центра кольца; никакого дрейфа на ховере */
.sg-core7-mark {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 24%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sg-core7-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* карточки-файлы: очередь слева, по очереди пробуют слот */
.sg-file {
  position: absolute;
  left: 4%;
  display: grid;
  gap: 3px;
  padding: 11px 15px;
  border-radius: 11px;
  border: 1px solid rgba(247, 243, 234, 0.16);
  background: linear-gradient(160deg, rgba(20, 26, 33, 0.96), rgba(8, 10, 13, 0.97));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.sg-file small {
  color: rgba(247, 243, 234, 0.4);
  font-size: 7px;
  font-weight: 760;
  letter-spacing: 0.2em;
}

.sg-file b {
  color: var(--ivory, #f7f3ea);
  font-size: 11.5px;
  font-weight: 640;
  font-family: "SF Mono", "Menlo", monospace;
}

/* приказ 29.07: РЕВЕРС - колесо ВЫДАЁТ официальные сборки, все FREE.
   Плашки рождаются в кольце (масштаб .6, прозрачно), вылетают влево,
   зависают с бейджем FREE и растворяются. Никаких красных вердиктов. */
.sg-file--eject1 { top: 16%; animation: sgEject1 9s cubic-bezier(0.22, 0.68, 0.28, 1) infinite; }
.sg-file--eject2 { top: 42%; animation: sgEject2 9s cubic-bezier(0.22, 0.68, 0.28, 1) infinite; }
.sg-file--eject3 { top: 68%; animation: sgEject3 9s cubic-bezier(0.22, 0.68, 0.28, 1) infinite; }

@keyframes sgEject1 {
  0%, 2% { opacity: 0; transform: translate(124%, 21%) scale(0.6); }
  7% { opacity: 1; border-color: rgba(255, 214, 130, 0.9); box-shadow: 0 0 30px rgba(255, 206, 110, 0.5); }
  20% { transform: translate(0, 0) scale(1); border-color: rgba(247, 243, 234, 0.16); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
  84% { opacity: 1; transform: translate(0, 0) scale(1); }
  94%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

@keyframes sgEject2 {
  0%, 26% { opacity: 0; transform: translate(124%, -5%) scale(0.6); }
  31% { opacity: 1; border-color: rgba(255, 214, 130, 0.9); box-shadow: 0 0 30px rgba(255, 206, 110, 0.5); }
  44% { transform: translate(0, 0) scale(1); border-color: rgba(247, 243, 234, 0.16); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
  86% { opacity: 1; transform: translate(0, 0) scale(1); }
  96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

@keyframes sgEject3 {
  0%, 50% { opacity: 0; transform: translate(124%, -31%) scale(0.6); }
  55% { opacity: 1; border-color: rgba(255, 214, 130, 0.9); box-shadow: 0 0 30px rgba(255, 206, 110, 0.5); }
  68% { transform: translate(0, 0) scale(1); border-color: rgba(247, 243, 234, 0.16); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
  88% { opacity: 1; transform: translate(0, 0) scale(1); }
  97%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

.sg-file--eject3 b { color: #ffe4a3; }

/* бейдж FREE: главная мысль - сборки бесплатны */
.sg-free {
  position: absolute;
  right: -10px;
  top: -11px;
  padding: 4px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 820;
  letter-spacing: 0.18em;
  color: #241a08;
  background: linear-gradient(120deg, #e7c77d 10%, #f4dda4 55%, #b98f43 130%);
  box-shadow: 0 0 14px rgba(255, 206, 110, 0.55);
}

/* плашка FREE OF CHARGE в шапке downloads (приказ 29.07: мысль бесплатности
   должна быть заметной) */
.vault-free {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 20px 12px 14px;
  border: 1px solid rgba(231, 199, 125, 0.42);
  border-radius: 999px;
  background:
    radial-gradient(circle at 8% 50%, rgba(231, 199, 125, 0.16), transparent 46%),
    linear-gradient(165deg, rgba(23, 27, 28, 0.85), rgba(9, 11, 12, 0.94));
  box-shadow: 0 0 26px rgba(231, 199, 125, 0.12);
}
.vault-free i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9b8, #cf9a2e 72%);
  box-shadow: 0 0 12px rgba(255, 206, 110, 0.8);
  animation: vaultFreePulse 2.6s ease-in-out infinite;
}
@keyframes vaultFreePulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.vault-free b {
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.22em;
  background: linear-gradient(120deg, #e7c77d 15%, #f4dda4 55%, #8f692f 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.vault-free span { color: var(--muted, #9c9b96); font-size: 11.5px; letter-spacing: 0.04em; }
@media (max-width: 760px) {
  .vault-free { flex-wrap: wrap; border-radius: 18px; }
}

/* ================= 03 · ГИГАНТСКАЯ ДУГА ================= */
.sg-gauge {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: end;
}

.sg-gauge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sg-arc-track {
  fill: none;
  stroke: rgba(247, 243, 234, 0.1);
  stroke-width: 10;
  stroke-linecap: round;
}

.sg-arc-fill {
  fill: none;
  stroke: url(#sgArc);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 630;
  stroke-dashoffset: calc(630 - var(--sg-arc, 320));
  filter: drop-shadow(0 0 12px rgba(242, 195, 106, 0.3));
  transition: stroke-dashoffset 0.2s linear;
}

.sg-cursor-glow {
  fill: rgba(255, 224, 150, 0.22);
  animation: sgCursorBreath 2.6s ease-in-out infinite;
}

.sg-cursor-dot {
  fill: #ffe4a3;
  stroke: rgba(20, 14, 4, 0.8);
  stroke-width: 2;
}

@keyframes sgCursorBreath {
  0%, 100% { r: 15; opacity: 0.8; }
  50% { r: 21; opacity: 1; }
}

.sg-gauge-read {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-bottom: 42px;
  text-align: center;
}

.sg-gauge-read b {
  color: var(--ivory, #f7f3ea);
  font-size: clamp(54px, 5.6vw, 86px);
  font-weight: 380;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.sg-gauge-read small {
  color: rgba(242, 195, 106, 0.85);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.3em;
}

.sg-gauge-read span {
  margin-top: 6px;
  color: rgba(247, 243, 234, 0.5);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sg-gauge-legend {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding-bottom: 4px;
}

.sg-gauge-legend span {
  color: rgba(247, 243, 234, 0.4);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.26em;
  cursor: pointer;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.sg-gauge-legend span.is-live {
  color: #ffe4a3;
  text-shadow: 0 0 14px rgba(242, 195, 106, 0.5);
}

.sg-gauge-note {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0 2px;
}

.sg-gauge-note b {
  color: rgba(140, 226, 168, 0.9);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.06em;
}

.sg-gauge-note span {
  color: rgba(247, 243, 234, 0.34);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

/* ================= 04 · БОЛЬШОЙ ФАН И ПОТОК ================= */
.sg-airflow {
  position: relative;
  width: 100%;
  height: 100%;
}

.sg-flowlines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sg-flow {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 26 84;
  animation: sgFlowRun 2.1s linear infinite;
}

.sg-flow-in { stroke: rgba(133, 214, 255, 0.55); }
.sg-flow-in2 { stroke: rgba(133, 214, 255, 0.42); animation-delay: 0.4s; }
.sg-flow-in3 { stroke: rgba(133, 214, 255, 0.55); animation-delay: 0.8s; }
.sg-flow-out { stroke: rgba(255, 190, 110, 0.6); animation-delay: 0.2s; }
.sg-flow-out2 { stroke: rgba(255, 190, 110, 0.45); animation-delay: 0.6s; }
.sg-flow-out3 { stroke: rgba(255, 190, 110, 0.6); animation-delay: 1s; }

@keyframes sgFlowRun { to { stroke-dashoffset: -110; } }

.sg-fanwall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72%, 360px);
  aspect-ratio: 1026 / 1017;
  transform: translate(4%, -50%);
  opacity: 0.4;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.6));
}

/* движение только справа к центру, стоп в центре; влево не уходит */
.stack-card.is-current .sg-fanwall {
  animation: sgArriveRight 1.15s cubic-bezier(0.2, 0.8, 0.24, 1) 0.12s both;
}

@keyframes sgArriveRight {
  from { transform: translate(4%, -50%); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}

.sg-fanwall > img.sg-fanbase {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* дышащий ореол периметра: размытый двойник поверх запечённого контура */
.sg-fanhalo {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(11px) saturate(1.7) brightness(1.4);
  mix-blend-mode: screen;
  animation: sgHaloBreath 3.4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes sgHaloBreath {
  from { opacity: 0.32; }
  to { opacity: 0.75; }
}

/* настоящие лопасти vnish.com: вырезанные из фото диски, вращаются */
.sg-fandisc {
  position: absolute;
  height: auto;
  border-radius: 50%;
  pointer-events: none;
}

.sg-fandisc { filter: blur(1.5px) brightness(0.98); }
.sg-fandisc--top { left: 30.4%; top: 14.7%; width: 34.1%; animation: sgSpin 5.2s linear infinite; }
.sg-fandisc--bottom { left: 30.4%; top: 53.6%; width: 34.1%; animation: sgSpin 5.2s linear infinite; }

/* статичный гриль поверх вращения: сетка не крутится */
.sg-grill {
  position: absolute;
  pointer-events: none;
}

.sg-grill--top { left: 30.4%; top: 14.7%; width: 34.1%; height: auto; }
.sg-grill--bottom { left: 30.4%; top: 53.6%; width: 34.1%; height: auto; }

.sg-grill-wire {
  fill: none;
  stroke: rgba(16, 14, 10, 0.85);
  stroke-width: 3.4;
}

.sg-grill-wire circle:first-child { stroke-width: 4.2; }

.sg-grill-hub {
  fill: rgba(14, 12, 9, 0.95);
  stroke: rgba(255, 206, 110, 0.3);
  stroke-width: 1;
}

@keyframes sgSpin { to { transform: rotate(360deg); } }

/* дыхание золотых колец */
.sg-goldbreath {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 47% 30%, rgba(255, 206, 110, 0.2), transparent 24%),
    radial-gradient(circle at 47% 69%, rgba(255, 206, 110, 0.18), transparent 24%),
    radial-gradient(circle at 77% 31%, rgba(255, 206, 110, 0.13), transparent 14%),
    radial-gradient(circle at 77% 49%, rgba(255, 206, 110, 0.11), transparent 13%);
  mix-blend-mode: screen;
  animation: sgGoldBreath 3.8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes sgGoldBreath {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.sg-temp {
  position: absolute;
  display: grid;
  gap: 2px;
  text-align: center;
}

.sg-temp b { font-size: 17px; font-weight: 700; }
.sg-temp small { color: rgba(247, 243, 234, 0.42); font-size: 8px; font-weight: 700; letter-spacing: 0.26em; }

.sg-temp--in { left: 2%; top: 8%; }
.sg-temp--in b { color: #9fd4ff; }
.sg-temp--out { right: 2%; top: 8%; }
.sg-temp--out b { color: #ffbe6e; }

/* ================= 05 · СЧЁТЧИК ВОЛН МАСШТАБА ================= */
.sg-scale {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 2vw, 26px);
}

.sg-scale-read {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.sg-scale-read b {
  color: var(--ivory, #f7f3ea);
  font-size: clamp(84px, 9vw, 148px);
  font-weight: 340;
  letter-spacing: -0.055em;
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(242, 195, 106, 0.18);
}

.sg-scale-read small {
  color: rgba(247, 243, 234, 0.46);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.3em;
}

.sg-scale-troop {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 5px;
  width: min(84%, 380px);
}

.sg-scale-troop i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(247, 243, 234, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sg-scale-troop i.is-lit {
  background: linear-gradient(160deg, #f6d488, #c08c2e);
  box-shadow: 0 0 8px rgba(242, 195, 106, 0.55);
}

.sg-scale-bar {
  position: relative;
  overflow: visible;
  width: min(76%, 330px);
  height: 3px;
  border-radius: 99px;
  background: rgba(247, 243, 234, 0.1);
  overflow: hidden;
}

.sg-mark {
  position: absolute;
  top: 9px;
  transform: translateX(-50%);
  color: rgba(247, 243, 234, 0.36);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.sg-mark--1 { left: 12%; }
.sg-mark--2 { left: 42%; }
.sg-mark--3 { left: 100%; }

.sg-scale-bar i {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--sg-wave, 0));
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(133, 214, 255, 0.8), rgba(242, 195, 106, 0.95));
  box-shadow: 0 0 14px rgba(242, 195, 106, 0.4);
}

.sg-scale-stages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.sg-scale-stages em { color: rgba(247, 243, 234, 0.3); font-style: normal; font-size: 10px; }

.sg-scale-stages span {
  color: rgba(247, 243, 234, 0.4);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.26em;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.sg-scale-stages span.is-live {
  color: #ffe4a3;
  text-shadow: 0 0 12px rgba(242, 195, 106, 0.5);
}

/* ================= 06 · ТУМБЛЕР ОТКАТА ================= */
.sg-switch {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
}

.sg-switch-state {
  display: grid;
  gap: 6px;
  text-align: center;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.sg-switch-state small {
  color: rgba(247, 243, 234, 0.42);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.28em;
}

.sg-switch-state b {
  color: var(--ivory, #f7f3ea);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 380;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.sg-switch-state b em {
  font-style: normal;
  font-size: 0.38em;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(247, 243, 234, 0.5);
}

.sg-switch-state span {
  color: rgba(247, 243, 234, 0.48);
  font-size: 11px;
  line-height: 1.45;
}

.sg-switch[data-state="stock"] .sg-switch-state--vnish,
.sg-switch[data-state="vnish"] .sg-switch-state--stock { opacity: 0.32; filter: saturate(0.6); }

.sg-switch[data-state="vnish"] .sg-switch-state--vnish b { color: #ffe4a3; text-shadow: 0 0 22px rgba(242, 195, 106, 0.35); }
.sg-switch[data-state="stock"] .sg-switch-state--stock b { color: #cfe4f6; text-shadow: 0 0 22px rgba(133, 214, 255, 0.3); }

/* корпус тумблера */
.sg-switch-pill {
  position: relative;
  width: clamp(150px, 13vw, 210px);
  height: clamp(64px, 5.6vw, 88px);
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 234, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%),
    linear-gradient(180deg, rgba(6, 8, 11, 0.9), rgba(12, 15, 19, 0.95));
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.5);
}

.sg-switch-thumb {
  position: absolute;
  top: 7%;
  left: 4%;
  width: 46%;
  height: 86%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(160deg, #e8ecf0, #9aa5ad 68%, #6d767d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -6px 12px rgba(0, 0, 0, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.55);
  transition: left 0.65s cubic-bezier(0.34, 1.3, 0.4, 1), background 0.65s ease;
}

.sg-switch[data-state="vnish"] .sg-switch-thumb {
  left: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 248, 222, 0.75), transparent 36%),
    linear-gradient(160deg, #ffe6a8, #d9a53f 68%, #97671b);
}

.sg-switch-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(247, 243, 234, 0.4);
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  letter-spacing: 0.2em;
  transition: color 0.5s ease;
}

.sg-switch-label {
  width: 46%;
  text-align: center;
}

.sg-switch-label--l { left: 4%; }
.sg-switch-label--r { right: 4%; }

.sg-switch[data-state="stock"] .sg-switch-label--l { color: #cfe4f6; }
.sg-switch[data-state="vnish"] .sg-switch-label--r { color: #1d1504; }

/* возвратная стрелка-подпись */
.sg-switch-return {
  position: absolute;
  left: 50%;
  bottom: 2%;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

.sg-switch-return svg {
  width: 88px;
  height: 26px;
  fill: none;
  stroke: rgba(247, 243, 234, 0.42);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sg-switch-return .sg-ret-head { fill: rgba(247, 243, 234, 0.42); stroke: none; }

.sg-switch-return span {
  color: rgba(247, 243, 234, 0.4);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

/* ================= адаптив ================= */
@media (max-width: 1120px) {
  .stack-card > .stack-visual { width: 52%; right: 2%; }
}

@media (max-width: 760px) {
  /* 02: кастинг умещается в узкий кадр */
  .sg-core7 { right: -6%; width: 74%; height: 106%; }
  .sg-file { left: 0; padding: 8px 10px; }
  .sg-file b { font-size: 9px; }
  .sg-file small { font-size: 6px; }

  /* 04: майнер всегда в центре, без предсостояния */
  .sg-fanwall { width: 82%; transform: translate(-50%, -50%); opacity: 1; }
  .stack-card.is-current .sg-fanwall { animation: none; }
  .sg-temp--in { left: 0; top: 16%; }
  .sg-temp--out { right: 0; top: 16%; }

  .stack-track .stack-card { display: block !important; }

  .stack-track .stack-card > .stack-visual {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 320px !important;
    margin-top: 18px;
    transform: none !important;
    opacity: 1 !important;
  }
  .stack-card > .stack-copy { max-width: 100%; }
  .sg-gauge-read b { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-visual *, .stack-visual::before, .stack-visual::after { animation: none !important; }
  .sg-arc-fill { stroke-dashoffset: 310; }
}

/* р7: бесплатность обозначена в самой сцене колеса - значимо, вне чёрного круга */
.sg-core7-free {
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%);
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 130, 0.55);
  background: rgba(9, 11, 12, 0.82);
  color: transparent;
  background-image: linear-gradient(120deg, #e7c77d 15%, #f4dda4 55%, #b98f43 120%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 12.5px;
  font-weight: 820;
  letter-spacing: 0.24em;
  white-space: nowrap;
  box-shadow: 0 0 22px rgba(255, 206, 110, 0.28);
  animation: sgFreePulse 3s ease-in-out infinite;
}
@keyframes sgFreePulse { 0%, 100% { box-shadow: 0 0 16px rgba(255, 206, 110, 0.2); } 50% { box-shadow: 0 0 30px rgba(255, 206, 110, 0.45); } }