/* neiroutro — движение. Подключать один раз в <head> и перед </body>. */


/* Занавес из четырёх цветов палитры: один раз за сессию, ~1,1 с */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  animation: intro-off 1ms 2.3s forwards;
}
@keyframes intro-off { to { visibility: hidden; opacity: 0; } }
.intro i {
  display: block;
  height: 100%;
  transform: translateY(0);
  animation: intro-lift 1.35s cubic-bezier(.76,0,.24,1) forwards;
}
.intro i:nth-child(1) { background: #c5dece; animation-delay: .10s; }
.intro i:nth-child(2) { background: #f4d66f; animation-delay: .22s; }
.intro i:nth-child(3) { background: #ebd3cd; animation-delay: .34s; }
.intro i:nth-child(4) { background: #e27d65; animation-delay: .46s; }
@keyframes intro-lift { to { transform: translateY(-101%); } }

/* если занавес уже видели в этой сессии — не показываем вовсе */
html.intro-seen .intro { display: none; }

/* заголовок поднимается вслед за занавесом */
/* заголовок больше не анимируется: на медленной загрузке это читалось как зависание */
}

/* Второй участник: след за курсором */
.cursor-ghost {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  mix-blend-mode: multiply;
  transition: opacity .45s ease-out, width .2s ease, height .2s ease, margin .2s ease;
  will-change: transform, opacity;
}
.cursor-ghost.is-on { opacity: .55; }
.cursor-ghost.is-ripple {
  opacity: .5;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  animation: ghost-ripple .52s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes ghost-ripple {
  from { transform: scale(.25); opacity: .55; }
  to   { transform: scale(1);   opacity: 0; }
}

/* Сборка заголовка из четырёх плиток — один раз при заходе */
.build-mosaic {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.build-mosaic i {
  display: block;
  width: 22px; height: 22px;
  border-radius: 6px;
  transform: translateY(0) rotate(0);
  opacity: 1; /* видимый по умолчанию: если анимация не запустится, плитки не пропадут */
}
.build-mosaic i:nth-child(1) { background: #c5dece; }
.build-mosaic i:nth-child(2) { background: #f4d66f; }
.build-mosaic i:nth-child(3) { background: #ebd3cd; }
.build-mosaic i:nth-child(4) { background: #e27d65; }
.build-mosaic.is-animated i:nth-child(1) { animation: tile-in .62s cubic-bezier(.22,.7,.3,1) both; }
.build-mosaic.is-animated i:nth-child(2) { animation: tile-in .62s .06s cubic-bezier(.22,.7,.3,1) both; }
.build-mosaic.is-animated i:nth-child(3) { animation: tile-in .62s .12s cubic-bezier(.22,.7,.3,1) both; }
.build-mosaic.is-animated i:nth-child(4) { animation: tile-in .62s .18s cubic-bezier(.22,.7,.3,1) both; }
@keyframes tile-in {
  0%   { transform: translate(-46px, 22px) rotate(-20deg) scale(.7); opacity: 0; }
  70%  { transform: translate(2px, -2px) rotate(2deg) scale(1.04); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}

@media print {
  .intro, .cursor-ghost { display: none !important; }
  .hero h1, .build-mosaic i { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ghost { display: none; }
  .build-mosaic i { animation: none !important; }
  .intro { display: none !important; }
  .hero h1 { animation: none !important; }
}