/* Промо CRM для ремонта (promo.blade.php) — в оформлении лендинга заказчика
   remont.kvartir.moscow (CabinetLanding.vue стенда). Акцент, второй цвет и шрифт приходят
   из настроек CRM переменными --pr-* (LandingController::crmTheme); оттенки считаются от
   акцента теми же формулами, что в frontend/assets/css/main.css. Общие landing.css — только
   шрифты Gilroy и база. */

:root {
   --pr-accent: #086c49;
   --pr-secondary: #f2c94c;
   --pr-font: 'Gilroy';
   --pr-ink: oklch(from var(--pr-accent) 0.45 min(c, 0.13) h);
   --pr-light: oklch(from var(--pr-accent) 0.82 min(c, 0.13) h);
   --pr-soft: color-mix(in srgb, var(--pr-accent) 14%, #fff);
   --pr-soft-strong: color-mix(in srgb, var(--pr-accent) 26%, #fff);
   --pr-900: #171717;
   --pr-700: #404040;
   --pr-600: #525252;
   --pr-500: #737373;
   --pr-300: #d4d4d4;
   --pr-200: #e5e5e5;
   --pr-50: #fafafa;
   --pr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.pr {
   font-family: var(--pr-font), 'Gilroy', system-ui, sans-serif;
   font-size: 16px;
   line-height: 1.55;
   color: var(--pr-900);
   overflow-x: clip;
}

.pr h1,
.pr h2,
.pr h3 {
   color: var(--pr-900);
   letter-spacing: -0.015em;
}

.pr h2 {
   font-size: clamp(24px, 3vw, 30px);
}

.pr h3 {
   font-size: 19px;
   font-weight: 600;
}

.pr :focus-visible {
   outline-color: var(--pr-accent);
}

.pr .skip {
   background: var(--pr-accent);
}

.pr-wrap {
   max-width: 1152px;
   margin: 0 auto;
   padding: 0 16px;
}

.pr-section {
   padding-top: 56px;
   padding-bottom: 56px;
}

.pr-band {
   background: var(--pr-50);
}

.pr-lead {
   margin-top: 12px;
   max-width: 42rem;
   color: var(--pr-600);
}

/* ---------- Кнопки ---------- */

.pr-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 20px;
   background: var(--pr-accent);
   color: #fff;
   font-weight: 600;
   text-decoration: none;
   border-radius: 6px;
   transition: transform 0.2s var(--pr-ease), box-shadow 0.2s, background-color 0.2s;
}

.pr-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 8px 20px color-mix(in srgb, var(--pr-accent) 30%, transparent);
   background: color-mix(in srgb, var(--pr-accent), #fff 8%);
}

.pr-btn--block {
   width: 100%;
}

.pr-btn--soft {
   background: var(--pr-soft-strong);
   color: var(--pr-ink);
}

.pr-btn--soft:hover {
   background: var(--pr-accent);
   color: #fff;
}

/* ---------- Шапка ---------- */

.pr-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: var(--pr-900);
   color: #fff;
}

.pr-header__inner {
   display: flex;
   align-items: center;
   gap: 24px;
   height: 64px;
}

.pr-logo {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-right: auto;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: #fff;
   text-decoration: none;
   white-space: nowrap;
}

.pr-logo b {
   color: var(--pr-light);
}

.pr-logo__mark {
   width: 1.15em;
   height: 1.15em;
   flex: none;
   transition: transform 0.6s var(--pr-ease);
}

.pr-logo:hover .pr-logo__mark {
   transform: rotate(180deg);
}

.pr-nav {
   display: flex;
   gap: 24px;
   font-size: 14px;
}

.pr-nav a {
   color: var(--pr-300);
   text-decoration: none;
   transition: color 0.15s;
}

.pr-nav a:hover,
.pr-nav a.is-current {
   color: #fff;
}

.pr-header__phone {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-weight: 600;
   color: var(--pr-300);
   text-decoration: none;
   white-space: nowrap;
}

.pr-header__phone:hover {
   color: #fff;
}

.pr-header__phone svg {
   width: 15px;
   height: 15px;
}

.pr-burger {
   display: none;
   width: 40px;
   height: 40px;
   padding: 0;
   background: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
   cursor: pointer;
}

.pr-burger span,
.pr-burger span::before,
.pr-burger span::after {
   display: block;
   width: 18px;
   height: 2px;
   margin: 0 auto;
   background: #fff;
   position: relative;
}

.pr-burger span::before,
.pr-burger span::after {
   content: '';
   position: absolute;
   left: 0;
}

.pr-burger span::before {
   top: -6px;
}

.pr-burger span::after {
   top: 6px;
}

/* Полоска прочитанного под шапкой. */
.pr-progress {
   height: 2px;
   background: transparent;
}

.pr-progress span {
   display: block;
   height: 100%;
   width: 100%;
   background: var(--pr-light);
   transform: scaleX(var(--read, 0));
   transform-origin: 0 50%;
}

/* ---------- Первый экран ---------- */

.pr-hero {
   position: relative;
   background: var(--pr-soft);
   overflow: hidden;
}

.pr-hero__grid {
   position: relative;
   display: grid;
   gap: 40px;
   padding-top: 48px;
   padding-bottom: 48px;
   align-items: center;
}

.pr-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--pr-ink);
}

.pr-kicker svg {
   width: 16px;
   height: 16px;
}

.pr-hero h1 {
   margin-top: 12px;
   font-size: clamp(30px, 4.4vw, 46px);
   line-height: 1.12;
}

.pr-hero__lead {
   margin-top: 20px;
   max-width: 36rem;
   font-size: 18px;
   color: var(--pr-600);
}

.pr-note {
   display: inline-flex;
   align-items: flex-start;
   gap: 12px;
   margin-top: 24px;
   max-width: 36rem;
   padding: 12px 16px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pr-note svg {
   flex: none;
   width: 22px;
   height: 22px;
   color: var(--pr-ink);
}

.pr-ticks {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 24px;
   margin: 24px 0 0;
   padding: 0;
   list-style: none;
   font-size: 14px;
   color: var(--pr-600);
}

.pr-ticks li {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.pr-ticks svg {
   width: 13px;
   height: 13px;
   color: var(--pr-ink);
   stroke-width: 2.6;
}

/* Мягкие пятна на фоне первого экрана — медленно плывут. */
.pr-hero__blobs i {
   position: absolute;
   border-radius: 50%;
   filter: blur(40px);
   opacity: 0.55;
   animation: pr-float 18s ease-in-out infinite alternate;
}

.pr-hero__blobs i:nth-child(1) {
   width: 380px;
   height: 380px;
   left: -120px;
   top: -140px;
   background: color-mix(in srgb, var(--pr-accent) 30%, #fff);
}

.pr-hero__blobs i:nth-child(2) {
   width: 300px;
   height: 300px;
   right: 8%;
   bottom: -160px;
   background: color-mix(in srgb, var(--pr-secondary) 45%, #fff);
   opacity: 0.4;
   animation-duration: 22s;
}

.pr-hero__blobs i:nth-child(3) {
   width: 220px;
   height: 220px;
   right: -60px;
   top: 20px;
   background: #fff;
   animation-duration: 15s;
}

@keyframes pr-float {
   to {
      transform: translate(60px, 40px) scale(1.12);
   }
}

/* ---------- Карточки ---------- */

.pr-card {
   background: #fff;
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.pr-card h2 {
   font-size: 20px;
   font-weight: 600;
}

.pr-card h3 {
   margin-top: 16px;
}

.pr-card p {
   margin-top: 8px;
   color: var(--pr-600);
}

.pr-card--flat {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pr-card--line {
   box-shadow: none;
   border: 1px solid var(--pr-200);
}

.pr-lift {
   transition: transform 0.3s var(--pr-ease), box-shadow 0.3s var(--pr-ease), border-color 0.3s;
}

.pr-lift:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.09);
   border-color: var(--pr-soft-strong);
}

.pr-card__sub {
   margin-top: 2px !important;
   font-size: 14px;
   color: var(--pr-500) !important;
}

.pr-card__foot {
   margin-top: 12px !important;
   font-size: 12px;
   text-align: center;
   color: var(--pr-500) !important;
}

.pr-steps {
   counter-reset: step;
   margin: 16px 0 20px;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 12px;
}

.pr-steps li {
   counter-increment: step;
   position: relative;
   padding-left: 40px;
   font-size: 14px;
   color: var(--pr-500);
}

.pr-steps li b {
   display: block;
   font-size: 15px;
   font-weight: 600;
   color: var(--pr-900);
}

.pr-steps li::before {
   content: counter(step);
   position: absolute;
   left: 0;
   top: 1px;
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--pr-soft);
   color: var(--pr-ink);
   font-weight: 700;
   font-size: 14px;
}

.pr-ico {
   display: inline-grid;
   place-items: center;
   color: var(--pr-ink);
}

.pr-ico svg {
   width: 26px;
   height: 26px;
}

.pr-ico--round {
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--pr-soft);
}

.pr-ico--round svg {
   width: 20px;
   height: 20px;
}

/* ---------- Линия со станциями ----------
   На телефоне — колонка с линией слева, рисунок под текстом; шире — рисунок | линия | текст.
   Серая линия — псевдоэлемент списка, поверх неё акцентная заливка ростом --p. */

.pr-route {
   position: relative;
   display: grid;
   gap: 40px;
   margin: 40px 0 0;
   padding: 0;
   list-style: none;
   --line: 6px;
   --station: 36px;
   --p: 0;
}

.pr-route::before,
.pr-route::after {
   content: '';
   position: absolute;
   top: 16px;
   bottom: 16px;
   left: calc(var(--station) / 2 - var(--line) / 2);
   width: var(--line);
   border-radius: var(--line);
   background: var(--pr-200);
}

.pr-route::after {
   background: var(--pr-accent);
   transform: scaleY(var(--p));
   transform-origin: 50% 0;
}

.pr-stop {
   display: grid;
   grid-template-columns: var(--station) 1fr;
   grid-template-areas:
      'mark text'
      '. art';
   gap: 16px;
   align-items: start;
}

.pr-stop__mark {
   grid-area: mark;
   display: flex;
   justify-content: center;
}

.pr-stop__text {
   grid-area: text;
}

.pr-stop__art {
   grid-area: art;
}

.pr-station {
   position: relative;
   z-index: 1;
   display: inline-grid;
   place-items: center;
   width: var(--station);
   height: var(--station);
   border-radius: 50%;
   background: #fff;
   border: 4px solid var(--pr-300);
   color: var(--pr-500);
   font-weight: 700;
   box-shadow: 0 0 0 4px #fff;
   transition: border-color 0.4s, color 0.4s, background-color 0.4s, transform 0.4s var(--pr-ease);
}

/* Пройденная станция: линия до неё уже залита. */
.pr-stop.is-passed .pr-station {
   border-color: var(--pr-accent);
   color: var(--pr-ink);
}

.pr-stop.is-current .pr-station {
   background: var(--pr-accent);
   border-color: var(--pr-accent);
   color: #fff;
   transform: scale(1.12);
}

.pr-stop.is-current .pr-station::after {
   content: '';
   position: absolute;
   inset: -8px;
   border-radius: 50%;
   border: 2px solid var(--pr-accent);
   animation: pr-ping 1.8s var(--pr-ease) infinite;
}

@keyframes pr-ping {
   from {
      opacity: 0.7;
      transform: scale(0.8);
   }
   to {
      opacity: 0;
      transform: scale(1.5);
   }
}

.pr-who {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--pr-ink);
}

.pr-stop h3 {
   margin-top: 4px;
   font-size: 20px;
}

.pr-stop__text > p:not([class]) {
   margin-top: 8px;
   color: var(--pr-600);
}

.pr-when {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 12px;
   font-size: 14px;
   color: var(--pr-500);
}

.pr-when svg {
   width: 14px;
   height: 14px;
}

.pr-artcard {
   padding: 16px;
   background: #fff;
   border: 1px solid var(--pr-200);
   border-radius: 16px;
   color: var(--pr-700);
   transition: box-shadow 0.4s var(--pr-ease), transform 0.4s var(--pr-ease);
}

.pr-stop:hover .pr-artcard {
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
   transform: translateY(-3px);
}

.pr-after {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   margin-top: 40px;
   font-size: 14px;
   color: var(--pr-500);
}

@media (min-width: 768px) {
   .pr-route {
      gap: 56px;
      --station: 44px;
   }

   .pr-route::before,
   .pr-route::after {
      left: calc(50% - var(--line) / 2);
   }

   .pr-stop {
      grid-template-columns: 1fr var(--station) 1fr;
      grid-template-areas: 'art mark text';
      column-gap: 32px;
      align-items: center;
   }

   .pr-stop__art {
      width: 100%;
      max-width: 420px;
      justify-self: end;
   }
}

/* ---------- Рисунки ---------- */

.pr-art {
   display: block;
   width: 100%;
   height: auto;
   font-family: var(--pr-font), 'Gilroy', sans-serif;
}

.pr-art text {
   stroke: none;
   fill: currentColor;
}

.art-title {
   font-size: 10px;
   font-weight: 600;
}

.art-small {
   font-size: 8px;
}

.art-tiny {
   font-size: 7px;
}

.pr-art text.art-muted,
.art-muted {
   fill: color-mix(in srgb, currentColor 55%, #fff);
}

.art-muted-stroke {
   stroke: color-mix(in srgb, currentColor 35%, #fff);
}

.art-soft {
   fill: var(--pr-soft);
}

.art-soft-strong {
   fill: var(--pr-soft-strong);
}

.art-fill {
   fill: var(--pr-accent);
}

.art-second {
   fill: var(--pr-secondary);
}

.pr-art text.art-on-fill,
.pr-panel text.art-on-fill {
   fill: #fff;
}

.pr-art text.art-accent {
   fill: var(--pr-ink);
}

.art-accent {
   stroke: var(--pr-ink);
}

.art-accent-stroke,
.art-line-accent {
   stroke: var(--pr-ink);
}

/* ---------- Кто работает ---------- */

.pr-grid3 {
   display: grid;
   gap: 24px;
   margin-top: 32px;
}

.pr-trust__item {
   display: flex;
   gap: 12px;
   font-size: 14px;
}

.pr-trust__item b {
   color: var(--pr-900);
}

.pr-trust__item p {
   margin-top: 2px;
   color: var(--pr-500);
}

@media (min-width: 768px) {
   .pr-grid3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

/* ---------- Возможности ---------- */

.pr-split {
   display: grid;
   gap: 40px;
}

.pr-tabs {
   margin-top: 24px;
}

/* Вкладки разделов: активная залита акцентом, полоска под ней — время до следующей. */
.pr-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.pr-chips button {
   position: relative;
   overflow: hidden;
   padding: 5px 14px;
   font: inherit;
   font-size: 14px;
   color: var(--pr-700);
   background: #fff;
   border: 1px solid var(--pr-200);
   border-radius: 999px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.4s, transform 0.4s var(--pr-ease);
}

.pr-chips button:hover {
   background: var(--pr-soft);
   border-color: var(--pr-soft-strong);
   color: var(--pr-ink);
}

.pr-chips button[aria-selected='true'] {
   background: var(--pr-accent);
   border-color: var(--pr-accent);
   color: #fff;
}

.pr-chips button[aria-selected='true']::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 2px;
   background: rgba(255, 255, 255, 0.7);
   transform-origin: 0 50%;
   transform: scaleX(0);
}

.pr-tabs.is-auto .pr-chips button[aria-selected='true']::after {
   animation: pr-timer var(--pr-tab, 5s) linear forwards;
}

@keyframes pr-timer {
   to {
      transform: scaleX(1);
   }
}

.pr-screen {
   margin-top: 16px;
   padding: 12px;
   background: var(--pr-soft);
   border-radius: 16px;
   color: var(--pr-700);
}

/* На телефоне экран не сжимается до нечитаемого: остаётся крупным и листается вбок. */
@media (max-width: 600px) {
   .pr-screen {
      overflow-x: auto;
      overscroll-behavior-x: contain;
   }

   .pr-screen__svg {
      min-width: 600px;
   }
}

.pr-screen__pane[hidden] {
   display: none;
}

.pr-screen__svg {
   filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.08));
}

.pr-screen__pane.is-play {
   animation: pr-swap 0.5s var(--pr-ease);
}

@keyframes pr-swap {
   from {
      opacity: 0;
      transform: translateY(8px) scale(0.99);
   }
}

.pr-grid2 {
   display: grid;
   gap: 16px;
   margin-top: 32px;
}

.pr-grid2 .pr-card {
   padding: 20px;
}

.pr-grid2 .pr-ico svg {
   width: 22px;
   height: 22px;
}

.pr-grid2 h3 {
   margin-top: 12px;
   font-size: 17px;
}

.pr-grid2 p {
   font-size: 14px;
}

.pr-panel {
   align-self: start;
   position: sticky;
   top: 96px;
   padding: 24px;
   background: var(--pr-soft);
   border-radius: 16px;
   color: var(--pr-700);
   font-size: 14px;
   text-align: center;
}

.pr-panel svg {
   display: block;
   width: 100%;
   max-width: 300px;
   margin: 0 auto 12px;
   overflow: visible;
   font-family: var(--pr-font), 'Gilroy', sans-serif;
}

.pr-panel text {
   fill: currentColor;
   stroke: none;
}

/* Орбиты: внешнее кольцо — документы, внутреннее — люди; подписи остаются ровными. */
.pr-orbit {
   transform-origin: 120px 120px;
   animation: pr-spin 60s linear infinite;
}

.pr-orbit--inner {
   animation-duration: 40s;
   animation-direction: reverse;
}

.pr-orbit__label {
   animation: pr-spin 60s linear infinite reverse;
}

.pr-orbit__label--inner {
   animation-duration: 40s;
   animation-direction: normal;
}

.pr-orbit__label rect {
   stroke: color-mix(in srgb, currentColor 30%, #fff);
}

@keyframes pr-spin {
   to {
      transform: rotate(360deg);
   }
}

@media (min-width: 768px) {
   .pr-grid2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 1024px) {
   .pr-split {
      grid-template-columns: minmax(0, 1fr) 300px;
   }
}

/* ---------- Вопросы ---------- */

.pr-faq {
   max-width: 768px;
}

.pr-faq__list {
   margin-top: 24px;
}

.pr-faq details {
   border-bottom: 1px solid var(--pr-200);
}

.pr-faq summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 16px 0;
   font-weight: 600;
   cursor: pointer;
   list-style: none;
}

.pr-faq summary::-webkit-details-marker {
   display: none;
}

.pr-faq summary i {
   flex: none;
   width: 10px;
   height: 10px;
   border-right: 2px solid var(--pr-500);
   border-bottom: 2px solid var(--pr-500);
   transform: translateY(-3px) rotate(45deg);
   transition: transform 0.3s var(--pr-ease);
}

.pr-faq details[open] summary i {
   transform: translateY(2px) rotate(225deg);
}

.pr-faq details p {
   padding-bottom: 16px;
   color: var(--pr-600);
   animation: pr-drop 0.35s var(--pr-ease);
}

@keyframes pr-drop {
   from {
      opacity: 0;
      transform: translateY(-6px);
   }
}

/* ---------- Финал и подвал ---------- */

.pr-final {
   text-align: center;
}

.pr-final .pr-lead {
   margin: 12px auto 24px;
}

.pr-btn--pulse {
   position: relative;
}

.pr-btn--pulse::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
   box-shadow: 0 0 0 0 color-mix(in srgb, var(--pr-accent) 45%, transparent);
   animation: pr-pulse 2.4s ease-out infinite;
}

@keyframes pr-pulse {
   to {
      box-shadow: 0 0 0 16px transparent;
   }
}

.pr-footer {
   border-top: 1px solid var(--pr-200);
   font-size: 12px;
   color: var(--pr-500);
}

.pr-footer__inner {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 8px 24px;
   padding-top: 24px;
   padding-bottom: 24px;
}

.pr-logo--small {
   display: inline-flex;
   margin: 0;
   font-size: 12px;
   color: var(--pr-700);
   vertical-align: -2px;
}

.pr-logo--small b {
   color: var(--pr-ink);
}

/* Звонок снизу на телефоне. */
.pr-dock {
   display: none;
}

@media (min-width: 900px) {
   .pr-hero__grid {
      grid-template-columns: minmax(0, 1fr) 400px;
      padding-top: 80px;
      padding-bottom: 80px;
   }
}

@media (max-width: 899px) {
   .pr-nav {
      display: none;
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      padding: 8px 16px 16px;
      background: var(--pr-900);
   }

   .pr-nav.is-open {
      display: flex;
   }

   .pr-nav a {
      padding: 10px 0;
      font-size: 16px;
   }

   .pr-burger {
      display: block;
   }

   .pr-header__phone {
      display: none;
   }

   .pr-dock {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 40;
      display: block;
      padding: 14px;
      border-radius: 12px;
      background: var(--pr-accent);
      color: #fff;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      transform: translateY(140%);
      transition: transform 0.4s var(--pr-ease);
   }

   .pr-dock.is-shown {
      transform: none;
   }

   .pr-footer {
      padding-bottom: 72px;
   }
}

/* ---------- Движение ----------
   Без скрипта (`html:not(.js)`) всё видно сразу. `pr-in` — первый экран при загрузке,
   `data-reveal` — при прокрутке (promo.js ставит `.is-in`), `--i` — очередь в группе. */

.js .pr-in {
   animation: pr-rise 0.8s var(--pr-ease) both;
   animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

@keyframes pr-rise {
   from {
      opacity: 0;
      transform: translateY(18px);
   }
}

.js [data-reveal] {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.7s var(--pr-ease), transform 0.7s var(--pr-ease);
   transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].is-in {
   opacity: 1;
   transform: none;
}

/* Станция: рисунок выезжает со своей стороны, текст — со своей. */
.js .pr-stop[data-reveal] {
   opacity: 1;
   transform: none;
}

.js .pr-stop .pr-stop__art,
.js .pr-stop .pr-stop__text {
   opacity: 0;
   transition: opacity 0.8s var(--pr-ease), transform 0.8s var(--pr-ease);
}

.js .pr-stop .pr-stop__art {
   transform: translateX(-32px);
}

.js .pr-stop .pr-stop__text {
   transform: translateX(32px);
   transition-delay: 0.12s;
}

.js .pr-stop.is-in .pr-stop__art,
.js .pr-stop.is-in .pr-stop__text {
   opacity: 1;
   transform: none;
}

/* Вкладки — волной. */
.js .pr-chips button {
   opacity: 0;
   transform: scale(0.85);
   transition: opacity 0.4s, transform 0.4s var(--pr-ease), background-color 0.2s, border-color 0.2s, color 0.2s;
   transition-delay: calc(var(--i) * 35ms);
}

.js .pr-tabs.is-in .pr-chips button {
   opacity: 1;
   transform: none;
}

/* Рисунки оживают, когда станция в экране. */
.js .a-grow {
   transform: scaleX(0);
   transform-box: fill-box;
   transform-origin: 0 50%;
   transition: transform 0.9s var(--pr-ease);
   transition-delay: calc(var(--i, 0) * 120ms + 0.3s);
}

.js .is-in .a-grow {
   transform: none;
}

.js .a-pop {
   opacity: 0;
   transform: translateY(10px) scale(0.96);
   transform-box: fill-box;
   transform-origin: 50% 100%;
   transition: opacity 0.6s var(--pr-ease), transform 0.6s var(--pr-ease);
   transition-delay: calc(var(--i, 0) * 140ms + 0.45s);
}

.js .is-in .a-pop {
   opacity: 1;
   transform: none;
}

.a-ring {
   transform-box: fill-box;
   transform-origin: center;
   animation: pr-ping 1.6s var(--pr-ease) infinite;
}

.js .a-draw {
   stroke-dasharray: 220;
   stroke-dashoffset: 220;
   transition: stroke-dashoffset 1.2s var(--pr-ease) 0.4s;
}

.js .is-in .a-draw {
   stroke-dashoffset: 0;
}

.js .a-msg,
.js .a-row {
   opacity: 0;
   transform: translateY(8px);
   transform-box: fill-box;
   transition: opacity 0.5s var(--pr-ease), transform 0.5s var(--pr-ease);
   transition-delay: calc(var(--i) * 0.7s + 0.4s);
}

.js .a-row {
   transform: translateX(-10px);
   transition-delay: calc(var(--i) * 0.25s + 0.3s);
}

.js .is-in .a-msg,
.js .is-in .a-row {
   opacity: 1;
   transform: none;
}

.a-typing circle {
   animation: pr-typing 1.2s ease-in-out infinite;
}

.a-typing circle:nth-child(2) {
   animation-delay: 0.15s;
}

.a-typing circle:nth-child(3) {
   animation-delay: 0.3s;
}

@keyframes pr-typing {
   0%,
   60%,
   100% {
      opacity: 0.25;
   }
   30% {
      opacity: 1;
   }
}

.js .a-stamp {
   opacity: 0;
   transform: scale(1.8) rotate(-20deg);
   transform-box: fill-box;
   transform-origin: center;
   transition: opacity 0.25s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   transition-delay: 0.7s;
}

.js .is-in .a-stamp {
   opacity: 1;
   transform: none;
}

/* ---------- Сцены экранов ----------
   В каждом экране курсор делает одно действие, как на демонстрации. `--t` — момент
   щелчка; `x-out` гаснет, `x-in` и `x-new` появляются, `x-click` — круг от щелчка.
   Без `.is-play` (и без скрипта) экран показывает исходное состояние. */

#screen-objects { --t: 3.3s; }
#screen-tasks { --t: 2s; }
#screen-auction { --t: 2s; }
#screen-price { --t: 2s; }
#screen-desk { --t: 1.9s; }
#screen-roles { --t: 2s; }
#screen-dialogs { --t: 1.1s; }
#screen-cash { --t: 1.6s; }

.x-cursor--tasks { --x0: 120px; --y0: 250px; --x1: 348px; --y1: 180px; }
.x-cursor--auction { --x0: 250px; --y0: 250px; --x1: 426px; --y1: 85px; }
.x-cursor--price { --x0: 250px; --y0: 250px; --x1: 452px; --y1: 117px; }
.x-cursor--desk { --x0: 140px; --y0: 250px; --x1: 279px; --y1: 153px; }
.x-cursor--roles { --x0: 120px; --y0: 250px; --x1: 254px; --y1: 182px; }

.x-in,
.x-new,
.x-slot,
.x-click,
.x-cursor,
.x-on,
.x-toast,
.x-flash {
   opacity: 0;
}

.x-grow-up {
   transform: scaleY(0);
   transform-box: fill-box;
   transform-origin: 50% 100%;
}

.x-new,
.x-click {
   transform-box: fill-box;
   transform-origin: center;
}

.x-check,
.x-strike {
   stroke-dasharray: 90;
   stroke-dashoffset: 90;
}

.is-play .x-cursor {
   animation: pr-cursor calc(var(--t) / 0.8) var(--pr-ease) forwards;
}

@keyframes pr-cursor {
   0% {
      opacity: 0;
      transform: translate(var(--x0), var(--y0));
   }
   15% {
      opacity: 1;
   }
   72% {
      transform: translate(var(--x1), var(--y1));
   }
   80% {
      opacity: 1;
      transform: translate(var(--x1), var(--y1)) scale(0.8);
   }
   100% {
      opacity: 1;
      transform: translate(var(--x1), var(--y1));
   }
}

.is-play .x-click {
   animation: pr-click 0.7s ease-out var(--t) both;
}

@keyframes pr-click {
   from {
      opacity: 0.8;
      transform: scale(0.2);
   }
   to {
      opacity: 0;
      transform: scale(1.8);
   }
}

.is-play .x-out {
   animation: pr-x-out 0.25s ease calc(var(--t) + 0.1s) forwards;
}

.is-play .x-in {
   animation: pr-x-in 0.35s var(--pr-ease) calc(var(--t) + 0.2s) forwards;
}

.is-play .x-new {
   animation: pr-x-new 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--t) + 0.15s) forwards;
}

@keyframes pr-x-out {
   to {
      opacity: 0;
   }
}

@keyframes pr-x-in {
   from {
      opacity: 0;
      transform: translateY(4px);
   }
   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes pr-x-new {
   from {
      opacity: 0;
      transform: scale(0.6);
   }
   to {
      opacity: 1;
      transform: none;
   }
}

/* Объекты: карточку берут, несут через доску и кладут в «Ремонт». */
.is-play .x-cursor--objects {
   animation: pr-obj-cursor 4s var(--pr-ease) forwards;
}

@keyframes pr-obj-cursor {
   0% {
      opacity: 0;
      transform: translate(200px, 250px);
   }
   10% {
      opacity: 1;
   }
   30%,
   36% {
      transform: translate(60px, 160px);
   }
   33% {
      transform: translate(60px, 160px) scale(0.85);
   }
   80%,
   100% {
      opacity: 1;
      transform: translate(292px, 218px);
   }
}

.x-drag {
   transform-box: view-box;
}

.is-play .x-drag {
   animation: pr-obj-card 4s var(--pr-ease) forwards;
}

@keyframes pr-obj-card {
   0%,
   33% {
      transform: none;
      filter: none;
   }
   38% {
      transform: translate(-3px, -5px) rotate(-2deg);
      filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.18));
   }
   78% {
      transform: translate(229px, 53px) rotate(-2deg);
      filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.18));
   }
   84%,
   100% {
      transform: translate(232px, 58px);
      filter: none;
   }
}

.is-play .x-drag__card {
   animation: pr-obj-stroke 4s forwards;
}

@keyframes pr-obj-stroke {
   0%,
   33% {
      stroke: var(--pr-300);
   }
   38%,
   100% {
      stroke: var(--pr-accent);
   }
}

.is-play .x-slot {
   animation: pr-obj-slot 4s forwards;
}

.is-play .x-slot--to {
   animation-name: pr-obj-slot-to;
}

@keyframes pr-obj-slot {
   0%,
   33% {
      opacity: 0;
   }
   38%,
   100% {
      opacity: 1;
   }
}

@keyframes pr-obj-slot-to {
   0%,
   40% {
      opacity: 0;
   }
   50%,
   78% {
      opacity: 1;
   }
   84%,
   100% {
      opacity: 0;
   }
}

/* Торги: выбранное предложение светлеет, остальные гаснут. */
.x-win {
   opacity: 0;
}

.is-play .x-win {
   animation: pr-on 0.4s ease calc(var(--t) + 0.2s) forwards;
}

.js .is-play .x-dim {
   animation: pr-dim 0.5s ease calc(var(--t) + 0.3s) forwards;
}

@keyframes pr-dim {
   to {
      opacity: 0.4;
   }
}

/* Прайс: строка вспыхивает. */
.is-play .x-flash {
   animation: pr-flash 1.4s ease calc(var(--t) + 0.05s) forwards;
}

/* Цвет из color-mix в ключевых кадрах Chromium не анимирует — только прозрачность. */
@keyframes pr-flash {
   0% {
      opacity: 0;
   }
   20% {
      opacity: 1;
   }
   45% {
      opacity: 0.55;
   }
   100% {
      opacity: 1;
   }
}

#screen-price .x-new {
   animation-delay: calc(var(--t) + 0.6s);
}

/* Рабочий стол: галочка, зачёркивание, текст бледнеет. */
.is-play .x-box {
   animation: pr-box 0.25s ease var(--t) forwards;
}

@keyframes pr-box {
   to {
      fill: var(--pr-accent);
   }
}

.is-play .x-check {
   animation: pr-dash 0.35s ease calc(var(--t) + 0.15s) forwards;
}

.is-play .x-strike {
   animation: pr-dash 0.5s ease calc(var(--t) + 0.3s) forwards;
}

@keyframes pr-dash {
   to {
      stroke-dashoffset: 0;
   }
}

.is-play .x-done {
   animation: pr-done 0.4s ease calc(var(--t) + 0.3s) forwards;
}

@keyframes pr-done {
   to {
      fill: var(--pr-500);
   }
}

/* Права: переключатель «Открыть» у финансов включается. */
.is-play .x-on {
   animation: pr-on 0.3s ease calc(var(--t) + 0.1s) forwards;
}

@keyframes pr-on {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.is-play .x-knob {
   animation: pr-knob 0.3s var(--pr-ease) calc(var(--t) + 0.1s) forwards;
}

@keyframes pr-knob {
   to {
      transform: translateX(8px);
      stroke: transparent;
   }
}

/* Диалоги: щелчок в поле, текст набирается, сообщение уходит в чат. */
.x-cursor--dialogs {
   --x0: 330px;
   --y0: 120px;
   --x1: 214px;
   --y1: 242px;
}

.is-play .x-cover {
   animation: pr-type 1.6s steps(26) calc(var(--t) + 0.3s) forwards;
}

@keyframes pr-type {
   to {
      transform: translateX(200px);
   }
}

.is-play .x-typed {
   animation: pr-x-out 0.2s ease 3.3s forwards;
}

#screen-dialogs .x-new {
   animation-delay: 3.4s;
}

/* Кассы: уведомление о приходе, столбик октября подрастает, итог меняется. */
.is-play .x-toast {
   animation: pr-toast 0.6s var(--pr-ease) 0.9s forwards;
}

@keyframes pr-toast {
   from {
      opacity: 0;
      transform: translateY(-14px);
   }
   to {
      opacity: 1;
      transform: none;
   }
}

.is-play .x-grow-up {
   animation: pr-grow-up 0.8s var(--pr-ease) 1.3s forwards;
}

@keyframes pr-grow-up {
   to {
      transform: none;
   }
}

/* Окно экрана чуть поворачивается за курсором (--rx, --ry из promo.js). */
.pr-screen {
   perspective: 1400px;
}

.pr-screen__pane {
   transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
   transition: transform 0.4s var(--pr-ease);
}

/* Столбики растут снизу. */
.js .a-rise {
   transform: scaleY(0);
   transform-box: fill-box;
   transform-origin: 50% 100%;
   transition: transform 0.8s var(--pr-ease);
   transition-delay: calc(var(--i, 0) * 90ms + 0.2s);
}

.js .is-in .a-rise {
   transform: none;
}

/* Экран вкладки проигрывает свои a-* заново при каждом показе (`.is-play` от promo.js):
   пока его нет, части в начальном положении и без перехода. */
.js .pr-screen__pane:not(.is-play) :is(.a-pop, .a-row, .a-msg, .a-rise, .a-grow) {
   opacity: 0;
   transition: none;
}

.js .pr-screen__pane:not(.is-play) :is(.a-rise) {
   transform: scaleY(0);
}

.js .pr-screen__pane .a-msg {
   transition-delay: calc(var(--i) * 0.45s + 0.3s);
}

@media (prefers-reduced-motion: reduce) {
   .pr *,
   .pr *::before,
   .pr *::after {
      animation: none !important;
      transition: none !important;
   }

   .js .pr [data-reveal],
   .js .pr .pr-stop__art,
   .js .pr .pr-stop__text,
   .js .pr .pr-chips button,
   .js .pr .a-rise,
   .js .pr .a-grow,
   .js .pr .a-pop,
   .js .pr .a-msg,
   .js .pr .a-row,
   .js .pr .a-stamp,
   .js .pr .pr-in {
      opacity: 1;
      transform: none;
   }

   .js .pr .a-draw,
   .pr .x-check,
   .pr .x-strike {
      stroke-dashoffset: 0;
   }

   .pr .x-in,
   .pr .x-new {
      opacity: 1;
   }

   .pr .x-out,
   .pr .x-cursor,
   .pr .x-slot {
      opacity: 0;
   }
}