/* «Облик сайта» — Чернила: первый экран главной и заставка при входе (assets/js/fx/oblik-chernila.js).
   Всё под [data-look="oblik"]; цвета — токены темы. */

/* ── Первый экран: чернила за текстом героя ─────────────────────── */
[data-look="oblik"] .ink-hero {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  /* книзу чернила растворяются в стене следующего раздела */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
}
/* у текста — мягкая «промокашка»: чернила не мешают читать */
[data-look="oblik"] .ink-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 34% at 50% 34%, color-mix(in srgb, var(--g-wall, var(--bg)) 62%, transparent), transparent 78%);
}
[data-look="oblik"][data-mode="dark"] .ink-scrim {
  background: radial-gradient(ellipse 50% 34% at 50% 34%, color-mix(in srgb, var(--g-wall, var(--bg)) 55%, transparent), transparent 78%);
}
/* бегущая линия пульса героя в «Облике» не нужна — главную ведут чернила */
[data-look="oblik"] .hero-pulse { display: none; }
[data-look="oblik"] .hero .hero-title { text-shadow: 0 0 28px color-mix(in srgb, var(--g-wall, var(--bg)) 70%, transparent); }
[data-look="oblik"] .hero .hero-lead, [data-look="oblik"] .hero .qa { text-shadow: 0 0 16px var(--g-wall, var(--bg)); }
/* без WebGL — тихое пятно чернил на CSS */
[data-look="oblik"] .hero.ink-nogl .hero-bg {
  background:
    radial-gradient(ellipse 34% 40% at 8% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 36% at 94% 70%, color-mix(in srgb, var(--text) 12%, transparent), transparent 70%);
}

/* ── Заставка ───────────────────────────────────────────────────── */
html[data-look="oblik"].ink-intro-on { overflow: hidden; }
html[data-look="oblik"].ink-intro-on .top-logo { opacity: 0; }
[data-look="oblik"] .top-logo { transition: opacity .25s ease; }
[data-look="oblik"] .ink-intro {
  position: fixed; inset: 0; z-index: 400; pointer-events: auto; cursor: default;
  --ink-cut: var(--g-wall, var(--bg));
  transition: opacity .3s ease;
}
/* в Ночи клякса — тёмная медь со светящимся краем, логотип проступает цветом слоновой кости */
[data-look="oblik"][data-mode="dark"] .ink-intro { --ink-cut: var(--text); }
[data-look="oblik"] .ink-intro-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-look="oblik"] .ink-logo {
  position: absolute; left: 50%; top: 48%;
  width: min(54vw, 500px);
  translate: -50% -50%;
  transform-origin: 0 0;
}
[data-look="oblik"] .ink-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
/* буквы проступают из кляксы: сначала контур, потом заливка — цветом бумаги (в Ночи — графита) */
[data-look="oblik"] .ink-letters path, [data-look="oblik"] .ink-hard {
  fill: var(--ink-cut); fill-opacity: 0;
  stroke: var(--ink-cut); stroke-width: 1.1; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: ink-draw .55s cubic-bezier(.3, 0, .2, 1) forwards, ink-fill .4s ease forwards;
  animation-delay: calc(.7s + var(--i, 0) * .07s), calc(1.02s + var(--i, 0) * .05s);
  transition: fill .55s ease, stroke .55s ease, fill-opacity .3s ease;
}
[data-look="oblik"] .ink-hard { --i: 5; }
[data-look="oblik"] .ink-pulse {
  fill: none; stroke: var(--ink-cut); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: ink-draw .5s cubic-bezier(.45, 0, .2, 1) 1.08s forwards;
  transition: stroke .55s ease;
}
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes ink-fill { to { fill-opacity: 1; } }
/* полёт в шапку: логотип приобретает цвета шапки */
[data-look="oblik"] .ink-fly .ink-letters path { fill: var(--logo-ink); stroke: transparent; fill-opacity: 1; }
[data-look="oblik"] .ink-fly .ink-hard { fill: var(--logo-sign); stroke: transparent; fill-opacity: 1; }
[data-look="oblik"] .ink-fly .ink-pulse { stroke: var(--logo-pulse); }
/* пропуск — быстро растаять */
[data-look="oblik"] .ink-intro.ink-skip { opacity: 0; }

@media (max-width: 600px) {
  [data-look="oblik"] .ink-logo { width: min(68vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-look="oblik"] .ink-letters path, [data-look="oblik"] .ink-hard, [data-look="oblik"] .ink-pulse { animation-duration: .01ms; animation-delay: 0s; }
}

/* до заставки страница закрыта фоном: решение принимает themes.js ещё в <head> (класс ink-pending) */
html.ink-pending::after { content: ""; position: fixed; inset: 0; z-index: 399; /* ниже заставки (400), выше всего сайта */ background: var(--bg); pointer-events: none; }