/* ============================================================
   Glass FX - приёмы из референса «frosted glass»: остекление
   поверхностей и фоновая атмосфера. Шрифты и цвета сайта не тронуты:
   те же токены --fg / --bg / --accent, те же формы. Меняется только
   подача поверхности: вместо плоской заливки с одной рамкой - блик
   по верхней кромке изнутри, мягкое внутреннее свечение и тёмный
   контактный отброс; под всеми страницами - неподвижный дальний фон
   hero: координатная сетка с пятном света сверху.

   Подключается последним. Со scroll-fx.css не спорит: в стопке «Работ»
   тень обнулена намеренно и сильнее по специфичности - там карточки
   остаются плоскими, пока складываются. Кнопки не трогаем: у них своя
   «жемчужная» поверхность, задуманная отдельно (см. style.css).
   Снять эффект: убрать подключение файла - разметка не менялась.
   ============================================================ */

:root {
  /* три слоя «стекла» на цветах сайта: тёплый белый --fg и чёрный */
  --fx-glass-ring:
    inset 0 1px 1px rgba(246, 243, 236, 0.12),
    inset 0 24px 48px rgba(246, 243, 236, 0.035);
  --fx-glass-drop: 0 20px 40px rgba(0, 0, 0, 0.35);
  --fx-glass-ring-soft: inset 0 1px 1px rgba(246, 243, 236, 0.10);
}

/* --- дальний фон всех страниц: как на hero главной ---------------------
   Один неподвижный слой под всем содержимым (position: fixed, z-index -1):
   тёмный радиальный градиент hero, сетка 1px шагом 88px на --fg в 4% и
   пятно на --accent сверху; к нижнему краю экрана сетка гаснет маской.
   Слой не прокручивается, секции едут поверх него. Поэтому своей сетки у
   .hy-root и .hero-glow больше нет: две сетки при прокрутке расходились бы
   двойными линиями, а hero без своей подложки не даёт шва на границе.
   Фон body снят: body рисуется поверх слоёв с отрицательным z-index и
   закрыл бы фон; страницу снизу по-прежнему заливает html. */
body { background: transparent; }
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background: radial-gradient(ellipse 90% 80% at 50% 45%, #232326 0%, #0a0a0b 68%, #000 100%);
}
body::after {
  /* сетка отсюда вынесена в свой слой .sfx-grid (css/scroll-fx.css, раздел 22):
     она едет медленнее страницы, и сдвигать её надо transform'ом, иначе фон
     перерисовывается каждый кадр. Здесь остаётся только пятно света. */
  background: radial-gradient(55% 38% at 50% -4%, rgba(209, 128, 63, 0.12), transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
}
.hy-root { background: transparent; }

/* --- остеклённые поверхности: панели и карточки ------------------------ */
.panel,
.story-card-inner,
.reel,
.episode,
.mobile-panel a {
  box-shadow: var(--fx-glass-ring), var(--fx-glass-drop);
}

/* Карусель шортсов: карточки стоят в 1rem друг от друга, внешний отброс
   ложился бы на соседа - только блик и свечение. */
.sh-card {
  box-shadow: var(--fx-glass-ring);
}

/* Карточки «Работ» рисуют рамку кольцом box-shadow (style.css), а в сетке
   стоят вплотную: кольцо оставляем первым слоем, стекло поверх, отброса нет. */
.portfolio-grid .portfolio-card,
.portfolio-grid .portfolio-card--spotlight {
  box-shadow: 0 0 0 1px var(--border), var(--fx-glass-ring);
}

/* --- лёгкий блик на мелких элементах ----------------------------------
   Поля формы: на фокусе кольцо акцента из style.css перекрывает блик -
   так и задумано. */
.form-field input,
.form-field select,
.form-field textarea,
.icon-btn {
  box-shadow: var(--fx-glass-ring-soft);
}