/*
 * Galaxy 71 landing — развилка Исследователь/Охотник (главная).
 * Copyright © 2026 Bratish Ltd & ExeCode Studio.
 * Мокап: mockups/mockup_hunter_fork_landing.html (утверждён Ехе 09.07).
 * Поверх base.css + hero.css (hero__* классы переиспользуются 1:1).
 */

@import url('../_tokens.css');
@import url('../_motion.css');

.fork-hero{
  min-height:100svh;
  min-height:100vh;
  padding-top:clamp(60px, 10vh, 100px);
  padding-bottom:clamp(40px, 7vh, 70px);
}
.fork-hero .hero__inner{ max-width:1060px; }
.fork-hero .hero__subtitle{ margin-bottom:clamp(20px, 3.5vh, 34px); }

/* живой фон — звёзды на canvas (рисует fork.js) */
.sf{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; width:100%; height:100%;
}

/* «Выбери путь» */
.fork-ask{
  font-size:clamp(19px, 3vw, 26px); font-weight:800; color:var(--text);
  margin:0 0 clamp(18px, 3.5vh, 30px);
  text-shadow:0 0 24px rgba(var(--accent-rgb), 0.25);
}

/* сетка развилки */
.fork{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:clamp(14px, 2.5vw, 26px);
  text-align:left;
  margin-bottom:clamp(20px, 3.5vh, 32px);
}

/* карточка-портал (база — паттерн why__card) */
.fork__card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(160deg, rgba(20,30,50,0.9) 0%, rgba(8,12,24,0.9) 100%);
  border:1px solid rgba(var(--white-rgb), 0.08);
  border-radius:16px;
  padding:clamp(20px, 3.5vw, 32px);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.fork__card::before{
  content:'';
  position:absolute; inset:0;
  border-radius:16px; padding:1px;
  background:linear-gradient(160deg, rgba(var(--white-rgb), 0.14) 0%, transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.fork__card:hover{ transform:translateY(-5px); border-color:rgba(var(--white-rgb), 0.18); }

.fork__card--gold{ box-shadow:0 0 70px -20px rgba(var(--gold-rgb), 0.35); }
.fork__card--gold:hover{ box-shadow:0 0 90px -15px rgba(var(--gold-rgb), 0.55); }
.fork__card--blue{ box-shadow:0 0 70px -20px rgba(var(--accent-rgb), 0.35); }
.fork__card--blue:hover{ box-shadow:0 0 90px -15px rgba(var(--accent-rgb), 0.55); }

.fork__badge{
  position:absolute; top:-11px; right:18px;
  font-size:11px; font-weight:800; letter-spacing:1.5px;
  padding:4px 12px; border-radius:20px;
  background:linear-gradient(135deg, var(--accent) 0%, #7846ff 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.5);
}

/* иконки-картинки: звезда-рендер и корабль-видеокарта */
.fork__icon{ line-height:1; margin-bottom:14px; height:clamp(56px, 7vw, 76px); display:flex; align-items:center; }
.fork__icon-img--star{
  width:clamp(52px, 6vw, 68px); height:clamp(52px, 6vw, 68px);
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 26px rgba(var(--gold-rgb), 0.45), 0 0 0 2px rgba(var(--white-rgb), 0.1);
}
.fork__icon-img--ship{
  width:clamp(110px, 14vw, 170px); height:auto;
  filter:drop-shadow(0 8px 20px rgba(var(--accent-rgb), 0.5));
}

.fork__role{
  font-size:clamp(11px, 2vw, 12px); font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; margin-bottom:6px;
}
.fork__card--gold .fork__role{ color:var(--gold); }
.fork__card--blue .fork__role{ color:var(--accent); }

.fork__title{
  font-size:clamp(19px, 3vw, 26px); font-weight:800; color:var(--text);
  line-height:1.2; margin:0 0 12px; letter-spacing:-0.3px;
}

.fork__list{ list-style:none; margin:0 0 20px; padding:0; flex:1; }
.fork__list li{
  font-size:clamp(13.5px, 1.6vw, 15px); color:var(--text-2);
  line-height:1.5; padding:4px 0;
}
.fork__list b{ color:var(--text); }
.fork__list .gold{ color:var(--gold); font-weight:700; }
.fork__list .blue{ color:var(--accent); font-weight:700; }

.fork__cta{
  position:relative; display:block; text-align:center;
  min-height:50px; padding:15px 20px;
  text-decoration:none; font-weight:800;
  font-size:clamp(14px, 1.8vw, 16px); letter-spacing:0.5px;
  border-radius:12px;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.fork__cta:hover{ transform:translateY(-2px); }
.fork__cta--gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#1a0c00;
  box-shadow:0 10px 30px rgba(var(--gold-rgb), 0.35), 0 2px 8px rgba(var(--black-rgb), 0.4);
}
.fork__cta--gold:hover{ box-shadow:0 14px 38px rgba(var(--gold-rgb), 0.5); }
.fork__cta--blue{
  background:linear-gradient(135deg, var(--accent) 0%, #3d7fd6 100%);
  color:#04101f;
  box-shadow:0 10px 30px rgba(var(--accent-rgb), 0.35), 0 2px 8px rgba(var(--black-rgb), 0.4);
}
.fork__cta--blue:hover{ box-shadow:0 14px 38px rgba(var(--accent-rgb), 0.5); }

/* разделитель ИЛИ */
.fork__or{
  align-self:center;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:1px; color:var(--muted);
  border:1px solid var(--border);
  background:rgba(10,18,37,0.9);
  box-shadow:0 0 30px rgba(var(--black-rgb), 0.6);
}

/* «Уже есть аккаунт? Войти» — короткий путь мимо лендов */
.fork-login{
  margin:0 0 16px; font-size:clamp(13px, 1.8vw, 14.5px);
  color:var(--muted);
}
.fork-login a{
  color:var(--accent); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgb), 0.35);
  padding-bottom:1px;
  transition:border-color 0.18s ease, text-shadow 0.18s ease;
}
.fork-login a:hover{
  border-color:var(--accent);
  text-shadow:0 0 12px rgba(var(--accent-rgb), 0.5);
}

/* Золотая кнопка «Войти» под развилкой (утв. mockup_fork_v2, Ехе 27.07).
   Градиент = фирменный CTA ленда: var(--gold) #f0b300 → var(--gold-2) #ff8300. */
.fork-login{ margin-bottom:6px; }
.fork-login-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:8px 22px; margin:0 0 16px;
  font-size:13px; font-weight:800; letter-spacing:0.5px;
  color:#1a0c00; text-decoration:none;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  border-radius:9px;
  box-shadow:0 6px 18px rgba(var(--gold-rgb), 0.3), 0 2px 6px rgba(var(--black-rgb), 0.4);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.fork-login-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(var(--gold-rgb), 0.5); }

/* миссия */
.fork-mission{
  margin:0 0 14px; font-size:clamp(13.5px, 1.9vw, 16px);
  color:var(--muted); line-height:1.5;
}
.fork-mission b{ color:var(--text); font-weight:700; }

/* вспышка гипер-прыжка (элемент создаёт fork.js) */
.warp-flash{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, #dcecff 0%, #58a6ff 45%, #05080d 100%);
  opacity:0; transition:opacity 0.18s ease;
}

/* ===== мобилка (стек, компакт — по phone-мокапу) ===== */
@media (max-width: 900px){
  .fork{ grid-template-columns:1fr; }
  .fork__or{ justify-self:center; }
}
@media (max-width: 640px){
  .fork-hero{ padding-top:76px; }
  .fork__card{ padding:16px 14px 14px; border-radius:14px; }
  .fork__icon{ height:auto; margin-bottom:10px; }
  .fork__icon-img--star{ width:44px; height:44px; }
  /* корабль тёмный + прозрачные поля в PNG: на мобилке нужен крупнее и с ярким свечением */
  .fork__icon-img--ship{
    width:160px;
    filter:drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.65)) brightness(1.12);
  }
  .fork__title{ font-size:17px; margin-bottom:8px; }
  .fork__list{ margin-bottom:14px; }
  .fork__list li{ font-size:12.5px; }
  .fork__cta{ min-height:46px; padding:13px 14px; font-size:13.5px; }
  .fork__or{ width:36px; height:36px; font-size:10.5px; }
  .fork-ask{ font-size:16px; }
  .fork-mission{ font-size:12px; }
}