/* «Мастеровой» 3D: слой поверх styles.css.
   Мир тот же (шелкография, три краски), но бумага стала объёмной: слои краски разнесены по Z,
   у карточек есть толщина, заголовки выдавлены. Всё движение выключается при prefers-reduced-motion. */

:root {
  --ex-sun:   1px 1px 0 var(--sun),  2px 2px 0 var(--sun),  3px 3px 0 var(--sun),  4px 4px 0 var(--sun),  5px 5px 0 var(--sun),  6px 6px 0 var(--sun);
  --ex-navy:  1px 1px 0 var(--navy), 2px 2px 0 var(--navy), 3px 3px 0 var(--navy), 4px 4px 0 var(--navy), 5px 5px 0 var(--navy), 6px 6px 0 var(--navy);
  --ex-blue:  1px 1px 0 var(--blue), 2px 2px 0 var(--blue), 3px 3px 0 var(--blue), 4px 4px 0 var(--blue), 5px 5px 0 var(--blue), 6px 6px 0 var(--blue);
  --ex-white: 1px 1px 0 #fff, 2px 2px 0 #fff, 3px 3px 0 #fff, 4px 4px 0 #fff, 5px 5px 0 #fff, 6px 6px 0 #fff;
  --slab: var(--navy);
}

html { overflow-x: clip; }
.js-3d main { overflow-x: clip; }

/* ---------- Брутализм: жёсткие тени и «нажимаемые» кнопки ---------- */
.btn { border-width: 3px; }
.btn-primary { box-shadow: 5px 5px 0 var(--navy); }
.btn-secondary { box-shadow: 5px 5px 0 var(--blue); background: var(--white); }
.btn-blue { box-shadow: 5px 5px 0 var(--navy); }
.btn-primary:hover, .btn-secondary:hover, .btn-blue:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--navy); }
.btn-secondary:hover { box-shadow: 7px 7px 0 var(--navy); }
.btn-primary:active, .btn-secondary:active, .btn-blue:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--navy); }
.btn[disabled] { box-shadow: none; }
.dock .btn { box-shadow: 3px 3px 0 var(--navy); }
.dock .btn:active { transform: translate(3px, 3px); box-shadow: none; }
.msg-toggle[aria-expanded="true"] { box-shadow: 0 0 0 var(--navy); transform: translate(5px, 5px); }

/* ---------- Заголовки: выдавленные, на каждой плоскости свой цвет ---------- */
.h2 { text-shadow: var(--ex-sun); padding-bottom: 6px; }
.h2 .ink-2 { text-shadow: var(--ex-navy); }
.trust .h2, .order .h2 { text-shadow: var(--ex-navy); }
.trust .h2 .ink-2, .order .h2 .ink-2 { text-shadow: var(--ex-navy); }
.order .h2 { text-shadow: var(--ex-blue); }
.business .h2 { text-shadow: var(--ex-white); }
.business .h2 .ink-2 { text-shadow: var(--ex-white); }

.hero-title .ht-1 { text-shadow: var(--ex-blue); }
.hero-title .ht-2 { text-shadow: var(--ex-navy); }
.hero-title .ht-3 { text-shadow: var(--ex-sun); }
.ht-field { display: inline-block; text-shadow: none; box-shadow: 7px 7px 0 var(--navy); transform: rotate(-1.6deg); }
.hero-phone { text-shadow: 3px 3px 0 var(--sun); }
.rating-num { text-shadow: var(--ex-sun); }
.steps li::before { text-shadow: 3px 3px 0 var(--sun), 4px 4px 0 var(--sun), 5px 5px 0 var(--sun); }
.plate-num { text-shadow: 1px 1px 0 var(--white), 2px 2px 0 var(--white), 3px 3px 0 var(--white), 4px 4px 0 var(--white), 5px 5px 0 var(--white), 6px 6px 0 var(--white), 7px 7px 0 var(--navy); }

/* ================= 3D-режим: включает three-d.js, если нет prefers-reduced-motion ================= */

/* Универсальный 3D-контейнер: наклон за курсором + «вставание» при прокрутке */
.js-3d [data-3d] {
  transform: perspective(1100px) translate3d(0, var(--ty, 0px), 0) rotateX(calc(var(--rx, 0deg) + var(--rvx, 0deg))) rotateY(var(--ry, 0deg));
  transform-origin: 50% 70%; transform-style: preserve-3d;
  transition: transform .8s var(--ease-out), opacity .6s ease-out;
}
.js-3d [data-3d].rv { --rvx: -42deg; --ty: 80px; opacity: 0; }
.js-3d [data-3d].rv-in { transition-delay: var(--dl, 0ms); }

/* Карточки услуг и плашка: толщина и «выпрыгивание» */
.js-3d .svc::before, .js-3d .plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius);
  background: var(--slab); transform: translate3d(12px, 12px, -26px); pointer-events: none;
}
.js-3d .svc { isolation: auto; }
.js-3d .plate { position: relative; }
.js-3d .plate::before { background: var(--navy); }
.js-3d .svc--paper { --slab: var(--navy); }
.js-3d .svc--blue { --slab: var(--navy); }
.js-3d .svc--yellow { --slab: var(--blue); }
.js-3d .svc-fig, .js-3d .svc-title, .js-3d .price-list, .js-3d .svc-foot, .js-3d .plate-num { transition: transform .35s var(--ease-out); }
/* Наведение: карточка слегка приподнимается, толщина растёт; за курсором не следит */
@media (hover: hover) and (pointer: fine) {
  .js-3d .svc:hover { --ty: -6px; transition: transform .25s var(--ease-out); }
  .js-3d .svc:hover::before { transform: translate3d(16px, 16px, -26px); }
  .js-3d .svc:hover .svc-fig { transform: translateZ(22px); }
}
.js-3d .svc::before { transition: transform .25s var(--ease-out); }

/* Печатные номера и цитаты немного «встают» */
.js-3d .steps li, .js-3d .quote, .js-3d .rating { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-secondary:hover, .btn-blue:hover { transform: none; }
}

/* Плашка: цифра подгоняется под ширину плашки */
.plate { container-type: inline-size; }
.plate-num { font-size: min(6rem, 15.5cqi); }