/* ==========================================================================
   БЛИЗНЕЦ (twin.html) — надстройка над styles.css. НЕ подключать на index.html.
   Светлая тема + цеховой декор: штукатурка, кирпич, неон-вывеска,
   тарифы-сборка, стекло и разгон диска.
   ========================================================================== */

/* ---------- Штукатурка по всему фону (лёгкий шум поверх дымки) ---------- */
.bg-plaster{
  position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.05'/></feComponentTransfer></filter><rect width='280' height='280' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ---------- Облезлая штукатурка: пятна с кирпичом ---------- */
.brick-patch{
  position:absolute; pointer-events:none;
  /* кладка со смещением рядов (SVG-паттерн: кирпичи + швы) */
  /* настоящий кирпич (фото, CC0) + тёмная кромка по рваному краю = глубина пролома */
  background:
    radial-gradient(60% 60% at 50% 50%, transparent 40%, rgba(30,15,8,.55) 92%),
    url('../images/dark/brick.jpg');
  background-size:cover, 380px;
  /* рваный край: эллипс, изодранный турбулентным шумом (как осыпавшаяся штукатурка) */
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='260'><filter id='r' x='-30%' y='-30%' width='160%' height='160%'><feTurbulence type='fractalNoise' baseFrequency='0.045 0.09' numOctaves='4' seed='11'/><feDisplacementMap in='SourceGraphic' scale='46'/></filter><ellipse cx='200' cy='130' rx='150' ry='82' fill='black' filter='url(%23r)'/></svg>") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='260'><filter id='r' x='-30%' y='-30%' width='160%' height='160%'><feTurbulence type='fractalNoise' baseFrequency='0.045 0.09' numOctaves='4' seed='11'/><feDisplacementMap in='SourceGraphic' scale='46'/></filter><ellipse cx='200' cy='130' rx='150' ry='82' fill='black' filter='url(%23r)'/></svg>") center/100% 100% no-repeat;
  opacity:.85; filter:saturate(.9) brightness(1.06);
}
.bp-1{ top:6%; left:-7%; width:36vw; height:24vh; transform:rotate(-3deg); }
.bp-2{ top:60%; right:-9%; width:32vw; height:20vh; transform:rotate(2deg) scaleX(-1); opacity:.7; }
@media (max-width:760px){ .bp-1{ width:70vw; } .bp-2{ display:none; } }

/* ---------- Неон-вывеска над блоком «Сначала — один ролик» ----------
   Цвета строго из лого: НЕЙРО — фиолетовый, ЦЕХ — оранжевый. «О» подгорает. */
.neon-sign{ display:flex; justify-content:center; margin-bottom:26px; position:relative; }
.neon-word{
  display:inline-block; padding:18px 34px 16px; border-radius:14px; position:relative;
  background:linear-gradient(170deg,#241F2E,#1B1722);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px rgba(20,20,40,.35);
  font-family:var(--font-head); font-weight:800; font-size:clamp(24px,4.6vw,44px); letter-spacing:.06em;
}
.neon-word::after{ /* крепёж таблички */
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:54%; height:6px; border-radius:4px; background:#8A939E;
}
.nv{ color:#E4D5FF;
  text-shadow:0 0 6px rgba(77,0,255,.95),0 0 16px rgba(77,0,255,.75),0 0 40px rgba(107,43,255,.55); }
.nv-off{ color:#4A3B66; text-shadow:none; animation:twinFlick 6.5s linear infinite; }
.no{ color:#FFE0C4; margin-left:.35em;
  text-shadow:0 0 6px rgba(255,106,0,.95),0 0 16px rgba(255,106,0,.75),0 0 40px rgba(255,143,64,.5); }
@keyframes twinFlick{
  0%,90%,100%{ color:#4A3B66; text-shadow:none; }
  91%,93%{ color:#E4D5FF; text-shadow:0 0 6px rgba(77,0,255,.95),0 0 16px rgba(77,0,255,.75); }
  92%,96%{ color:#4A3B66; text-shadow:none; }
  97%{ color:#E4D5FF; text-shadow:0 0 6px rgba(77,0,255,.95); }
}

/* ---------- «Сначала попробуйте»: три шага ---------- */
.try-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:920px; margin:0 auto; }
.try-step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow); text-align:left;
}
.try-step b{ font-family:var(--font-head); font-size:26px; color:var(--orange); display:block; margin-bottom:10px; }
.try-step h3{ font-size:18px; margin-bottom:6px; }
.try-step p{ color:var(--ink-dim); font-size:14.5px; }
.try-cta{ text-align:center; margin-top:28px; }
@media (max-width:760px){ .try-steps{ grid-template-columns:1fr; gap:14px; } }

/* ---------- Тарифы: сборка карточек из деталей ---------- */
.asm-tier{ position:relative; }
.asm-tier .asm-el{ opacity:0; transition:transform .9s var(--ease), opacity .8s; }
.asm-tier h3.asm-el{ transform:translate(-60px,-26px) rotate(-8deg); }
.asm-tier .price.asm-el{ transform:translate(70px,0) skewX(-8deg); }
.asm-tier ul.asm-el{ transform:translate(0,48px); }
.asm-tier .btn.asm-el{ transform:translate(0,70px) scale(.7); }
.asm-tier .bolt{
  position:absolute; width:9px; height:9px; border-radius:50%; z-index:1;
  background:radial-gradient(circle at 35% 35%, #FFC79B, var(--orange) 65%);
  box-shadow:0 0 7px rgba(255,106,0,.7); opacity:0;
  transition:transform 1.1s var(--ease), opacity .5s;
}
.asm-tier .b1{ top:10px; left:10px; transform:translate(-30vw,-16vh); }
.asm-tier .b2{ top:10px; right:10px; transform:translate(30vw,-16vh); }
.asm-tier .b3{ bottom:10px; left:10px; transform:translate(-30vw,16vh); }
.asm-tier .b4{ bottom:10px; right:10px; transform:translate(30vw,16vh); }
.asm-tiers.in .asm-el, .asm-tiers.in .bolt{ opacity:1; transform:none; }
.asm-tiers.in .tier:nth-child(2) .asm-el{ transition-delay:.12s; }
.asm-tiers.in .tier:nth-child(3) .asm-el{ transition-delay:.24s; }
.asm-tiers.in .tier .b2{ transition-delay:.08s; }
.asm-tiers.in .tier .b3{ transition-delay:.16s; }
.asm-tiers.in .tier .b4{ transition-delay:.24s; }
/* сборка заменяет обычный reveal, чтобы не двигалось дважды */
.asm-tier.reveal{ opacity:1; transform:none; }

/* ---------- Диск: стекло над платой + слой разгона ---------- */
.saw-rev{ will-change:transform; }
.saw-rev .saw-spin{ position:absolute; inset:0; }
.saw-glass{
  inset:11.5%; pointer-events:none; z-index:2;
  background:
    radial-gradient(58% 42% at 32% 24%, rgba(255,255,255,.42), rgba(255,255,255,.10) 55%, transparent 68%),
    radial-gradient(30% 22% at 72% 78%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(circle, transparent 62%, rgba(120,140,180,.10) 84%, rgba(255,255,255,.28) 97%);
  box-shadow:inset 0 1px 6px rgba(255,255,255,.5), inset 0 -10px 26px rgba(30,50,90,.12);
}

/* канвас искр из-под диска — поверх всего, клики пропускает */
#twinSparks{ position:fixed; inset:0; width:100%; height:100%; z-index:60; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .asm-tier .asm-el, .asm-tier .bolt{ opacity:1 !important; transform:none !important; }
  .nv-off{ animation:none; }
}

/* Каскадные появления блоков (перенос с полигона) */
.reveal{ opacity:0; transform:translateY(34px) scale(.965); transition:opacity .7s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.cards .card:nth-child(2), .benefits .benefit:nth-child(2){ transition-delay:.08s; }
.cards .card:nth-child(3), .benefits .benefit:nth-child(3){ transition-delay:.16s; }
.cards .card:nth-child(4), .benefits .benefit:nth-child(4){ transition-delay:.24s; }
.cards .card:nth-child(5){ transition-delay:.32s; }
.cards .card:nth-child(6){ transition-delay:.40s; }
.gallery .work:nth-child(even){ transition-delay:.12s; }
.faq details:nth-child(even){ transition-delay:.1s; }
.try-steps .try-step:nth-child(2){ transition-delay:.12s; }
.try-steps .try-step:nth-child(3){ transition-delay:.24s; }

/* ==========================================================================
   ФОН v2 (07-10): чертёжный слой, лучи из окон, импульсы сетки, тепло к брифу
   ========================================================================== */
.bg-rays{
  position:absolute; inset:0;
  background:
    linear-gradient(112deg, transparent 12%, rgba(255,255,255,.34) 16%, transparent 21%),
    linear-gradient(112deg, transparent 30%, rgba(255,255,255,.22) 34%, transparent 40%),
    linear-gradient(112deg, transparent 55%, rgba(255,255,255,.26) 60%, transparent 67%);
  -webkit-mask:linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 45%, transparent 78%);
          mask:linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 45%, transparent 78%);
  animation:raysBreathe 9s var(--ease) infinite;
}
@keyframes raysBreathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.bg-blueprint{
  position:absolute; inset:-12% 0; opacity:.5; will-change:transform;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='820'><g fill='none' stroke='%237A8698' stroke-width='1.3'><circle cx='215' cy='215' r='120'/><circle cx='215' cy='215' r='76' stroke-dasharray='6 10'/><path d='M65 215 h300 M215 65 v300' stroke-dasharray='14 8 3 8'/><path d='M65 480 h290'/><path d='M65 480 l15 -6 v12 z' fill='%237A8698'/><path d='M355 480 l-15 -6 v12 z' fill='%237A8698'/><path d='M65 464 v32 M355 464 v32'/><path d='M790 130 h90 M790 130 v90'/><path d='M1035 640 h-90 M1035 640 v-90'/><path d='M745 600 h34 M762 583 v34'/><circle cx='860' cy='300' r='5'/><path d='M830 300 h60 M860 270 v60' stroke-dasharray='10 6 2 6'/><circle cx='935' cy='455' r='26'/><path d='M927 443 v24 l20 -12 z' fill='%237A8698' fill-opacity='.5'/><path d='M430 730 h250'/><path d='M470 730 l6 -6 l6 6 l-6 6 z M560 730 l6 -6 l6 6 l-6 6 z M650 730 l6 -6 l6 6 l-6 6 z' fill='%237A8698' fill-opacity='.5'/><path d='M430 722 v16 M680 722 v16'/></g></svg>") 0 0/1100px 820px repeat;
}

.bg-temp{
  position:absolute; inset:0; opacity:0; will-change:opacity;
  background:
    radial-gradient(60% 50% at 78% 68%, rgba(255,106,0,.16), transparent 65%),
    radial-gradient(50% 42% at 16% 88%, rgba(255,143,64,.12), transparent 60%),
    linear-gradient(180deg, transparent 30%, rgba(255,122,26,.07));
}

.grid-pulse{
  position:fixed; z-index:-1; pointer-events:none; border-radius:4px; opacity:0;
}
.grid-pulse.h{ height:2px; width:120px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  box-shadow:0 0 10px currentColor; }
.grid-pulse.v{ width:2px; height:120px;
  background:linear-gradient(180deg, transparent, currentColor, transparent);
  box-shadow:0 0 10px currentColor; }

/* Вывеска = настоящий рендер логотипа (тёмная табличка на светлой стене) */
.sign-plaque{
  display:inline-block; position:relative; border-radius:16px; overflow:hidden;
  box-shadow:0 22px 54px rgba(20,25,50,.38), 0 0 0 3px #2A2E36, 0 0 0 4px rgba(255,255,255,.25);
}
.sign-plaque::after{ /* крепёж над табличкой */
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:52%; height:5px; border-radius:0 0 4px 4px; background:rgba(138,147,158,.65);
}
.sign-logo{ display:block; width:min(480px,84vw); }

/* Вертикальный ритм вдвое плотнее (только близнец) */
.section{ padding:48px clamp(16px,4vw,40px); }
@media (max-width:760px){ .section{ padding:30px 16px; } }

/* Живая вывеска: прозрачный рендер клиента, неон моргает, пламя дышит */
.sign-live{ position:relative; display:inline-block; }
.sign-live img{ display:block; width:min(560px,88vw); }
.sl-neon, .sl-flame{ position:absolute; inset:0; }
.sl-neon{ clip-path:inset(0 46% 0 0); animation:neonBlink 7s linear infinite; }
.sl-flame{ clip-path:inset(0 0 0 55%); transform-origin:50% 88%;
  animation:flameLive 2.3s ease-in-out infinite; }
@keyframes neonBlink{
  0%,86%,100%{ opacity:1; filter:none; }
  87%,89%{ opacity:.25; filter:brightness(.7); }
  88%,91%{ opacity:1; filter:brightness(1.35) drop-shadow(0 0 14px rgba(80,180,255,.8)); }
  90%{ opacity:.45; }
  95%{ opacity:1; filter:brightness(1.15); }
}
@keyframes flameLive{
  0%,100%{ filter:brightness(1) saturate(1); transform:scaleY(1); }
  30%{ filter:brightness(1.22) saturate(1.15) drop-shadow(0 0 18px rgba(255,120,20,.55)); transform:scaleY(1.015); }
  55%{ filter:brightness(.94) saturate(.95); transform:scaleY(.995); }
  75%{ filter:brightness(1.12) saturate(1.1); transform:scaleY(1.01); }
}
@media (prefers-reduced-motion: reduce){ .sl-neon,.sl-flame{ animation:none; } }

/* Контроль полей: ничто не тянет страницу вбок (болты сборки на iOS) */
html, body{ overflow-x:clip; }
main{ overflow-x:clip; }

/* Интро: медленнее (меньше заметна неровность зубьев арта) + богаче фон */
.intro-disc img{ animation-duration:52s; }
.intro::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(40% 34% at 18% 22%, rgba(107,43,255,.10), transparent 65%),
    radial-gradient(38% 32% at 84% 76%, rgba(255,106,0,.10), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='820'><g fill='none' stroke='%237A8698' stroke-width='1.3'><circle cx='215' cy='215' r='120'/><circle cx='215' cy='215' r='76' stroke-dasharray='6 10'/><path d='M65 215 h300 M215 65 v300' stroke-dasharray='14 8 3 8'/><path d='M65 480 h290'/><path d='M65 480 l15 -6 v12 z' fill='%237A8698'/><path d='M355 480 l-15 -6 v12 z' fill='%237A8698'/><path d='M65 464 v32 M355 464 v32'/><path d='M790 130 h90 M790 130 v90'/><path d='M1035 640 h-90 M1035 640 v-90'/><circle cx='935' cy='455' r='26'/><path d='M927 443 v24 l20 -12 z' fill='%237A8698' fill-opacity='.5'/><path d='M430 730 h250'/><path d='M470 730 l6 -6 l6 6 l-6 6 z M560 730 l6 -6 l6 6 l-6 6 z' fill='%237A8698' fill-opacity='.5'/></g></svg>") 0 0/900px repeat;
}