/* ============================================================ дух Minecraft
   Кубы, блочные грани и пиксельные срезы — чтобы сайт был про игру,
   а не про очередной стартап. Всё нарисовано стилями, картинок нет. */

/* ---------------------------------------------------------- кубы в шапке */
.hero { position: relative; }

.blocks {
  position: absolute;
  /* только верх первого экрана: ниже начинаются карточки */
  inset: -20px 0 auto;
  height: 380px;
  pointer-events: none;
  z-index: 0;
  /* без перспективы куб выглядит плоским квадратом */
  perspective: 900px;
  /* прозрачность держим здесь: opacity на самом кубе схлопывает его в плоскость */
 
}

.cube {
  position: absolute;
  width: 64px;
  height: 64px;
  transform-style: preserve-3d;
  /* даже если анимация выключена, куб остаётся кубом, а не квадратом */
  transform: rotateX(-24deg) rotateY(38deg);
  animation: spin 18s linear infinite, float 7s ease-in-out infinite;
}

.cube .face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, .35);
}

/* грани куба: верх светлее, бока темнее — как блок в игре */
.cube .top { transform: rotateX(90deg) translateZ(32px); filter: brightness(1.25); }
.cube .bottom { transform: rotateX(-90deg) translateZ(32px); filter: brightness(.5); }
.cube .front { transform: translateZ(32px); }
.cube .back { transform: rotateY(180deg) translateZ(32px); filter: brightness(.6); }
.cube .left { transform: rotateY(-90deg) translateZ(32px); filter: brightness(.72); }
.cube .right { transform: rotateY(90deg) translateZ(32px); filter: brightness(.85); }

/* земля */
.cube.grass .face { background: #7a5637; }
.cube.grass .top { background: #5ba832; }
/* золото */
.cube.gold .face { background: #d8a53a; }
.cube.gold .top { background: #f6cb5c; }
/* алмаз */
.cube.diamond .face { background: #3fb6c4; }
.cube.diamond .top { background: #6fe6ef; }
/* камень */
.cube.stone .face { background: #6f747c; }
.cube.stone .top { background: #8c929b; }

@keyframes spin {
  from { transform: rotateX(-24deg) rotateY(38deg); }
  to { transform: rotateX(-24deg) rotateY(398deg); }
}

@keyframes float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -18px; }
}

/* раскладываем кубы по краям, чтобы не лезли в текст */
/* по краям первого экрана, подальше от текста */
.cube.c1 { left: -6px;  top: 30%; animation-duration: 22s, 8s; }
.cube.c2 { left: 40px;  top: 62%; animation-duration: 26s, 9s; }
.cube.c3 { right: -6px; top: 34%; animation-duration: 20s, 7.5s; }
.cube.c4 { right: 48px; top: 66%; animation-duration: 24s, 6.5s; }

/* мелкие кубы */
.cube.small { width: 44px; height: 44px; }

/* мелкие кубы задают свой размер граней */
.cube.small .top { transform: rotateX(90deg) translateZ(22px); }
.cube.small .bottom { transform: rotateX(-90deg) translateZ(22px); }
.cube.small .front { transform: translateZ(22px); }
.cube.small .back { transform: rotateY(180deg) translateZ(22px); }
.cube.small .left { transform: rotateY(-90deg) translateZ(22px); }
.cube.small .right { transform: rotateY(90deg) translateZ(22px); }

@media (max-width: 620px) {
  .cube { display: none; }
}

/* ---------------------------------------------------------- блочные детали */

/* уголки карточек срезаны по-пиксельному */
.feature, .step, .stat {
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px), 0 8px);
}

/* полоска под заголовком секции — как шов между блоками */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 56px;
  height: 4px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, var(--accent) 0 25%, transparent 25% 50%,
                    var(--accent-2) 50% 75%, transparent 75%);
  background-size: 16px 4px;
 
}

/* значок в шапке — блок, а не круг */
.logo .mark {
  border-radius: 8px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 6px 20px rgba(91, 140, 255, .4);
}

/* кнопки чуть «объёмные»: нижняя грань темнее, при нажатии вдавливаются */
.btn { box-shadow: 0 4px 0 rgba(38, 60, 120, .55), 0 10px 26px rgba(91, 140, 255, .3); }
.btn:hover { box-shadow: 0 4px 0 rgba(38, 60, 120, .55), 0 14px 32px rgba(91, 140, 255, .42); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(38, 60, 120, .55); }
.btn.ghost { box-shadow: 0 3px 0 rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------- навигация */
.nav a.link { position: relative; }
.nav a.link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.nav a.link:hover::after,
.nav a.link.active::after { transform: scaleX(1); }
.nav a.link.active { color: var(--text); }

/* ---------------------------------------------------------- прокрутка */
/* свою плавную прокрутку делает скрипт — родную выключаем, чтобы не спорили */
html { scroll-behavior: auto; }

/* тонкая полоса прокрутки в цвет страницы */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent), var(--accent-2));
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { border-width: 2px; }

/* индикатор прочитанного сверху страницы */
.reading {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--success));
  z-index: 60;
  transition: width .1s linear;
}