/* included.css — блок «Что входит»: четыре карточки поверх фона, где детали
   механизма (шестерёнки, гайки, болты, ключ, отвёртка, пружина, подшипник)
   «вылетают в экран»: из глубины маленькими и прозрачными, к зрителю крупными,
   и растворяются у края. Направление полёта задаёт свойство rotate у детали,
   сам полёт — общие кадры (только transform и opacity). Прозрачность берётся
   из цвета линии (0,13–0,18), поэтому текст читается. included.js ставит паузу,
   пока блок не на экране. «Уменьшить движение» — неподвижная россыпь. */

.included {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-5, 4rem);
  color: var(--ink, #f2efe9);
  font-family: var(--font-body, "Onest", system-ui, sans-serif);
}
.included > .container { position: relative; z-index: 1; }

/* ---------- фон с деталями ---------- */
.included__gears {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
}
.included__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.included__p {
  position: absolute; display: block; height: auto;
  color: rgba(201, 169, 97, .18);                 /* латунь */
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  animation: included-fly 16s cubic-bezier(.4, .1, .75, .6) infinite;
}
.included__p:nth-child(even) { color: rgba(242, 239, 233, .13); }   /* светлый камень */
.included__p:nth-child(5n) { color: rgba(224, 201, 140, .16); }     /* светлая латунь */
.included__p--spin { animation-name: included-spin; }
.included__p--spin-r { animation-name: included-spin-r; }

/* место старта, размер, направление полёта (rotate), длительность, сдвиг по фазе */
.included__p:nth-child(1)  { left: 34%; top: 30%; width: 9rem;   rotate: 225deg; animation-duration: 22s; animation-delay: -7s; }
.included__p:nth-child(2)  { left: 62%; top: 20%; width: 4rem;   rotate: 295deg; animation-duration: 13s; animation-delay: -2s; }
.included__p:nth-child(3)  { left: 16%; top: 58%; width: 10rem;  rotate: 168deg; animation-duration: 17s; animation-delay: -11s; }
.included__p:nth-child(4)  { left: 70%; top: 52%; width: 6.5rem; rotate: 8deg;   animation-duration: 15s; animation-delay: -9s; }
.included__p:nth-child(5)  { left: 48%; top: 10%; width: 2.6rem; rotate: 268deg; animation-duration: 12s; animation-delay: -4s; }
.included__p:nth-child(6)  { left: 26%; top: 76%; width: 6rem;   rotate: 132deg; animation-duration: 19s; animation-delay: -13s; }
.included__p:nth-child(7)  { left: 60%; top: 70%; width: 9rem;   rotate: 62deg;  animation-duration: 16s; animation-delay: -5s; }
.included__p:nth-child(8)  { left: 86%; top: 30%; width: 2.4rem; rotate: 331deg; animation-duration: 11s; animation-delay: -7s; }
.included__p:nth-child(9)  { left: 6%;  top: 16%; width: 5.5rem; rotate: 218deg; animation-duration: 18s; animation-delay: -15s; }
.included__p:nth-child(10) { left: 90%; top: 72%; width: 3.8rem; rotate: 29deg;  animation-duration: 10s; animation-delay: -3s; }
.included__p:nth-child(11) { left: 44%; top: 42%; width: 5rem;   rotate: 233deg; animation-duration: 20s; animation-delay: -17s; }
.included__p:nth-child(12) { left: 8%;  top: 86%; width: 2.4rem; rotate: 139deg; animation-duration: 14s; animation-delay: -10s; }
.included__p:nth-child(13) { left: 78%; top: 8%;  width: 7.5rem; rotate: 304deg; animation-duration: 21s; animation-delay: -12s; }
.included__p:nth-child(14) { left: 52%; top: 60%; width: 5rem;   rotate: 79deg;  animation-duration: 13s; animation-delay: -8s; }

/* Полёт к зрителю: из глубины (0.3) мимо камеры (1.7–2). Сдвиг идёт вдоль rotate детали,
   кривая с разгоном — ближние предметы летят быстрее, как в перспективе. */
@keyframes included-fly {
  0%      { transform: translateX(0) scale(.3) rotate(-25deg); opacity: 0; }
  14%, 72% { opacity: 1; }
  100%    { transform: translateX(22rem) scale(2) rotate(15deg); opacity: 0; }
}
@keyframes included-spin {
  0%      { transform: translateX(0) scale(.3) rotate(0); opacity: 0; }
  14%, 72% { opacity: 1; }
  100%    { transform: translateX(16rem) scale(1.8) rotate(200deg); opacity: 0; }
}
@keyframes included-spin-r {
  0%      { transform: translateX(0) scale(.3) rotate(0); opacity: 0; }
  14%, 72% { opacity: 1; }
  100%    { transform: translateX(18rem) scale(1.6) rotate(-160deg); opacity: 0; }
}

/* included.js: блок за экраном — детали стоят */
.included.is-js:not(.is-visible) .included__p { animation-play-state: paused; }

/* ---------- шапка ---------- */
.included__head { max-width: 42rem; margin: 0 0 var(--space-4, 2.5rem); }
.included__head h2 {
  margin: 0;
  font-family: var(--font-head, "Manrope", system-ui, sans-serif);
  font-weight: 800; font-size: clamp(1.7rem, 3.3vw, 2.4rem);
  line-height: 1.12; letter-spacing: -.02em;
}

/* ---------- карточки ---------- */
.included__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
.included__card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2.2vw, 1.75rem);
  background: linear-gradient(180deg, rgba(242, 239, 233, .04), transparent 60%), rgba(21, 24, 28, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line, #24282e); border-radius: var(--radius-lg, 24px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              border-color .3s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              box-shadow .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
/* латунная риска над заголовком; при наведении вытягивается */
.included__card::before {
  content: ""; display: block; width: 1.75rem; height: 2px; margin-bottom: 1.1rem;
  border-radius: 2px; background: linear-gradient(90deg, #c9a961, #e0c98c);
  transform-origin: left; transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.included__card h3 {
  margin: 0 0 .5rem; color: var(--ink, #f2efe9);
  font-family: var(--font-head, "Manrope", system-ui, sans-serif);
  font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.25;
}
.included__card p { margin: 0; color: var(--ink-soft, #b4b1aa); font-size: .98rem; line-height: 1.6; }

@media (hover: hover) {
  .included__card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 169, 97, .45);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .included__card:hover::before { transform: scaleX(1.7); }
}

/* без размытия под стеклом — непрозрачная карточка */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .included__card { background: linear-gradient(180deg, rgba(242, 239, 233, .04), transparent 60%), #15181c; }
}

@media (min-width: 760px) {
  .included__grid { grid-template-columns: repeat(2, 1fr); }
}

/* телефон: 8 деталей вместо 14 — по одной каждого вида */
@media (max-width: 759px) {
  .included__p:nth-child(n+9) { display: none; }
}

/* «уменьшить движение»: детали стоят россыпью, карточки не подпрыгивают */
@media (prefers-reduced-motion: reduce) {
  .included__p { animation: none; transform: translateX(5rem) scale(.95); }
  .included__p:nth-child(3n) { transform: translateX(9rem) scale(1.25); }
  .included__p:nth-child(3n+1) { transform: translateX(2rem) scale(.7); }
  .included__card, .included__card::before { transition: none; }
  .included__card:hover { transform: none; }
}