/* DNB1ST — эффекты: noise-фон, виньетка, кастомный курсор, glitch-лого, scroll-reveal.
   Подключается на главных страницах вместе с js/site-common.js.
   Всё уважает prefers-reduced-motion и отключается на тач-устройствах (курсор). */

/* ---------- глубина фона: тонкая виньетка + noise ---------- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 160px 160px;
}
html[data-theme=light] body::before { opacity: .06; }

/* ---------- кастомный курсор (точка + кольцо) ---------- */
.cur-dot, .cur-ring {
  position: fixed; left: 0; top: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cur-dot { width: 6px; height: 6px; background: var(--acid); }
.cur-ring {
  width: 34px; height: 34px;
  border: 2px solid var(--acid);
  opacity: .6;
  transition: width .18s, height .18s, opacity .18s, border-color .18s;
}
.cur-ring.hot { width: 52px; height: 52px; opacity: .95; border-color: var(--orange); }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .tile,
html.has-cursor summary, html.has-cursor input, html.has-cursor label { cursor: none; }

/* ---------- glitch на заголовке ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch.glitching::before {
  opacity: .85; color: var(--acid);
  clip-path: inset(12% 0 58% 0);
  animation: gl1 .38s steps(2, jump-none) both;
}
.glitch.glitching::after {
  opacity: .85; color: var(--orange);
  clip-path: inset(62% 0 8% 0);
  animation: gl2 .38s steps(2, jump-none) both;
}
@keyframes gl1 {
  0% { transform: translate(0); }
  25% { transform: translate(-6px, -2px); }
  50% { transform: translate(5px, 1px); }
  75% { transform: translate(-3px, 2px); }
  100% { transform: translate(0); opacity: 0; }
}
@keyframes gl2 {
  0% { transform: translate(0); }
  25% { transform: translate(6px, 2px); }
  50% { transform: translate(-5px, -1px); }
  75% { transform: translate(3px, -2px); }
  100% { transform: translate(0); opacity: 0; }
}
.glitch:hover.glitching::before, .glitch:hover.glitching::after { opacity: .85; }

/* ---------- scroll-reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.on { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }

/* reduced motion: без анимаций, всё видно сразу */
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { display: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .cur-dot, .cur-ring { display: none; }
}