/* ============================================================
   В МЕСТЕ СИЛА — design tokens (shared across hero explorations)
   Palette sourced from CORE merch + brand SVGs.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Golos+Text:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* base — warm near-blacks & forged greys */
  --ink:        #0B0908;
  --ink-1:      #100D0C;
  --ink-2:      #1C1815;   /* doc-spec surface */
  --stone:      #26211E;
  --grey-cold:  #3A3733;
  --grey-dusty: #6E655C;
  --hair:       rgba(232,227,220,.10);
  --hair-soft:  rgba(232,227,220,.055);

  /* type colors — warm bone, never pure white */
  --bone:       #E9E4DC;
  --bone-dim:   #A89E92;
  --bone-faint: #6A625A;

  /* accent — exact red from brand mark */
  --red:        #B70000;
  --red-bright: #DA1A1A;
  --wine:       #6B2D35;

  /* type */
  --f-display: 'Oswald', sans-serif;
  --f-text:    'Golos Text', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }

/* film grain used by several heroes */
@keyframes vms-grain {
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-2%,-3%); }
  30%{ transform:translate(3%,-1%); }
  50%{ transform:translate(-1%,2%); }
  70%{ transform:translate(2%,3%); }
  90%{ transform:translate(-3%,1%); }
}
.vms-grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05; pointer-events:none; mix-blend-mode:overlay;
  animation:vms-grain 6s steps(6) infinite;
}

/* СИЛА lettering as a recolorable mask */
.sila-letter{
  display:inline-block;
  background:var(--bone);
  -webkit-mask:url("assets/sila-lettering.svg") center/contain no-repeat;
          mask:url("assets/sila-lettering.svg") center/contain no-repeat;
  aspect-ratio:1280/231;
}