/*
  ЧИТАЛЬНЯ — КИНЕМАТОГРАФИЧНЫЙ СЛОЙ (27.09.2026, ревизия b)

  Поручение Архитектора: «премиальный, кинематографичный дизайн… 3D, динамика,
  интерактив, живые страницы, движущиеся объекты при скролле», затем:
  «на каждый сайт добавь интерактивные динамические объекты и элементы».

  Что здесь живёт:
    • космос: звёздное небо, три дышащие туманности, голографический пол;
    • частицы-созвездие на холсте — тянутся линиями и разбегаются от курсора;
    • параллакс слоёв от скролла и от указателя;
    • спотлайт, следящий за мышью, и бегущий луч сканирования;
    • 3D-наклон карточек, глянцевый блик, магнитные кнопки, пульс-волна по клику;
    • ось чтения со звездой позиции.

  Слой НАД rr.css и theme.css: цвета берёт только из переменных страницы
  (--accent, --accent2, --glass…), поэтому у каждой читальни остаётся своя гамма.

  Правила:
  1) Ничего не прячется в ожидании скрипта — звёзды, туманности и карточки
     рисуются чистым CSS; скрипт только ДОБАВЛЯЕТ.
  2) Движение — transform/opacity на композиторе: ни одной перерисовки раскладки.
  3) prefers-reduced-motion гасит всё живое целиком: это условие здоровья,
     а не украшение настроек.
  4) Никаких style="…" в разметке: динамика — только через CSSOM
     (element.style.setProperty), который под запрет CSP не попадает.
*/

/* ═══ 1. КОСМОС ═══════════════════════════════════════════════════════════ */

.rrc-space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Звёздное небо: два слоя точек с разными периодами мерцания. */
.rrc-sky{position:absolute;inset:-30%;
  background-image:
    radial-gradient(2.5px 2.5px at 20% 30%,rgba(255,255,255,1) 50%,transparent 51%),
    radial-gradient(2px 2px at 40% 70%,rgba(255,255,255,.85) 50%,transparent 51%),
    radial-gradient(3px 3px at 60% 20%,color-mix(in srgb,var(--accent) 70%,#fff) 50%,transparent 51%),
    radial-gradient(2px 2px at 80% 60%,color-mix(in srgb,var(--accent2) 65%,#fff) 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 10% 80%,rgba(255,255,255,.95) 50%,transparent 51%),
    radial-gradient(2px 2px at 90% 15%,rgba(255,255,255,.85) 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 30% 50%,rgba(255,255,255,.9) 50%,transparent 51%),
    radial-gradient(2px 2px at 70% 85%,color-mix(in srgb,var(--accent2) 60%,#fff) 50%,transparent 51%),
    radial-gradient(3px 3px at 50% 90%,color-mix(in srgb,var(--accent) 55%,#fff) 50%,transparent 51%),
    radial-gradient(2px 2px at 15% 10%,rgba(255,255,255,1) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 40%,rgba(255,255,255,.8) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 15%,rgba(255,255,255,.75) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 35%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 5% 55%,rgba(255,255,255,.8) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 95% 75%,rgba(255,255,255,.7) 50%,transparent 51%);
  animation:rrc-twinkle 11s ease-in-out infinite alternate;will-change:transform}
.rrc-sky::after{content:'';position:absolute;inset:0;transform:scale(1.6) rotate(12deg);opacity:.65;
  background-image:
    radial-gradient(2px 2px at 25% 45%,color-mix(in srgb,var(--accent) 60%,#fff) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 75%,rgba(255,255,255,.8) 50%,transparent 51%),
    radial-gradient(2px 2px at 85% 25%,color-mix(in srgb,var(--accent2) 55%,#fff) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 5%,rgba(255,255,255,.75) 50%,transparent 51%),
    radial-gradient(2px 2px at 8% 35%,rgba(255,255,255,.9) 50%,transparent 51%);
  animation:rrc-twinkle 17s ease-in-out infinite alternate;animation-delay:-6s}
@keyframes rrc-twinkle{0%{opacity:.5}50%{opacity:1}100%{opacity:.6}}

/* Туманности — в цвете зоны сайта. Обёртка отдельно от свечения: так
   параллакс (transform) не спорит с дыханием (тоже transform). */
.rrc-nebula-wrap{position:absolute;will-change:transform}
.rrc-nebula-wrap.a{top:-200px;left:-160px;width:680px;height:680px}
.rrc-nebula-wrap.b{bottom:-180px;right:-140px;width:560px;height:560px}
.rrc-nebula-wrap.c{top:38%;left:52%;width:440px;height:440px}
.rrc-nebula{width:100%;height:100%;border-radius:50%;filter:blur(100px);opacity:.3;
  animation:rrc-breathe 23s ease-in-out infinite alternate}
.rrc-nebula.a{background:radial-gradient(circle,var(--accent) 0%,transparent 70%)}
.rrc-nebula.b{background:radial-gradient(circle,var(--accent2) 0%,transparent 70%);animation-delay:-11s}
.rrc-nebula.c{opacity:.18;animation-delay:-5s;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 60%,var(--accent2)) 0%,transparent 70%)}
@keyframes rrc-breathe{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,3%,0) scale(1.12)}
  100%{transform:translate3d(-3%,2%,0) scale(1.05)}}

/* Голографический пол: уходящая в перспективу сетка, ползущая на зрителя. */
.rrc-floor{position:fixed;left:-12%;right:-12%;bottom:-5%;height:52vh;z-index:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 42%,transparent) 1.5px,transparent 1.5px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%,transparent) 1.5px,transparent 1.5px);
  background-size:66px 66px;
  transform:perspective(430px) rotateX(63deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,rgba(0,0,0,.4) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 45%,rgba(0,0,0,.4) 100%);
  opacity:.85;animation:rrc-floor 13s linear infinite}
@keyframes rrc-floor{to{background-position:0 66px,66px 0}}

/* Частицы-созвездие: холст поверх неба, под содержимым. */
.rrc-particles{position:absolute;inset:0;width:100%;height:100%;opacity:1}

/* Виньетка кадра и бегущий луч сканирования. */
.rrc-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(112% 86% at 50% 40%,transparent 52%,rgba(2,2,4,.55) 100%)}
.rrc-scan{position:fixed;left:0;right:0;top:0;height:180px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 9%,transparent) 47%,transparent);
  animation:rrc-scan 11s linear infinite}
@keyframes rrc-scan{0%{transform:translateY(-200px)}100%{transform:translateY(103vh)}}

/* Спотлайт, следящий за курсором (координаты ставит скрипт). */
.rrc-spotlight{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;z-index:0;
  pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 7%,transparent) 0%,transparent 62%);
  transform:translate3d(var(--rrc-px,-9999px),var(--rrc-py,-9999px),0) translate(-50%,-50%)}
.rrc-spotlight.on{opacity:1}

/* Ось чтения со звездой позиции (десктоп). */
.rrc-axis{position:fixed;left:26px;top:0;bottom:0;width:2px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.09) 12%,rgba(255,255,255,.09) 88%,transparent)}
.rrc-axis::after{content:'';position:absolute;left:50%;top:var(--rrc-axis-y,12vh);width:10px;height:10px;
  border-radius:50%;transform:translateX(-50%);
  background:var(--accent);box-shadow:0 0 14px 2px color-mix(in srgb,var(--accent) 80%,transparent),
    0 0 40px 10px color-mix(in srgb,var(--accent) 25%,transparent);
  transition:top .28s cubic-bezier(.16,1,.3,1)}
@media (max-width:960px){.rrc-axis{display:none}}

/* ═══ 2. ГЕРОЙ ЧИТАЛЬНИ ═══════════════════════════════════════════════════ */

.rrc-hero{position:relative}
.rrc-hero .tag{box-shadow:0 0 30px -10px var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rrc-hero h1{letter-spacing:-.02em;
  background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 40%,
    color-mix(in srgb,var(--accent2) 45%,#fff) 68%,var(--accent) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--accent) 26%,transparent))}

.rrc-hero .rr-stats{gap:10px}
.rrc-hero .rr-stat{border-radius:999px;border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);box-shadow:0 8px 30px -18px var(--accent)}
.rrc-hero .rr-stat b{color:#fff}

/* Ядро читальни: три орбиты и пульсирующее ядро в цвете зоны —
   видимый футуристичный объект в герое. */
.rrc-core{position:relative;width:104px;height:104px;margin:28px auto 6px}
.rrc-core span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.rrc-core span:nth-child(1){animation:rrc-spin 24s linear infinite}
.rrc-core span:nth-child(2){inset:14px;border-color:color-mix(in srgb,var(--accent2) 32%,transparent);animation:rrc-spin 17s linear infinite reverse}
.rrc-core span:nth-child(3){inset:28px;border-color:color-mix(in srgb,var(--accent) 40%,transparent);animation:rrc-spin 12s linear infinite}
.rrc-core span::after{content:'';position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%}
.rrc-core span:nth-child(1)::after{background:#fff;box-shadow:0 0 10px 1px rgba(255,255,255,.85)}
.rrc-core span:nth-child(2)::after{background:var(--accent2);box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent2) 90%,transparent)}
.rrc-core span:nth-child(3)::after{background:var(--accent);box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 90%,transparent)}
.rrc-core i{position:absolute;inset:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 45%,#fff),var(--accent) 50%,color-mix(in srgb,var(--accent) 15%,#000) 100%);
  box-shadow:0 0 28px 4px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 0 14px rgba(0,0,0,.45)}
@keyframes rrc-spin{to{transform:rotate(360deg)}}

/* Сигнальная панель разбора: живые штрихи-пульс, как индикатор данных. */
.rrc-signal{display:flex;gap:3px;align-items:flex-end;height:16px;margin-bottom:12px}
.rrc-signal b{display:block;width:3px;height:42%;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 65%,transparent);
  animation:rrc-signal 1.7s ease-in-out infinite;transform-origin:50% 100%}
.rrc-signal b:nth-child(2){height:66%;animation-delay:.12s}
.rrc-signal b:nth-child(3){height:100%;animation-delay:.24s}
.rrc-signal b:nth-child(4){height:54%;animation-delay:.36s}
.rrc-signal b:nth-child(5){height:78%;animation-delay:.48s}
.rrc-signal b:nth-child(6){height:38%;animation-delay:.6s}
.rrc-signal b:nth-child(7){height:60%;animation-delay:.72s}
@keyframes rrc-signal{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1.12);opacity:1}}

.rr-jump{box-shadow:0 10px 36px -12px var(--accent),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent) inset}

/* ═══ 3. ПУТЬ ЧИТАТЕЛЯ ════════════════════════════════════════════════════ */

.rr-path{border-radius:18px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px -30px var(--accent)}
.rr-path .rr-path-bar{height:12px;position:relative}
.rr-path .rr-path-bar::after{content:'';position:absolute;inset:0;border-radius:99px;
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(5,5,7,.55) 26px 30px);pointer-events:none}
.rr-path .rr-path-fill{box-shadow:0 0 14px color-mix(in srgb,var(--accent) 65%,transparent)}
.rr-path.rr-done{box-shadow:0 0 0 1px var(--accent) inset,0 18px 50px -26px var(--accent)}

/* ═══ 4. ПОИСК И ТЕМЫ ═════════════════════════════════════════════════════ */

.rr-search{border-radius:14px;background:rgba(0,0,0,.42);transition:border-color .25s,box-shadow .25s}
.rr-search:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent),0 0 26px -8px var(--accent)}
.rr-chip{position:relative;overflow:hidden}
.rr-chip[aria-pressed="true"]{box-shadow:0 0 22px -6px var(--accent)}

/* ═══ 5. КАРТОЧКИ РАЗБОРОВ — 3D ═══════════════════════════════════════════ */

.grid{perspective:1200px}
.grid .card{transform-style:preserve-3d;will-change:transform;position:relative;overflow:hidden;
  border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 40%,rgba(5,5,7,.6) 100%);
  transition:border-color .35s,box-shadow .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.grid .card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px var(--accent)}

/* Блик за курсором (координаты ставит скрипт: --rrc-mx/--rrc-my). */
.grid .card .rrc-shine{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--rrc-mx,50%) var(--rrc-my,50%),
    color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);z-index:1}
.grid .card:hover .rrc-shine{opacity:1}

.grid .card::after{letter-spacing:.1em;
  color:color-mix(in srgb,var(--accent) 75%,var(--muted));
  text-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%,transparent)}
.card.rr-read{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent) inset}

/* ═══ 6. МАГНИТ И ИГРА — СЦЕНА ════════════════════════════════════════════ */

.rr-magnet{border-radius:26px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--accent) 13%,rgba(8,8,14,.9)),
    rgba(8,8,14,.92) 55%,
    color-mix(in srgb,var(--accent2) 11%,rgba(8,8,14,.9)));
  border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.08));
  box-shadow:0 34px 90px -44px var(--accent),
    0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent) inset}
.rr-mlabel{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
.rr-out{border-radius:18px;background:rgba(0,0,0,.4)}
.rr-big{text-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent)}

/* ═══ 7. ИНТЕРАКТИВ: МАГНИТНЫЕ КНОПКИ, ПУЛЬС-ВОЛНА ═══════════════════════ */

.rr-btn,.rr-jump,.btn-cab,.btn-main,.btn-ghost,.rr-chip,.card.rr-magnet{position:relative;overflow:hidden}
.rrc-ripple{position:absolute;left:var(--rrc-rx);top:var(--rrc-ry);width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 60%,transparent) 0%,transparent 70%);
  animation:rrc-ripple .7s ease-out forwards}
@keyframes rrc-ripple{from{transform:scale(1);opacity:.85}to{transform:scale(28);opacity:0}}

/* ═══ 8. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ═══════════════════════════════════════════ */

.rrc-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rrc-reveal.rrc-seen{opacity:1;transform:none}

/* ═══ 9. ПОКОЙ И МОБИЛЬНЫЕ ════════════════════════════════════════════════ */

@media (max-width:640px){
  .rrc-floor{height:36vh;background-size:52px 52px}
  .rrc-nebula{filter:blur(70px)}
  .rrc-scan{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rrc-sky,.rrc-nebula,.rrc-floor,.rrc-scan,.rrc-core span,.rrc-signal b{animation:none}
  .rrc-particles,.rrc-spotlight{display:none}
  .rrc-reveal{opacity:1;transform:none;transition:none}
  .grid{perspective:none}
  .grid .card:hover{transform:none}
  .rrc-ripple{display:none}
}