/* Главная «горизонт»: небо и изогнутая Земля рисуются в canvas (horizon.js),
   знак Marg проявляется поверх — сначала звезда, потом огранка вокруг неё.
   Горизонт задан здесь одной переменной; canvas читает её через #horizon-probe. */
:root {
  --horizon: 56svh;
  --mark-w: clamp(170px, min(30vw, 40svh), 420px);
  --mark-h: calc(var(--mark-w) * 0.8434);   /* пропорция огранки: 81.3 / 96.4 */
  --sink: calc(var(--mark-w) * 0.07);        /* низ знака уходит под край атмосферы */
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --glow: 48, 161, 245;                      /* ядро атмосферы, обновляет horizon.js */
  --planet-r: max(140vw, 520px);             /* радиус планеты — тот же, что в horizon.js */
}
@media (max-width: 720px) {
  :root {
    --horizon: 54svh;
    --mark-w: clamp(170px, min(56vw, 34svh), 300px);
  }
}

body.horizon { background: #000104; }

#sky {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  animation: fade 1s ease-out both;
}
#horizon-probe { position: fixed; top: var(--horizon); left: 0; width: 0; height: 0; pointer-events: none; }

/* ---------- знак ---------- */
/* блок шире знака на --pad с каждой стороны: маска режет всё за границей блока,
   а свечение должно поместиться целиком */
.mark {
  --pad: calc(var(--mark-w) * .22);
  position: fixed;
  left: 50%;
  top: calc(var(--horizon) + var(--sink) - var(--mark-h) - var(--pad));
  width: calc(var(--mark-w) + 2 * var(--pad));
  height: calc(var(--mark-h) + 2 * var(--pad));
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: screen;   /* знак светится как атмосфера, а не лежит поверх неё */
  /* знак встаёт из-за планеты: всё, что внутри её диска, срезано по краю горизонта.
     Центр и радиус диска — в координатах блока; при перелёте их пересчитывает horizon.js */
  --limb-r: var(--planet-r);
  --limb-x: 50%;
  --limb-y: calc(var(--planet-r) + var(--mark-h) - var(--sink) + var(--pad));
  --limb: radial-gradient(circle var(--limb-r) at var(--limb-x) var(--limb-y),
          transparent calc(var(--limb-r) - 1px), #000 calc(var(--limb-r) + .5px));
  -webkit-mask-image: var(--limb);
  mask-image: var(--limb);
}
.mark-gem-glow,
.mark-star-glow { position: absolute; inset: var(--pad); }
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* свечение на родителях: так оно не сжимается вместе с крошечной звездой в начале */
.mark-gem-glow {
  filter: drop-shadow(0 0 calc(var(--mark-w) * .1) rgba(var(--glow), .5));
  animation: fade .8s var(--ease-out) 1.6s both;   /* силуэт просто проявляется вокруг звезды */
}
.mark-star-glow {
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, .95))
    drop-shadow(0 0 calc(var(--mark-w) * .045) rgba(170, 225, 255, .7));
}

/* центр звезды в координатах viewBox — (61.8; 59.2).
   Всё вступление — ~3.4 с: звезда 0.3–1.6, силуэт 1.6–2.4, текст 2.4–3.4 */
.mark-star {
  transform-origin: 62.27% 63.69%;
  animation: star-birth 1.3s linear .3s both;
}

/* обычная звезда среди прочих: вспыхнула точкой, мигнула один раз и спокойно раскрылась.
   К проявлению силуэта (1.6 с) стоит ровно; дальше знак статичен */
@keyframes star-birth {
  0%   { opacity: 0;   transform: scale(.035); }
  12%  { opacity: 1;   transform: scale(.035); }
  24%  { opacity: .45; transform: scale(.035); }
  34%  { opacity: 1;   transform: scale(.04); animation-timing-function: cubic-bezier(.3, 0, .15, 1); }
  100% { opacity: 1;   transform: scale(1); }
}

/* ---------- текст под горизонтом ---------- */
.copy {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--horizon) + clamp(40px, 7svh, 76px));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}
.tagline {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 3.6svh, 34px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* заголовок в одну строку: он занимает ~18.7em, делитель 19.6 — запас на Inter вместо SF.
   Уже 480px строка стала бы мельче ~20px, поэтому на узких телефонах он делится на две */
@media (min-width: 480px) {
  .tagline {
    white-space: nowrap;
    font-size: min(clamp(22px, 3.6svh, 34px), calc((100vw - 56px) / 19.6));
  }
}
.lede {
  max-width: 520px;
  margin: clamp(10px, 1.5svh, 16px) 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(13px, 1.7svh, 15px);
  line-height: 1.55;
  text-wrap: balance;   /* без одинокого слова на второй строке */
}
.start {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: clamp(44px, 5.6svh, 50px);
  margin-top: clamp(16px, 2.6svh, 26px);
  padding: 0 24px;
  background: #fff;
  color: #04142e;
  text-decoration: none;
  text-transform: uppercase;
  font: 500 12px/1 var(--mono);
  letter-spacing: .2em;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
@media (hover: hover) {
  .start:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(120, 200, 255, .35); }
}

.rise { animation: rise .8s var(--ease-out) both; }
/* текст — когда силуэт уже встал (2.4 с) */
.d1 { animation-delay: 2.4s; }
.d2 { animation-delay: 2.5s; }
.d3 { animation-delay: 2.6s; }
.fade-in { animation: fade .8s ease-out .2s both; }

/* уход в приложение: звезда летит в угол (horizon.js), текст и кнопки гаснут;
   планету с атмосферой гасит сам canvas, оставляя звёзды */
body.leaving .rise,
body.leaving .fade-in,
body.leaving #sky { animation: none; }
body.leaving .copy > *,
body.leaving .open-dapp,
body.leaving .legal-footer { opacity: 0; pointer-events: none; transition: opacity .4s ease-out; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade { from { opacity: 0; } }

@media (max-width: 720px) {
  .copy { padding: 0 28px; }
}

/* без движения: всё сразу в конечном состоянии, canvas рисует один кадр */
@media (prefers-reduced-motion: reduce) {
  #sky, .mark-star, .mark-gem-glow, .rise, .fade-in { animation: none; }
  .start { transition: none; }
}