/* =========================================================
   FX-слой ПРОЕКТНОЙ — «ПЕЧАТЬ» v4
   Зерно, прогресс, riso-курсор, clip-path reveal, пословные
   заголовки, мисрегистрация, tilt + блик, счётчики, пятно.
   Работает поверх любой темы, контента не касается.
   ========================================================= */

/* --- зерно печать ---------- */
.fx-grain {
  position: fixed;
  inset: -12%;
  z-index: 10001;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fxGrain 5s steps(8) infinite;
}
@keyframes fxGrain {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-3%, 4%); }
  25%   { transform: translate(2%, -3%); }
  37.5% { transform: translate(-4%, -2%); }
  50%   { transform: translate(3%, 3%); }
  62.5% { transform: translate(-2%, 2%); }
  75%   { transform: translate(4%, -4%); }
  87.5% { transform: translate(-3%, -3%); }
  100%  { transform: translate(0, 0); }
}

/* --- прогресс чтения: кислотная лента с рисками --- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 10004;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background:
    repeating-linear-gradient(90deg, var(--ink, #101216) 0 2px, transparent 2px 14px),
    linear-gradient(90deg, #1b34e8, #ff1f5a 55%, #d7f23c);
}

/* --- scroll reveal: шторка clip-path + лёгкий наклон ---
   4px незакрытой полосы обязательны: IntersectionObserver в Chrome
   не считает клипирующий элемент «видимым», если area=0. */
.fx-init {
  opacity: 0;
  transform: translateY(40px) rotate(-0.6deg);
  clip-path: inset(0 0 calc(100% - 4px) 0);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: var(--fx-d, 0ms);
}
.fx-init.fx-show {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* --- пословный подъём заголовков со сдвигом красок --- */
.fx-word {
  display: inline-block;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(0.9em) rotate(2deg);
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.5s ease;
  transition-delay: calc(var(--fx-w, 0) * 60ms);
}
.fx-init.fx-show .fx-word { opacity: 1; transform: none; }
/* мисрегистрация при появлении заголовка */
.fx-init.fx-show.fx-misreg .fx-word {
  animation: misregIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--fx-w, 0) * 60ms);
}
@keyframes misregIn {
  0%   { text-shadow: 10px 0 rgba(255, 31, 90, 0.9), -10px 0 rgba(27, 52, 232, 0.8); }
  55%  { text-shadow: 4px 0 rgba(255, 31, 90, 0.6), -4px 0 rgba(27, 52, 232, 0.5); }
  100% { text-shadow: 0 0 rgba(255, 31, 90, 0), 0 0 rgba(27, 52, 232, 0); }
}

/* --- штамп «припечатан» --- */
.fx-stamp-in { animation: stampIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes stampIn {
  0%   { transform: scale(1.7) rotate(-14deg); opacity: 0; }
  70%  { transform: scale(0.96) rotate(-2deg); opacity: 1; }
  100% { transform: scale(1) rotate(-2deg); opacity: 1; }
}

/* --- 3D tilt + блик (fx.js вешает класс и --mx/--my) --- */
.fx-tilt {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translate3d(0, 0, 0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  will-change: transform;
}
.fx-glare { position: relative; }
.fx-glare::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 60%);
  mix-blend-mode: soft-light;
}
.fx-glare:hover::after { opacity: 1; }

/* --- счётчик чисел: подсветка во время докрутки --- */
.fx-counting { color: #ff1f5a !important; }

/* --- боковой реестр разделов --- */
.fx-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10003;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx-rail-dot {
  position: relative;
  width: 22px;
  height: 12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fx-rail-dot::before {
  content: '';
  position: absolute;
  right: 0;
  top: 5px;
  width: 12px;
  height: 2px;
  background: rgba(16, 18, 22, 0.35);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}
.fx-rail-dot:hover::before { width: 22px; background: #1b34e8; }
.fx-rail-dot.is-now::before { width: 22px; height: 6px; top: 3px; background: #ff1f5a; }

/* --- Ken Burns только для больших фото на видимых секциях --- */
.fx-show .fx-kb img,
.fx-kb.fx-show img,
.visible .fx-kb img,
.fx-kb.visible img { animation: kenBurns 16s ease-in-out infinite alternate; }
@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.07) translate(-1.5%, 1.5%); }
}

/* ---------- reduced motion / touch ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-init { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fx-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fx-grain, .fx-rail { display: none !important; }
  .fx-tilt { transform: none !important; }
  .fx-kb img, .fx-glare::after { animation: none !important; }
}
@media (hover: none) {
  .fx-glare::after, .fx-rail { display: none !important; }
  .fx-tilt { transform: none !important; }
}