/* Живые схемы карточек: показывают работу системы, не украшают.
   Пропорция 400×280 (10:7) жёсткая - совпадает с карточкой ленты. */

.sch {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 280;
  background: #050505;
  border-bottom: 1px solid var(--rule);
}
.sch * { vector-effect: non-scaling-stroke; }

/* палитра схем */
.sch .wall  { stroke: #2a2724; stroke-width: 1; fill: none; }
.sch .wall2 { stroke: #1e1c1a; stroke-width: 1; fill: none; }
.sch .lbl   { fill: #5c5954; font-family: 'Manrope', sans-serif; font-size: 9px; letter-spacing: 0.06em; }
.sch .lit   { fill: #c2984a; }
.sch .brass { stroke: #9e7c34; stroke-width: 1; fill: none; }
.sch .warm  { fill: #c2984a; }

/* все анимации стоят, пока карточка вне кадра */
.sch [class*='an-'] { animation-play-state: paused; }
.s-belt__card.in .sch [class*='an-'],
.in .sch [class*='an-'] { animation-play-state: running; }

/* ── 1. СВЕТ: волна гашения, остаются две зоны ──────────── */
@keyframes lampOff {
  0%, 18%   { opacity: 1; r: 5; }
  40%, 88%  { opacity: 0.13; r: 3.4; }
  100%      { opacity: 1; r: 5; }
}
@keyframes lampStay {
  0%, 100%  { opacity: 1; }
  50%       { opacity: 0.82; }
}
@keyframes haloOn {
  0%, 22%   { opacity: 0; }
  45%, 88%  { opacity: 0.5; }
  100%      { opacity: 0; }
}
.an-lamp { animation: lampOff 7s var(--ease) infinite; }
.an-lamp:nth-of-type(1) { animation-delay: 0s; }
.an-lamp:nth-of-type(2) { animation-delay: 0.16s; }
.an-lamp:nth-of-type(3) { animation-delay: 0.32s; }
.an-lamp:nth-of-type(4) { animation-delay: 0.48s; }
.an-stay { animation: lampStay 3.4s var(--ease) infinite; }
.an-halo { animation: haloOn 7s var(--ease) infinite; }

/* ── 2. КЛИМАТ: потоки тепла своей скоростью в каждой ───── */
@keyframes flowUp {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 0.85; }
  100% { transform: translateY(-46px); opacity: 0; }
}
.an-flow { animation: flowUp 3.6s linear infinite; }
.an-flow.f2 { animation-duration: 2.6s; }
.an-flow.f3 { animation-duration: 4.8s; }
.an-flow.d1 { animation-delay: 0.6s; }
.an-flow.d2 { animation-delay: 1.4s; }

/* ── 3. ШТОРЫ: солнце по дуге, шторы за ним ────────────── */
@keyframes sunArc {
  0%   { offset-distance: 0%; opacity: 0.35; }
  50%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0.35; }
}
@keyframes curtainClose {
  0%, 12%   { transform: scaleX(0); }
  46%, 62%  { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}
.an-sun { animation: sunArc 9s ease-in-out infinite; offset-path: path('M 96 172 Q 200 74 304 172'); }
.an-curtain { animation: curtainClose 9s var(--ease) infinite; transform-origin: left center; }
.an-curtain.right { transform-origin: right center; }

/* ── 4. ЗВУК: волны от акустики в двух комнатах ─────────── */
@keyframes wave {
  0%   { r: 3; opacity: 0.9; }
  100% { r: 34; opacity: 0; }
}
.an-wave { animation: wave 2.8s var(--ease) infinite; }
.an-wave.w2 { animation-delay: 0.9s; }
.an-wave.w3 { animation-delay: 1.8s; }

/* ── 5. ОХРАНА: обход по периметру, протечка, кран ──────── */
@keyframes patrol {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
@keyframes leakBlink {
  0%, 62%   { opacity: 0; transform: scale(0.5); }
  70%       { opacity: 1; transform: scale(1); }
  78%       { opacity: 0.35; transform: scale(1); }
  86%       { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes valveTurn {
  0%, 70%   { transform: rotate(0deg); }
  86%, 100% { transform: rotate(90deg); }
}
.an-patrol { animation: patrol 8s linear infinite; offset-path: path('M 64 62 L 336 62 L 336 218 L 64 218 Z'); }
.an-leak { animation: leakBlink 8s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
.an-valve { animation: valveTurn 8s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }

/* ── 6. ДОСТУП: гость проходит калитку ─────────────────── */
@keyframes guestGo {
  0%, 6%    { offset-distance: 0%; opacity: 0; }
  12%       { opacity: 1; }
  46%       { offset-distance: 38%; }
  58%       { offset-distance: 46%; }
  88%       { offset-distance: 100%; opacity: 1; }
  96%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes gateSlide {
  0%, 38%   { transform: translateX(0); }
  52%, 66%  { transform: translateX(34px); }
  82%, 100% { transform: translateX(0); }
}
.an-guest { animation: guestGo 8s linear infinite; offset-path: path('M 46 140 L 354 140'); }
.an-gate { animation: gateSlide 8s var(--ease) infinite; }

/* ── 7. ПАНЕЛЬ: интерфейс живёт ────────────────────────── */
@keyframes rowActive {
  0%, 100%  { opacity: 0.22; }
  12%, 26%  { opacity: 1; }
}
@keyframes barGrow {
  0%   { transform: scaleY(0.25); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0.42); }
}
.an-row { animation: rowActive 6s var(--ease) infinite; }
.an-row.r2 { animation-delay: 2s; }
.an-row.r3 { animation-delay: 4s; }
.an-bar { animation: barGrow 3.2s var(--ease) infinite alternate; transform-origin: bottom; transform-box: fill-box; }
.an-bar.b2 { animation-delay: 0.3s; }
.an-bar.b3 { animation-delay: 0.6s; }
.an-bar.b4 { animation-delay: 0.9s; }
.an-bar.b5 { animation-delay: 1.2s; }
.an-bar.b6 { animation-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .sch [class*='an-'] { animation: none !important; }
}