/* ============================================================
   decor.css — декоративный слой (модуль 5 брифа: одна метафора
   на секцию, 5–15% прозрачности, не мешает контенту/кликам).
   ============================================================ */

/* Rasterize a small static texture once, instead of filtering the viewport every frame. */
.decor-grain {
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  opacity: .035; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%221%22%20stitchTiles%3D%22stitch%22%20seed%3D%222%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
  background-size: 128px 128px; filter: none; mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) { .decor-grain { display: none; } }

/* ---- Виньетка по краям вьюпорта ---- */
.decor-vignette {
  position: fixed;
  inset: 0;
  z-index: 14; /* под зерном (15), над стеком секций */
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* ---- Полка кассет: секции "Библиотека" и "Плейлисты" ---- */
.decor-cassettes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  color: var(--c-accent-dim);
  overflow: hidden;
  transform-origin: bottom center;
  animation: cassetteSway 6s ease-in-out infinite;
}
@keyframes cassetteSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(0.3deg) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .decor-cassettes { animation: none; }
}
.decor-cassettes svg { width: 100%; height: 100%; }


/* ---- Призрачные номера секций: на заднем плане, едва читаемы ---- */
[data-num]::after {
  display: none;
  content: attr(data-num);
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: -1;
  font-family: var(--f-mono);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  transform: translateY(var(--num-float, 0px));
}