/* =========================================================
   /new/ — общий WebGL-тоннель на фоне (все страницы тестовой
   версии). Вынесено из new/index.html 2026-09-08.
   Переопределения поверх общего /assets/css/style.css:
   фон страницы отдаёт сцене, секции — полупрозрачные плашки.

   Разметка, которую ждёт этот файл (и tunnel-bg.js), — сразу
   после <body>:
     <div id="gl-fallback" aria-hidden="true"></div>
     <canvas id="scene" hidden aria-hidden="true"></canvas>
     <div id="scene-shade" aria-hidden="true"></div>

   Вариант для рабочих инструментов (страницы services/*):
   класс tunnel-dim на <body> — canvas тусклее (.55) и шторка
   плотнее, чтобы формы отлично читались.
   ========================================================= */

/* Тело: убираем «фиксированные» градиенты старой темы — фоном теперь
   либо WebGL-canvas, либо статичный радиальный градиент (фолбэк). */
body{
  background: #070812;
  background-image: none;
}

/* Статичный фолбэк — всегда в разметке; когда WebGL стартует,
   canvas (следующий в DOM, тот же z-index) просто перекрывает его. */
#gl-fallback{
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(circle at 50% 40%, #0e1c3a 0%, #070812 70%);
  pointer-events: none;
}

/* WebGL-сцена: фиксированный canvas ЗА всем контентом */
#scene{
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  display: block;
  pointer-events: none; /* клики/скролл проходят к контенту; мышь читаем с window */
}
#scene[hidden]{ display: none; } /* пока JS не решил запускать WebGL */

/* Притеняющий слой между сценой и контентом (фидбэк владельца 08.09
   ~00:50: «текст сливается»): слева, где живёт hero-текст, — плотное
   затемнение, к центру сходит на нет; плюс лёгкая общая виньетка. */
#scene-shade{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,14,.82) 0%, rgba(5,7,14,.62) 30%,
                    rgba(5,7,14,.22) 55%, rgba(5,7,14,.08) 75%, rgba(5,7,14,.28) 100%),
    radial-gradient(ellipse at 50% 110%, rgba(5,7,14,.55) 0%, rgba(5,7,14,0) 55%);
}
@media (max-width: 900px){
  /* на узких экранах текст занимает всю ширину — темним равномернее */
  #scene-shade{ background: rgba(5,7,14,.6); }
}
/* сам canvas дополнительно приглушаем */
#scene{ opacity: .82; }

/* Контент — поверх сцены. #app — корень app-разметки страницы
   «Фотопривязка» (services/photo.html), у которой нет <main>. */
main, #app, .site-footer{ position: relative; z-index: 1; }

/* Hero главной полностью прозрачный: тоннель виден целиком.
   .page-hero внутренних страниц прозрачен сам по себе (в style.css
   у него нет фона) — тоннель просвечивает и там. */
.hero{ background: transparent; }

/* Остальные секции — полупрозрачная плашка, чтобы текст читался.
   .section--tight на внутренних страницах бывает без .section —
   поэтому перечислен отдельно. backdrop-filter сознательно
   не используем (дорого на телефонах). */
.section, .section--tight, .strip{
  background: rgba(10,11,18,.92);
  backdrop-filter: none;
}
.site-footer{
  background: rgba(10,11,18,.94);
}

/* Шапка: вместо blur по WebGL-канвасу (дорого) — чуть плотнее фон */
.site-header{
  background: rgba(10,11,18,.88);
  backdrop-filter: none;
}

/* Читаемость hero-текста поверх яркого центра тоннеля.
   drop-shadow (а не text-shadow) — из-за градиентного заголовка
   с background-clip:text, где text-shadow просвечивал бы сквозь буквы. */
.hero h1{ filter: drop-shadow(0 2px 6px rgba(4,6,12,.85)) drop-shadow(0 0 22px rgba(4,6,12,.6)); }
.hero-sub, .hero-meta{
  text-shadow: 0 1px 3px rgba(4,6,12,.9), 0 2px 14px rgba(4,6,12,.7);
}

/* Заголовки page-hero внутренних страниц — та же защита от яркого центра */
.page-hero h1{ filter: drop-shadow(0 2px 6px rgba(4,6,12,.85)) drop-shadow(0 0 22px rgba(4,6,12,.6)); }
.page-hero p, .breadcrumb{
  text-shadow: 0 1px 3px rgba(4,6,12,.9), 0 2px 14px rgba(4,6,12,.7);
}

/* =========================================================
   Вариант «рабочий инструмент» (services/*): body.tunnel-dim.
   Тоннель — лёгкая атмосфера, а не шоу: canvas ~0.55 и ровная
   плотная шторка вместо косого градиента.
   ========================================================= */
body.tunnel-dim #scene{ opacity: .55; }
body.tunnel-dim #scene-shade{
  background:
    rgba(5,7,14,.55);
}
@media (max-width: 900px){
  body.tunnel-dim #scene-shade{ background: rgba(5,7,14,.68); }
}

/* Телефон (<680px, как гейт в tunnel-bg.js): текст шапок страниц лежит прямо
   на точках тоннеля — шторка плотнее (ревизия 08.10). */
@media (max-width: 679px){
  #scene-shade{ background: rgba(5,7,14,.78); }
  body.tunnel-dim #scene-shade{ background: rgba(5,7,14,.8); }
}