/* Общая база макетов Design lab. Цвета и шрифты каждый макет задаёт сам. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html.is-locked, html.is-locked body { overflow: hidden; }
/* Вертикальный жест остаётся прокруткой, движение пальца вбок достаётся сцене. */
body { touch-action: pan-y; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, canvas, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }

/* Сцена стоит на месте, страница под ней только задаёт длину прокрутки. */
.stage { position: fixed; inset: 0; overflow: hidden; }
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.track { position: relative; pointer-events: none; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer a, .layer button, .layer [data-hot] { pointer-events: auto; }

/* Область нажатия не меньше 44 пикселей при любом размере надписи: невидимая подложка, вид элемента не меняется.
   Ставь класс на мелкие ссылки и кнопки (логотип, пункты шапки). Не годится элементу с overflow: hidden. */
.tap { position: relative; }
.tap::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

/* Маски для проявления текста по буквам и словам. */
.sp-w { display: inline-block; white-space: nowrap; }
.sp-m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.sp-c { display: inline-block; will-change: transform; }

/* Свой курсор: точка и кольцо с запаздыванием. Только при мыши. */
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.3s; mix-blend-mode: difference; }
.cursor.on { opacity: 1; }
.cursor i, .cursor b { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; }
.cursor i { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor b { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; transition: width 0.3s, height 0.3s, margin 0.3s, background 0.3s; }
.cursor.hot b { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .sp-c { transform: none !important; }
}