/* ==========================================================================
   Страница «Что будет без прибора безопасности»
   Вся сцена — SVG, движение на CSS. Одна общая длительность --dur,
   внутри неё у каждого элемента свои проценты: так сцены не расходятся.
   ========================================================================== */

/* Длительность держим на самой сцене: фрагмент выводится и вне страницы .kran */
.kran__stage { --dur: 18s; }

.kran__head { max-width: 760px; margin-bottom: 28px; }
.kran__lead { margin: 14px 0 0; font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); }

.kran__stage {
	position: relative;
	margin: 0 0 34px;
	padding: 18px 18px 58px;
	border-radius: var(--r-md);
	background: var(--ink);
	overflow: hidden;
}

.kran__svg { display: block; width: 100%; height: auto; }

/* ---------- рисунок ---------- */
.kran__svg .ground { stroke: #2C3948; stroke-width: 3; }
.kran__svg .hills { fill: #1A2432; }
.kran__svg .beam { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.kran__svg .beam.thin { stroke-width: 5; }
.kran__svg .rope { stroke: #7E8894; stroke-width: 3; }
.kran__svg .weight { fill: var(--accent); }
.kran__svg .load rect { fill: #C8823A; }
.kran__svg .load__strap { stroke: #7E8894; stroke-width: 3; }

.kran__svg .device rect { fill: #35D07F; }
.kran__svg .device__led { fill: #0F1620; }

.kran__svg .suv__body { fill: #A8B0BA; }
.kran__svg .suv__cladding { fill: #6B7683; }
.kran__svg .suv__arch { stroke: #6B7683; stroke-width: 5; fill: none; }
.kran__svg .suv__glass { fill: #1A2432; }
.kran__svg .suv__rail { stroke: #6B7683; stroke-width: 5; stroke-linecap: round; fill: none; }
.kran__svg .suv__line { stroke: #6B7683; stroke-width: 3; fill: none; }
.kran__svg .suv__lamp { fill: #FFE9B0; }
.kran__svg .suv__badge { fill: var(--accent); }
.kran__svg .suv__sign { fill: #0F1620; font-family: var(--font-display), sans-serif; font-size: 15px; font-weight: 800; }
.kran__svg .wheel { fill: #1A2432; stroke: #2C3948; stroke-width: 4; }
.kran__svg .wheel__hub { fill: #6B7683; }

.kran__svg .helmet { fill: var(--accent); }
.kran__svg .skin { fill: #E8C9A8; }
.kran__svg .body { stroke: #DCE3EA; stroke-width: 5; stroke-linecap: round; fill: none; }

.kran__svg .tag rect { fill: #C8362F; }
.kran__svg .tag--ok rect { fill: #35D07F; }
.kran__svg .tag text { fill: #fff; font-family: var(--font-display), sans-serif; font-size: 24px; font-weight: 800; letter-spacing: .04em; }
.kran__svg .tag--ok text { fill: #0B2E1C; }

/* ---------- движение ---------- */
.kran__svg .crane { transform-box: view-box; transform-origin: 300px 482px; animation: kranTilt var(--dur) linear infinite; }
@keyframes kranTilt {
	0%, 17%   { transform: rotate(0deg); }
	26%, 66%  { transform: rotate(8deg); }
	76%, 100% { transform: rotate(0deg); }
}

/* груз покачивается, пока всё спокойно */
.kran__svg .load { transform-box: view-box; transform-origin: 560px 150px; animation: kranSwing var(--dur) ease-in-out infinite; }
@keyframes kranSwing {
	0%        { transform: rotate(-3deg); }
	7%        { transform: rotate(3deg); }
	14%       { transform: rotate(-2deg); }
	17%, 78%  { transform: rotate(0deg); }
	86%       { transform: rotate(-2deg); }
	94%       { transform: rotate(2deg); }
	100%      { transform: rotate(-3deg); }
}

/* груз становится тяжелее — отсюда и начинается беда */
.kran__svg .load rect { transform-box: fill-box; transform-origin: 50% 0; animation: kranHeavy var(--dur) linear infinite; }
@keyframes kranHeavy {
	0%, 14%   { transform: scale(1); }
	17%, 100% { transform: scale(1.35); }
}

/* прибор появляется, когда его поставит бригада */
.kran__svg .device { transform-box: view-box; transform-origin: 332px 183px; animation: kranDevice var(--dur) linear infinite; }
@keyframes kranDevice {
	0%, 62%   { opacity: 0; transform: scale(.3); }
	67%, 100% { opacity: 1; transform: scale(1); }
}

/* машина бригады заезжает справа */
.kran__svg .van { animation: kranVan var(--dur) cubic-bezier(.25,.8,.3,1) infinite; }
@keyframes kranVan {
	0%, 40%   { transform: translateX(430px); }
	52%, 100% { transform: translateX(0); }
}

/* Бригада выбегает из-за машины: сдвиг + перебор ног + покачивание корпуса.
   Окно бега — 50-58% общего цикла, дальше ребята стоят и работают. */
.kran__svg .crew { animation: kranRunIn var(--dur) cubic-bezier(.3,.8,.4,1) infinite; }
@keyframes kranRunIn {
	0%, 49%   { opacity: 0; transform: translateX(340px); }
	50%       { opacity: 1; transform: translateX(340px); }
	58%, 100% { opacity: 1; transform: translateX(0); }
}

/* второй бежит чуть позади — сдвигаем его фазу */
.kran__svg .crew__man--2 * { animation-delay: .28s; }

.kran__svg .crew__bob { animation: kranBob var(--dur) linear infinite; }
@keyframes kranBob {
	0%, 50%   { transform: translateY(0); }
	51%       { transform: translateY(-5px); }
	52.5%     { transform: translateY(0); }
	54%       { transform: translateY(-5px); }
	55.5%     { transform: translateY(0); }
	57%       { transform: translateY(-4px); }
	58%, 100% { transform: translateY(0); }
}

/* ноги: у каждой свой угол, поэтому два набора кадров в противофазе */
.kran__svg .leg-a { transform-box: fill-box; transform-origin: 100% 0; animation: kranLegA var(--dur) linear infinite; }
.kran__svg .leg-b { transform-box: fill-box; transform-origin: 0 0;   animation: kranLegB var(--dur) linear infinite; }
@keyframes kranLegA {
	0%, 50%   { transform: rotate(0deg); }
	51%       { transform: rotate(30deg); }
	52.5%     { transform: rotate(-28deg); }
	54%       { transform: rotate(30deg); }
	55.5%     { transform: rotate(-28deg); }
	57%       { transform: rotate(16deg); }
	58%, 100% { transform: rotate(0deg); }
}
@keyframes kranLegB {
	0%, 50%   { transform: rotate(0deg); }
	51%       { transform: rotate(-28deg); }
	52.5%     { transform: rotate(30deg); }
	54%       { transform: rotate(-28deg); }
	55.5%     { transform: rotate(30deg); }
	57%       { transform: rotate(-16deg); }
	58%, 100% { transform: rotate(0deg); }
}

/* руки: на бегу машут, после прибытия работают */
.kran__svg .arm  { transform-box: fill-box; transform-origin: 0 100%;   animation: kranArmA var(--dur) linear infinite; }
.kran__svg .arm2 { transform-box: fill-box; transform-origin: 100% 100%; animation: kranArmB var(--dur) linear infinite; }
@keyframes kranArmA {
	0%, 50%   { transform: rotate(0deg); }
	51%       { transform: rotate(-34deg); }
	52.5%     { transform: rotate(24deg); }
	54%       { transform: rotate(-34deg); }
	55.5%     { transform: rotate(24deg); }
	57%, 59%  { transform: rotate(0deg); }
	62%       { transform: rotate(-24deg); }
	65%       { transform: rotate(0deg); }
	68%       { transform: rotate(-24deg); }
	71%, 100% { transform: rotate(0deg); }
}
@keyframes kranArmB {
	0%, 50%   { transform: rotate(0deg); }
	51%       { transform: rotate(30deg); }
	52.5%     { transform: rotate(-26deg); }
	54%       { transform: rotate(30deg); }
	55.5%     { transform: rotate(-26deg); }
	57%, 59%  { transform: rotate(0deg); }
	62%       { transform: rotate(26deg); }
	65%       { transform: rotate(0deg); }
	68%       { transform: rotate(26deg); }
	71%, 100% { transform: rotate(0deg); }
}

.kran__svg .tag { opacity: 0; }
.kran__svg .tag--danger { animation: kranDanger var(--dur) linear infinite; }
@keyframes kranDanger {
	0%, 18%  { opacity: 0; }
	20%      { opacity: 1; }
	23%      { opacity: .2; }
	26%      { opacity: 1; }
	29%      { opacity: .2; }
	32%, 42% { opacity: 1; }
	46%, 100%{ opacity: 0; }
}
.kran__svg .tag--ok { animation: kranOk var(--dur) linear infinite; }
@keyframes kranOk {
	0%, 78%   { opacity: 0; }
	82%, 96%  { opacity: 1; }
	100%      { opacity: 0; }
}

/* ---------- подписи под сценой ---------- */
.kran__step {
	position: absolute; left: 24px; right: 24px; bottom: 20px;
	margin: 0; text-align: center; opacity: 0;
	color: #F4F8FC; font-size: clamp(14px, 1.5vw, 17px); font-weight: 500;
}
.kran__step[data-step="1"] { animation: kranStep1 var(--dur) linear infinite; }
.kran__step[data-step="2"] { animation: kranStep2 var(--dur) linear infinite; }
.kran__step[data-step="3"] { animation: kranStep3 var(--dur) linear infinite; }
.kran__step[data-step="4"] { animation: kranStep4 var(--dur) linear infinite; }
@keyframes kranStep1 { 0%{opacity:0} 3%,14%{opacity:1} 17%,100%{opacity:0} }
@keyframes kranStep2 { 0%,18%{opacity:0} 21%,38%{opacity:1} 41%,100%{opacity:0} }
@keyframes kranStep3 { 0%,44%{opacity:0} 47%,70%{opacity:1} 73%,100%{opacity:0} }
@keyframes kranStep4 { 0%,78%{opacity:0} 81%,96%{opacity:1} 99%,100%{opacity:0} }

.kran__replay {
	position: absolute; right: 18px; top: 18px;
	padding: 9px 18px; border: 1px solid #2C3948; border-radius: 100px;
	background: rgba(15,22,32,.7); color: #DCE3EA;
	font: inherit; font-size: 14px; cursor: pointer;
}
.kran__replay:hover { border-color: var(--accent); color: var(--accent); }

/* перезапуск: снимаем анимации на кадр и включаем заново */
.kran__stage.is-reset .kran__svg *,
.kran__stage.is-reset .kran__step { animation: none !important; }

.kran__moral { max-width: 760px; }
.kran__moral h2 { margin-bottom: 12px; }
.kran__moral p { margin: 0 0 14px; color: var(--muted); }
.kran__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

@media (max-width: 620px) {
	.kran__stage { padding: 12px 12px 52px; }
	.kran__step { left: 14px; right: 14px; bottom: 16px; }
	.kran__replay { right: 12px; top: 12px; padding: 7px 14px; font-size: 13px; }
	.kran__actions .btn { width: 100%; }
}

/* Если в системе включено "уменьшение движения", по умолчанию показываем
   финальный кадр. Но не запираем наглухо: кнопка включает ролик по желанию
   (класс is-playing снимает заморозку). */
@media (prefers-reduced-motion: reduce) {
	.kran__stage:not(.is-playing) .kran__svg *,
	.kran__stage:not(.is-playing) .kran__step { animation: none !important; }
	.kran__stage:not(.is-playing) .kran__svg .device { opacity: 1; transform: none; }
	.kran__stage:not(.is-playing) .kran__svg .van { transform: none; }
	.kran__stage:not(.is-playing) .kran__svg .crew { opacity: 1; }
	.kran__stage:not(.is-playing) .kran__svg .tag--ok { opacity: 1; }
	.kran__stage:not(.is-playing) .kran__step[data-step="4"] { opacity: 1; }
}


/* ---------- Сцена внутри пятого пункта на главной ---------- */
.step--wide { grid-column: 1 / -1; }
.step--wide .kran__stage { margin-top: 18px; }
@media (max-width: 860px) {
	/* На узкой карточке кнопка занимала половину ширины сцены,
	   а сама анимация и так идёт по кругу — убираем её здесь.
	   На отдельной странице кнопка остаётся. */
	.step--wide .kran__replay { display: none; }
}

@media (max-width: 620px) {
	/* поля карточки съедали ширину сцены — ужимаем их */
	.step--wide { padding: 22px 14px; }
}

/* Кнопка нужна везде, где движение выключено системой, — иначе посетитель
   так и останется со статичной картинкой. Перекрывает скрытие на узких экранах. */
.kran__stage.is-motion-off .kran__replay,
.step--wide .kran__stage.is-motion-off .kran__replay { display: block; }

/* На главной сцена лежит внутри карточки .step, и правило .step p из style.css
   перебивает подпись по специфичности (0-0-1-1 против 0-0-1-0): текст становился
   серым и мельче. Возвращаем цвет и размер более весомым селектором. */
.kran__stage .kran__step {
	color: #F4F8FC;
	font-size: clamp(14px, 1.5vw, 17px);
	font-weight: 500;
}

/* Ролик не крутится вхолостую под экраном: пока сцену не прокрутили в зону
   видимости, анимации стоят на нулевом кадре. Класс is-visible ставит скрипт
   по IntersectionObserver. */
.kran__stage:not(.is-visible) .kran__svg *,
.kran__stage:not(.is-visible) .kran__step {
	animation-play-state: paused;
}