/* Заставка перед открытием страницы (техника hero-2): цитата по словам из масок (Hero Animations / 22),
   затем пять полос расходятся вверх и вниз (Page Transitions / 6 «Slice Revealer»). Видна, пока на <html> есть .splash-on. */
.splash { display: none; position: fixed; inset: 0; z-index: 60; cursor: pointer; }
.splash-on .splash { display: grid; place-items: center; }
.splash-on, .splash-on body { overflow: hidden; }
.splash__slices { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.splash__slices i { margin-right: -1px; background: var(--g8); }
.splash__q { position: relative; max-width: 15em; padding-inline: var(--gut); text-align: center; font: italic 400 calc(clamp(1.75rem, min(4.6vw, 7.4vh), 4.25rem) * var(--k-h))/1.2 var(--f-serif); color: var(--t-d); }
.splash__q .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.splash__q .w > span { display: inline-block; }
.splash__g { color: var(--gold); }
.splash__bar { position: absolute; left: 50%; bottom: 12vh; width: 120px; height: 1px; transform: translateX(-50%); background: rgba(255, 255, 255, .16); }
.splash__bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.splash:focus-visible { outline: none; }