/* ============================================================
   СЦЕНА — фон, зерно, прелоадер, курсор
   ============================================================ */

/* ---------- фон ---------- */
#silk{position:fixed;inset:0;z-index:0;display:block}

/* ---------- плёночное зерно ---------- */
.grain{position:fixed;inset:-60%;z-index:101;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;animation:grainShift 1s steps(1,end) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  12.5%{transform:translate(-4%,-3%)}
  25%{transform:translate(3%,-6%)}
  37.5%{transform:translate(-6%,4%)}
  50%{transform:translate(5%,3%)}
  62.5%{transform:translate(-3%,6%)}
  75%{transform:translate(6%,-4%)}
  87.5%{transform:translate(-5%,-5%)}
  100%{transform:translate(0,0)}
}

/* ---------- прелоадер ---------- */
.preloader{position:fixed;inset:0;z-index:100}
.pre-bone{position:absolute;inset:0;background:var(--flame)}
.pre-ink{position:absolute;inset:0;background:var(--ink)}
.pre-line{position:absolute;top:50%;left:var(--mx);right:var(--mx);height:1px;background:var(--cream);opacity:.65;transform:scaleX(0);transition:transform 1.15s var(--ease-io)}
.preloader.run .pre-line{transform:scaleX(1)}
.preloader.done .pre-ink{transform:translateY(-101%);transition:transform .85s var(--ease-io)}
.preloader.done .pre-bone{transform:translateY(-101%);transition:transform .95s var(--ease-io) .12s}
.preloader.done .pre-line{opacity:0;transition:opacity .3s ease}
.preloader.gone{visibility:hidden}

/* ---------- курсор ---------- */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;z-index:110;pointer-events:none;border-radius:50%;color:var(--cream);opacity:0;transition:opacity .4s ease,color .45s ease}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1}
.cursor-dot{width:5px;height:5px;background:currentColor}
.cursor-ring{width:34px;height:34px;border:1px solid currentColor}
body.cart-open .cursor-dot,body.cart-open .cursor-ring{color:var(--ink)}