/* ===== Методика внедрения: сцены по шагам ===== */
.method .section__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.method .section__head h2 { font-size: clamp(30px, 3.8vw, 48px); }
@media (max-width: 900px) { .method .section__head { grid-template-columns: 1fr; } }
.eyebrow { font: 700 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }
.method__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.method__stage { position: sticky; top: 92px; }
.stage-box { position: relative; aspect-ratio: 3 / 2; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(15, 19, 24, .45); }
.stage-box .scene { position: absolute; inset: 3%; width: 94%; height: 94%; opacity: 0; transition: opacity .45s ease; }
.stage-box .scene.is-on { opacity: 1; }
.method__rail { list-style: none; margin: 18px 0 0; padding: 0; display: flex; justify-content: center; gap: 10px; }
.method__rail button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--steel); font: 700 14px var(--f-display); cursor: pointer; transition: background .25s, border-color .25s, color .25s, transform .25s; }
.method__rail .is-done button { border-color: var(--ink); color: var(--ink); }
.method__rail .is-active button { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); transform: scale(1.12); }

.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; min-height: 56vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0 24px 32px; border-left: 3px solid var(--line); opacity: .38; transition: opacity .35s, border-color .35s; }
.step:first-child { min-height: 46vh; }
.step::before { content: ''; position: absolute; left: -9px; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: var(--floor-2); border: 3px solid var(--line); transition: background .35s, border-color .35s; }
.step.is-active { opacity: 1; border-left-color: var(--tape); }
.step.is-active::before { background: var(--tape); border-color: var(--ink); }
.step__n { font: 700 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.step h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; }
.step p { color: var(--steel); }
.step .step__out { color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.step .step__out::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 4px; background: var(--tape) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%231B2330' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.step__link { align-self: flex-start; font-weight: 600; text-decoration-color: var(--tape); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.step__scene { display: none; }
.method__pre { margin-top: clamp(32px, 4vw, 48px); padding: 18px 22px; background: var(--panel); border-radius: 6px; border-left: 4px solid var(--tape); color: var(--steel); }
.method__pre a { color: var(--ink); font-weight: 600; text-decoration-color: var(--tape); text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  .method__grid { grid-template-columns: 1fr; }
  .method__stage { display: none; }
  .step, .step:first-child { min-height: 0; opacity: 1; border-left: 0; padding: 0 0 48px; }
  .step::before { display: none; }
  .step__scene { display: block; position: relative; aspect-ratio: 3 / 2; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .step__scene .scene { position: absolute; inset: 3%; width: 94%; height: 94%; }
}

/* --- общие элементы сцен --- */
.scene text { font-family: var(--f-text); font-size: 13px; fill: var(--ink); }
.scene .s-h { font: 700 20px var(--f-display); }
.scene .s-mut { fill: var(--steel); font-size: 11.5px; }
.scene .s-big { font: 700 22px var(--f-display); }
@keyframes s-draw { from { stroke-dashoffset: var(--len, 200); } }
@keyframes s-pop { from { opacity: 0; transform: translateY(12px); } }
@keyframes s-slide { from { opacity: 0; transform: translateX(-26px); } }
@keyframes s-scale { from { opacity: 0; transform: scale(0); } }
@keyframes s-grow { from { transform: scaleX(0); } }
@keyframes s-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 1. Договор */
.s-paper { fill: var(--floor); stroke: var(--ink); stroke-width: 2; }
.s-lines line { stroke: var(--line); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 160; --len: 160; }
.is-on .s-lines line { animation: s-draw .5s ease-out var(--d, 0s) both; }
.s-tab rect { fill: var(--panel); stroke: var(--steel); stroke-width: 1.5; }
.scene .s-tab text { font-weight: 600; font-size: 12px; }
.scene .s-tab .s-tab__sub { font-weight: 400; font-size: 10.5px; fill: var(--steel); }
.s-tab:first-of-type rect { stroke: var(--tape); stroke-width: 2.5; }
.is-on .s-tab { animation: s-slide .45s cubic-bezier(.2,.8,.2,1) var(--d) both; }
.s-signline { stroke: var(--steel); stroke-width: 1; }
.s-sign { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; --len: 200; }
.is-on .s-sign { animation: s-draw 1s ease-in-out 1.5s both; }
.s-stamp { transform-box: fill-box; transform-origin: center; transform: rotate(-12deg); }
.s-stamp circle { fill: none; stroke: #C0392B; stroke-width: 2.5; }
.s-stamp circle + circle { stroke-width: 1; }
.scene .s-stamp text { fill: #C0392B; font: 700 8px var(--f-display); letter-spacing: 0; }
@keyframes s-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 60% { opacity: 1; transform: rotate(-12deg) scale(.9); } 100% { transform: rotate(-12deg) scale(1); } }
.is-on .s-stamp { animation: s-stamp .5s ease-out 2.6s both; }
.s-pen { opacity: 0; }
.s-pen path { fill: var(--tape); stroke: #1B2330; stroke-width: 1.5; }
@keyframes s-pen { 0% { opacity: 0; transform: translate(166px, 254px); } 12% { opacity: 1; } 88% { opacity: 1; transform: translate(250px, 248px); } 100% { opacity: 0; transform: translate(256px, 244px); } }
.is-on .s-pen { animation: s-pen 1.05s ease-in-out 1.5s both; }

/* 2. Условия */
.s-wifi path { fill: none; stroke: var(--tape); stroke-width: 6; stroke-linecap: round; }
.s-wifi circle { fill: var(--tape); }
.is-on .s-wifi path { animation: s-blink 1.8s ease-in-out infinite; }
.is-on .s-wifi path:nth-child(2) { animation-delay: .2s; }
.is-on .s-wifi path:nth-child(1) { animation-delay: .4s; }
.s-rack { fill: #1B2330; }
.s-unit rect { fill: #3A4757; }
.scene .s-unit text { fill: #E8EBEE; font: 700 12px var(--f-display); }
.s-led { fill: #3BB273; }
.s-led--b { fill: #F5C400; }
.is-on .s-led { animation: s-blink 1.1s steps(2) infinite; }
.is-on .s-led--b { animation-duration: .7s; }
.is-on .s-unit { animation: s-pop .45s ease-out var(--d) both; }
.s-checks rect { fill: var(--tape); stroke: var(--ink); stroke-width: 2; }
.s-checks path { fill: none; stroke: #1B2330; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; --len: 24; }
.scene .s-checks text { font-size: 14.5px; font-weight: 500; }
@keyframes s-box { from { fill: var(--panel); } }
.is-on .s-checks g { animation: s-pop .4s ease-out var(--d) both; }
.is-on .s-checks rect { animation: s-box .2s linear calc(var(--d) + .25s) both; }
.is-on .s-checks path { animation: s-draw .3s ease-out calc(var(--d) + .3s) both; }

/* 3. Выезд инженера */
.s-floor { fill: var(--floor); stroke: var(--steel); stroke-width: 2; }
.s-racks rect { fill: color-mix(in srgb, var(--steel) 34%, var(--panel)); }
.s-zone { fill: none; stroke: var(--tape); stroke-width: 2.5; stroke-dasharray: 8 6; }
.s-gate { fill: var(--steel); }
.s-trail { fill: none; stroke: var(--tape); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 9; }
.s-eng circle { fill: #1B2330; stroke: var(--panel); stroke-width: 2.5; }
.s-eng path { fill: #F5C400; stroke: #1B2330; stroke-width: 1.5; }
.s-note rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; }
.scene .s-note text { font-weight: 600; font-size: 12.5px; }
.scene .s-note .s-note__sub { font-weight: 400; font-size: 10.5px; fill: var(--steel); }
.is-on .s-note { animation: s-pop .4s cubic-bezier(.2,.8,.2,1.4) var(--d) both; }
.s-clip rect { fill: #1B2330; }
.scene .s-clip text { fill: #F5C400; font: 600 12.5px var(--f-text); }
.scene .s-clip tspan { font-weight: 700; }

/* 4. Девплан */
.scene .s-weeks text { fill: var(--steel); font-size: 11px; }
.s-grid line { stroke: var(--line); stroke-dasharray: 3 4; }
.scene .s-rows text { font-size: 13px; font-weight: 500; }
.s-bars rect { fill: var(--tape); transform-box: fill-box; transform-origin: left center; }
.s-bars .s-bar--alt { fill: color-mix(in srgb, var(--tape) 42%, var(--panel)); stroke: var(--tape); stroke-width: 1.5; }
.s-bars .s-bar--dark { fill: var(--steel); }
.is-on .s-bars rect { animation: s-grow .65s cubic-bezier(.2,.8,.2,1) var(--d) both; }
.s-mile path { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.is-on .s-mile path { animation: s-scale .35s cubic-bezier(.2,.8,.2,1.6) var(--d) both; }
.s-today { stroke: #C0392B; stroke-width: 2; stroke-dasharray: 4 4; }
@keyframes s-today { from { transform: translateX(-104px); } }
.is-on .s-today { animation: s-today 1.8s ease-in-out .2s both; }

/* 5. Разработка */
.s-track { stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.s-node circle { fill: var(--panel); stroke: var(--ink); stroke-width: 2.5; }
.scene .s-node text { font: 700 10.5px var(--f-display); }
.s-node--prod circle { fill: var(--tape); stroke: var(--tape); }
.scene .s-node--prod text { fill: #1B2330; }
.s-node { transform-box: fill-box; transform-origin: center; }
.is-on .s-node { animation: s-scale .4s cubic-bezier(.2,.8,.2,1.4) var(--d) both; }
.s-box { opacity: 0; transform: translate(430px, 120px); }
.s-box rect { fill: var(--tape); stroke: #1B2330; stroke-width: 2; }
.s-box path { stroke: #1B2330; stroke-width: 2; fill: none; }
@keyframes s-ship {
  0% { opacity: 1; transform: translate(50px, 120px); } 18% { transform: translate(177px, 120px); } 30% { transform: translate(177px, 120px); }
  50% { transform: translate(304px, 120px); } 70% { transform: translate(304px, 120px); } 90% { opacity: 1; transform: translate(430px, 120px) scale(1); } 100% { opacity: 0; transform: translate(430px, 120px) scale(.3); }
}
.is-on .s-box { animation: s-ship 3.2s ease-in-out .3s both; }
.s-ok circle { fill: #3BB273; }
.s-ok path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.s-ok { transform-box: fill-box; transform-origin: center; }
.is-on .s-ok { animation: s-scale .35s cubic-bezier(.2,.8,.2,1.6) var(--d) both; }
.s-testbar { fill: var(--floor-2); }
.s-testfill { fill: #3BB273; transform-box: fill-box; transform-origin: left center; }
.is-on .s-testfill { animation: s-grow 2.3s cubic-bezier(.3,.6,.3,1) .3s both; }

/* 6. Инструкция */
.s-book__cover { fill: #1B2330; }
.s-book__page { fill: #F4F6F2; stroke: #C9CEC8; }
.s-book__flip { fill: #FFFFFF; stroke: #C9CEC8; transform-box: fill-box; transform-origin: left center; }
@keyframes s-flip { 0%, 15% { transform: scaleX(1); } 55%, 100% { transform: scaleX(-1); } }
.is-on .s-book__flip { animation: s-flip 1.4s ease-in-out .3s 3 both; }
.scene .s-book text { font: 700 8.5px var(--f-display); fill: #1B2330; }
.s-book line { stroke: #C9CEC8; stroke-width: 3; stroke-linecap: round; }
.s-dev__body { fill: #1B2330; }
.s-dev__screen { fill: #F4F6F2; }
.s-ui { fill: #1B2330; }
.s-ui--soft { fill: #DDE2DA; }
.s-ui--hot { fill: #F5C400; }
.scene .s-cell { font: 700 15px var(--f-display); fill: #1B2330; }
.s-keys rect { fill: #3A4757; }
.s-beam { stroke: #F5C400; stroke-width: 3; stroke-linecap: round; }
.is-on .s-beam { animation: s-blink .9s steps(2) infinite; }
.s-call { transform-box: fill-box; transform-origin: center; }
.s-call circle { fill: #F5C400; stroke: #1B2330; stroke-width: 2; }
.scene .s-call text { font: 700 10px var(--f-display); fill: #1B2330; }
.is-on .s-call { animation: s-scale .4s cubic-bezier(.2,.8,.2,1.8) var(--d) both; }
.scene .s-cap { font: 600 13px var(--f-text); fill: var(--steel); }
.is-on .s-dev { animation: s-pop .5s ease-out var(--d) both; }

@media (prefers-reduced-motion: reduce) {
  .scene, .scene * { animation: none !important; transition: none !important; }
  .s-pen { display: none; }
}