/* Вид сайта (владелец, 02–03.11.2026): каркас, зерно, движение, жёлтый растр с тёмными блоками,
   ролики и сборка при прокрутке. Панель переключателей .bg-lab — только с ?lab=1.
   Слои фона лежат внутри #main (isolation: isolate) под плитками; clip-path
   обрезает fixed-слои по краям #main, чтобы они не лезли на шапку и подвал. */
#main { position: relative; isolation: isolate; clip-path: inset(0); }
html[data-bg]:not([data-bg="0"]) #main { background-image: none; }

/* ── 5/6. Шейдер на первом экране ─────────────────────────────────────── */
.bg-hero { position: absolute; left: 0; right: 0; top: 0; height: 110vh; z-index: -1;
  pointer-events: none; display: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
html[data-bg="5"] .bg-hero, html[data-bg="6"] .bg-hero { display: block; }
.bg-hero canvas { width: 100%; height: 100%; display: block; }

/* ── 7. Каркас: фон чуть серее плиток, линии = края колонки ───────────── */
.bg-rails { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; }
html[data-bg="7"] .bg-rails { display: block; }
html[data-bg="7"] #main { background-color: #fafafa; }
.bg-rails .rail { position: absolute; top: 0; bottom: 0; width: 1px; background: #d9d9d9; }
.bg-rails .hline { position: absolute; left: 0; right: 0; height: 1px; background: #d9d9d9; }
.bg-rails .cross { position: absolute; width: 11px; height: 11px; margin: -5px 0 0 -5px; }
.bg-rails .cross::before, .bg-rails .cross::after { content: ""; position: absolute; background: #8d8d8d; }
.bg-rails .cross::before { left: 5px; top: 0; width: 1px; height: 11px; }
.bg-rails .cross::after  { top: 5px; left: 0; height: 1px; width: 11px; }
.bg-rails .pulse { position: absolute; display: block; pointer-events: none; opacity: 0; }
.bg-rails .pulse.v { width: 1px; height: 120px; background: linear-gradient(transparent, #0f62fe 80%, #a6c8ff);
  animation: pulse-v var(--d, 3.2s) cubic-bezier(.4,.14,.3,1) forwards; }
.bg-rails .pulse.h { height: 1px; width: 140px; background: linear-gradient(90deg, transparent, #0f62fe 80%, #a6c8ff);
  animation: pulse-h var(--d, 3.6s) cubic-bezier(.4,.14,.3,1) forwards; }
.bg-rails .pulse::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(15,98,254,.7); }
.bg-rails .pulse.v::after { left: -1px; bottom: -1px; }
.bg-rails .pulse.h::after { top: -1px; right: -1px; }
@keyframes pulse-v { 0% { transform: translateY(0); opacity: 0; } 10%, 70% { opacity: 1; } 100% { transform: translateY(900px); opacity: 0; } }
@keyframes pulse-h { 0% { transform: translateX(0); opacity: 0; } 10%, 70% { opacity: 1; } 100% { transform: translateX(var(--len, 900px)); opacity: 0; } }

/* ── Живое зерно: 1 — на фоне, 2 — ещё и слабо поверх всего ───────────── */
.grain { position: fixed; inset: -120px; pointer-events: none; display: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.6 0 0 0 -.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px; animation: grain 1s steps(8) infinite; }
.grain.bg  { z-index: -1; opacity: .16; }
.grain.top { z-index: 9998; opacity: .07; }
html[data-grain="1"] .grain.bg, html[data-grain="2"] .grain.bg, html[data-grain="2"] .grain.top { display: block; }
@keyframes grain {
  0% { transform: translate(0, 0); } 12% { transform: translate(-37px, 22px); } 25% { transform: translate(51px, -64px); }
  37% { transform: translate(-80px, 13px); } 50% { transform: translate(18px, 77px); } 62% { transform: translate(-25px, -41px); }
  75% { transform: translate(66px, 38px); } 87% { transform: translate(-58px, -90px); } 100% { transform: translate(0, 0); } }

/* ── Слой движения: появление при прокрутке, подсветка под курсором, блик ─ */
html.mo .rv { opacity: 0; transform: translateY(12px);
  transition: opacity 400ms cubic-bezier(0,0,.3,1), transform 400ms cubic-bezier(0,0,.3,1); transition-delay: var(--rd, 0ms); }
html.mo .rv.in { opacity: 1; transform: none; }
html.mo :is(.tile, .row, .plan, .faq details) { position: relative;
  transition: border-color 150ms cubic-bezier(.2,0,.38,.9), transform 150ms cubic-bezier(.2,0,.38,.9); }
html.mo :is(.tile, .row, .faq details)::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--x, -999px) var(--y, -999px), #0f62fe, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 240ms cubic-bezier(.2,0,.38,.9); }
html.mo :is(.tile, .row, .faq details)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--x, -999px) var(--y, -999px), rgba(15,98,254,.06), transparent 70%);
  opacity: 0; transition: opacity 240ms cubic-bezier(.2,0,.38,.9); }
html.mo :is(.tile, .row, .faq details):hover::before, html.mo :is(.tile, .row, .faq details):hover::after { opacity: 1; }
html.mo .tile:hover { transform: translateY(-2px); }
html.mo .button-primary { position: relative; overflow: hidden; }
html.mo .button-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); animation: shine 6s cubic-bezier(.4,.14,.3,1) 1.5s infinite; pointer-events: none; }
html.mo .button-primary:hover::after { animation-duration: 900ms; animation-delay: 0s; }
@keyframes shine { 0% { left: -60%; } 15%, 100% { left: 130%; } }

/* ── Переключатель стенда ─────────────────────────────────────────────── */
.bg-lab { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  max-width: calc(100vw - 32px); background: #161616; border-radius: 10px; font: 13px/1 'Golos Text', sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.bg-lab button { border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; background: transparent; color: #c6c6c6; font: inherit; }
.bg-lab button:hover { background: #393939; color: #fff; }
.bg-lab button[aria-pressed="true"] { background: #0f62fe; color: #fff; }
.bg-lab .sep { width: 1px; background: #393939; margin: 4px 2px; }
.bg-lab .hide { margin-left: auto; }
html.lab-off .bg-lab { opacity: .25; }
/* Фон-растр (halftone.js): холст под страницей, #main прозрачный, чтобы точки было видно. */
canvas.halftone { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: none; }
html[data-ht]:not([data-ht="0"]) canvas.halftone { display: block; }
html[data-ht]:not([data-ht="0"]) body { background: var(--ht-field, #fafafa); }
html[data-ht]:not([data-ht="0"]) #main { background-color: transparent !important; background-image: none !important; }
/* Жёлтый растр: синий на жёлтом — контраст 2,97 (ниже 3:1 по WCAG 1.4.11) и рябь
   противоположных цветов. Акцент — почти чёрный (10,75 на жёлтом), как точки в роликах;
   надпись главной кнопки — жёлтым, в цвет фона. */
html[data-ht="6"] {
  --interactive: #161616; --link: #161616; --link-hover: #393939; --focus: #161616;
  --btn: #161616; --btn-hover: #393939; --btn-active: #000;
}
html[data-ht="6"] .button-primary { color: #f1c21b; }
html[data-ht="6"] .button-secondary:hover { color: #f1c21b; }
html[data-ht="6"] a:not(.button) { text-decoration-color: #f1c21b; text-decoration-thickness: 2px; }
/* Жёлтый растр + тёмные блоки (владелец, 03.11.2026): белое не в тему. Блоки, шапка и подвал —
   тёмная тема Carbon Gray 100; тексты белые, подписи и ссылки — неон из роликов. */
html[data-ht="6"] {
  --bg: #161616; --layer-01: #262626; --layer-02: #393939; --layer-hover: #333333; --field: #262626;
  --border-weak: #393939; --border-subtle: #525252; --border-strong: #6f6f6f;
  --text: #f4f4f4; --text-2: #c6c6c6; --text-helper: #a8a8a8;
  --link: #f1c21b; --link-hover: #ffd84d; --success: #42be65;
  --neon-y: #f1c21b; --neon-t: #00e0c6; --neon-p: #ff2d7a;
}
html[data-ht="6"] .logo img, html[data-ht="6"] .footer-logo img { content: url(/assets/wameup-wordmark.png); }
html[data-ht="6"] .eyebrow { color: var(--neon-y); }
html[data-ht="6"] .tile-num { color: var(--neon-t); }
html[data-ht="6"] .tile-accent { background: #161616; border: 2px solid var(--neon-y); color: var(--text); }
html[data-ht="6"] .tile-accent:hover { background: #262626; }
html[data-ht="6"] .tile-accent :is(h3, .tile-num) { color: var(--neon-y); }
html[data-ht="6"] .tile-accent p { color: var(--text-2); }
html[data-ht="6"] .nav-links a:hover { border-bottom-color: var(--neon-y); }
/* кнопки внутри тёмных блоков и шапки — жёлтые, на жёлтом фоне — чёрные */
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary { background: var(--neon-y); color: #161616; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary { color: var(--neon-y); border-color: var(--neon-y); }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary:hover { background: var(--neon-y); color: #161616; }
html[data-ht="6"] .proj { border-color: #393939; }
/* Каркас на жёлтом: линии и крестики тёмные, как точки растра; бегущие импульсы — индиго-неон
   со свечением вместо синего (владелец, 03.11.2026). */
html[data-ht="6"] .bg-rails :is(.rail, .hline) { background: rgba(22,22,22,.32); }
html[data-ht="6"] .bg-rails .cross::before, html[data-ht="6"] .bg-rails .cross::after { background: #161616; }
html[data-ht="6"] .bg-rails .pulse.v { width: 2px; margin-left: -.5px; background: linear-gradient(transparent, #4a1cff 70%, #b8a3ff); filter: drop-shadow(0 0 2px #4a1cff) drop-shadow(0 0 8px #5b2bff) drop-shadow(0 0 18px #6e3cff); }
html[data-ht="6"] .bg-rails .pulse.h { height: 2px; margin-top: -.5px; background: linear-gradient(90deg, transparent, #4a1cff 70%, #b8a3ff); filter: drop-shadow(0 0 2px #4a1cff) drop-shadow(0 0 8px #5b2bff) drop-shadow(0 0 18px #6e3cff); }
html[data-ht="6"] .bg-rails .pulse::after { background: #fff; box-shadow: 0 0 6px 2px #8a5cff; }
/* Кнопки — долларовый зелёный (владелец, 03.11.2026): чёрные сливались. На жёлтом — тёмная
   купюра #1e5631 (5,13:1 к жёлтому, белая надпись 8,64:1); на тёмном — светлая купюра
   #85bb65 (8,01:1 к #161616) с тёмной надписью. */
html[data-ht="6"] { --btn: #1e5631; --btn-hover: #276b3e; --btn-active: #143d22; --interactive: #1e5631; --focus: #1e5631; }
html[data-ht="6"] .button-primary { color: #fff; }
html[data-ht="6"] .button-secondary:hover { color: #fff; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary { background: #85bb65; color: #161616; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary:hover { background: #9bcb7d; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary { color: #85bb65; border-color: #85bb65; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary:hover { background: #85bb65; color: #161616; }
/* «Чуть зеленее» (владелец, 03.11.2026): на жёлтом #13703a — 3,66:1 к фону, белая надпись 6,16:1;
   на тёмном #5fd16b — 9,32:1. */
html[data-ht="6"] { --btn: #13703a; --btn-hover: #0e5c2f; --btn-active: #0a4523; --interactive: #13703a; --focus: #13703a; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary { background: #5fd16b; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary:hover { background: #7ad985; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary { color: #5fd16b; border-color: #5fd16b; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary:hover { background: #5fd16b; }
/* Зелёный как в дуотоне роликов (владелец, 03.11.2026): #24a148 везде, надпись тёмная —
   5,40:1 (белая была бы 3,35:1). Край кнопки к жёлтому — 1,99:1: держится на разнице оттенка. */
html[data-ht="6"] { --btn: #24a148; --btn-hover: #2fb556; --btn-active: #198038; --interactive: #24a148; --focus: #161616; }
html[data-ht="6"] .button-primary, html[data-ht="6"] .button-secondary:hover { color: #161616; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary { background: #24a148; color: #161616; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-primary:hover { background: #2fb556; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary { color: #42be65; border-color: #24a148; }
html[data-ht="6"] :is(.nav, .tile, .row, .faq, .contact-box, .site-footer) .button-secondary:hover { background: #24a148; color: #161616; }
html[data-ht="6"] .button-secondary { color: #161616; border-color: #161616; }
/* Сборка при прокрутке (assemble.js): блок въезжает сбоку и проявляется. */
#main { overflow-x: clip; }
/* #main — чтобы перебить переходы плиток из html.mo (там 150 мс и без прозрачности). */
#main .asm { opacity: 0; transform: translateX(var(--asx, 0)) scale(.98);
  transition: opacity 700ms cubic-bezier(0,0,.3,1) var(--asd, 0ms), transform 700ms cubic-bezier(0,0,.3,1) var(--asd, 0ms),
    border-color 150ms cubic-bezier(.2,0,.38,.9), background-color 110ms; }
#main .asm.in { opacity: 1; transform: none; }
/* после въезда — прежний подъём плитки под курсором, быстрый */
html.mo #main .asm.in.tile:hover { transform: translateY(-2px); transition-delay: 0ms; transition-duration: 150ms; }
/* Импульсы — просто чёрные, без свечения (владелец, 03.11.2026): индиго не в гамме. */
html[data-ht="6"] .bg-rails .pulse.v { background: linear-gradient(transparent, #161616 80%); filter: none; }
html[data-ht="6"] .bg-rails .pulse.h { background: linear-gradient(90deg, transparent, #161616 80%); filter: none; }
html[data-ht="6"] .bg-rails .pulse::after { background: #161616; box-shadow: none; }