/* ============ ТОКЕНЫ ВСЕЛЕННОЙ ============ */
:root {
  --night: #050B14;
  --storm: #0E1A26;
  --beam: #6FE3FF;
  --silver: #C7D3DC;
  --pearl: #E9EEF2;
  --ink-on-pearl: #12202C;
  --dawn-amber: #FF9E5E;
  --dawn-blue: #5EA8FF;
  --world-nails: #E91E63;
  --world-lifelens: #17E8B8;
  --text: #E8F1F8;
  --text-dim: #8FA3B0;
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(111,227,255,.10), transparent 60%),
    linear-gradient(180deg, var(--night), var(--storm));
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============ PRELOADER v2.1: WARP + ПОРТАЛ + КОРИДОР ============ */
.preloader {
  position: fixed; inset: 0; z-index: 50;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(111,227,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(5,11,20,.82), rgba(5,11,20,.93)),
    url('../img/warp-corridor.jpg') center / cover no-repeat;
  background-color: var(--night);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }

.preloader__warp { position: absolute; inset: 0; mix-blend-mode: screen; }

.preloader__ring {
  position: relative;
  width: 190px; height: 190px;
  border-radius: 50%;
  border: 2px solid rgba(111,227,255,.65);
  box-shadow: 0 0 44px rgba(111,227,255,.35), inset 0 0 30px rgba(111,227,255,.22);
  opacity: 0;
  transform: scale(.2);
}
.preloader__ring i {
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(111,227,255,.45);
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.preloader.is-warp .preloader__ring {
  animation: ringIn .8s cubic-bezier(.2,.8,.2,1) 1s forwards;
}
@keyframes ringIn { to { opacity: 1; transform: scale(1); } }

.preloader__text {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 22px);
  color: var(--beam); letter-spacing: .12em;
  text-align: center;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(10px);
}
.preloader.is-warp .preloader__text {
  animation: textIn .7s ease 1.3s forwards;
}
@keyframes textIn { to { opacity: 1; transform: none; } }
.preloader__text::after { content: '▌'; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ============ ЗВЁЗДЫ ============ */
.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 2; }

/* ============ S1 ХИРО ============ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* если видео-файл НЕ обрезан снизу — поставь height: 107.6%,
   полоса с лого уйдёт за границу экрана */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  filter: saturate(.9) contrast(1.05);
}
.hero__veil {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 45%,
    rgba(5,11,20,.20), rgba(5,11,20,.88));
}

.hero__over, .hero__title, .hero__sub, .hero__cta { position: relative; z-index: 2; }

.hero__over {
  font-weight: 800;
  letter-spacing: .35em;
  font-size: 12px;
  color: var(--beam);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 7vw, 84px);
  line-height: 1.05;
  text-shadow: 0 0 40px rgba(111,227,255,.12);
  opacity: .6;
}
.hero__sub {
  margin-top: 20px;
  font-size: clamp(15px, 2vw, 20px);
  color: var(--text-dim);
  max-width: 620px;
}

/* проявление текста из прозрачности: с середины ролика, сверху вниз */
.hero.is-playing .hero__over  { animation: heroTextIn 1.4s ease 4.8s both; }
.hero.is-playing .hero__title { animation: heroTitleIn 1.6s ease 5.8s both; }
.hero.is-playing .hero__sub   { animation: heroTextIn 1.6s ease 7s both; }
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: .6; transform: none; }
}

.hero__cta {
  margin-top: 48px;
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid rgba(111,227,255,.5);
  border-radius: 999px;
  color: var(--beam);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  transition: box-shadow .3s, background .3s;
}
.hero__cta:hover {
  background: rgba(111,227,255,.08);
  box-shadow: 0 0 32px rgba(111,227,255,.35);
}

/* зеркальный пол */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(111,227,255,.06));
  pointer-events: none;
}

/* ============ СЕКЦИИ: ОБЩАЯ РАМКА ============ */
section { position: relative; overflow: hidden; }

.section-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}
.section-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5,11,20,.88), rgba(5,11,20,.72) 50%, rgba(5,11,20,.92));
}
.section-inner {
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 24px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 56px);
  text-align: center;
}
.section-sub {
  margin-top: 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: clamp(14px, 1.6vw, 18px);
}

/* сквозной шов вселенной: та же линия, что отделяет футер */
.manifest::before,
.worlds::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(111,227,255,.4), transparent);
}

/* ============ S2 МАНИФЕСТ ============ */
.manifest__spark {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.manifest__list {
  margin-top: 64px;
  display: grid;
  gap: 28px;
  list-style: none;
}
.manifest__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  padding: 28px 32px;
  background: rgba(14,26,38,.55);
  border: 1px solid rgba(111,227,255,.16);
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.manifest__num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--beam);
  opacity: .85;
}
.manifest__item h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  margin-bottom: 8px;
}
.manifest__item p { color: var(--text-dim); }

/* ============ S3 ГОРОД МИРОВ ============ */
.worlds__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
  justify-content: center;
  gap: 32px;
}
.world-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 28px 84px;
  border-radius: 28px;
  background: rgba(5,11,20,.66);
  border: 1px solid var(--accent-soft);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s;
}
.world-card--nails    { --accent: #E91E63; --accent-soft: rgba(231,30,99,.35); }
.world-card--lifelens { --accent: #17E8B8; --accent-soft: rgba(23,232,184,.35); }
.world-card--weather  { --accent: #5EA8FF; --accent-soft: rgba(94,168,255,.35); }
.world-card--food     { --accent: #FFC24B; --accent-soft: rgba(255,194,75,.35); }

.world-card:hover,
.world-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 44px var(--accent-soft);
}
.world-card__num {
  letter-spacing: .3em;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
}
.world-card__icon {
  width: 96px; height: 96px;
  margin: 20px 0 16px;
  border-radius: 24px;
  box-shadow: 0 0 32px var(--accent-soft);
}
.world-card__glyph {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  line-height: 1;
  margin: 20px 0 16px;
  filter: drop-shadow(0 0 18px var(--accent-soft));
}
.world-card__name {
  font-family: var(--font-display);
  font-size: 22px;
}
.world-card__tag {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 14px;
  max-width: 300px;
}
/* портал-арка внизу карточки */
.world-card__portal {
  position: absolute; left: 50%; bottom: -46px;
  width: 120px; height: 60px;
  transform: translateX(-50%);
  border-radius: 120px 120px 0 0;
  background: radial-gradient(60% 100% at 50% 100%, var(--accent), transparent 70%);
  opacity: .35;
  transition: opacity .35s, transform .35s;
}
.world-card:hover .world-card__portal,
.world-card:focus-visible .world-card__portal {
  opacity: .9;
  transform: translateX(-50%) scale(1.25);
}
.world-card__cta {
  position: absolute; bottom: 18px; left: 0; right: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition: .35s;
}
.world-card:hover .world-card__cta,
.world-card:focus-visible .world-card__cta {
  opacity: 1;
  transform: none;
}

/* скан-линия по карточке: язык HUD, но в цвете мира */
.world-card__scan {
  position: absolute; left: 8%; right: 8%; top: -6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent-soft);
  opacity: .25;
  animation: cardScan 7s linear infinite;
  pointer-events: none;
}
@keyframes cardScan { 0% { top: -6%; } 100% { top: 106%; } }

/* маяк статуса в углу карточки */
.world-card__status {
  position: absolute; top: 14px; right: 16px;
  display: flex; align-items: center; gap: 7px;
  font-size: 9px; font-weight: 800; letter-spacing: .22em;
  color: var(--accent);
  opacity: .85;
}
.world-card__status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: statusPulse 2.2s ease-out infinite;
}
@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

/* миры в ковке: двери открыты, но маяк не пульсирует */
.world-card--dev { cursor: pointer; }
.world-card--dev .world-card__status { opacity: .55; }
.world-card--dev .world-card__status i { animation: none; box-shadow: none; opacity: .6; }
.worlds__grid--dev { margin-top: 28px; }
.worlds__grid--dev .world-card { padding-bottom: 84px; }

/* ============ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============ ПОРТАЛ-ПЕРЕХОД ============ */
.portal-flash {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 60%, var(--accent, #6FE3FF), transparent 70%);
  opacity: 0; transform: scale(.2);
}
.portal-flash.is-out { animation: portalOut .42s ease-in; }
.portal-flash.is-in  { animation: portalIn .5s ease-out; }
@keyframes portalOut { to { opacity: 1; transform: scale(1.6); } }
@keyframes portalIn  { from { opacity: 1; transform: scale(1.6); } to { opacity: 0; transform: scale(.2); } }

/* ============ ФУТЕР: ТИШИНА ПОСЛЕ СИМФОНИИ ============ */
.footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(111,227,255,.07), transparent 70%),
    linear-gradient(180deg, rgba(5,11,20,0) 0%, rgba(4,9,16,.85) 22%, #040910 60%);
}
/* тонкая линия-горизонт: последний отблеск луча */
.footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111,227,255,.4), transparent);
}
.footer__inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  padding: 96px 24px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 32px;
}
.footer__logo {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .2em;
}
.footer__note {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 14px;
  max-width: 280px;
}
.footer__head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--beam);
  margin-bottom: 14px;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  transition: color .3s;
}
.footer__col a:hover { color: var(--text); }
.footer__copy {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 0 24px 32px;
}
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ============ КАПСУЛА-МАЯК И ГОЛОКАРТА ============ */
.hero__signal {
  position: relative;
  z-index: 2;
  margin-top: 46px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(111,227,255,.5);
  background: rgba(5,11,20,.6);
  color: var(--beam);
  cursor: pointer;
  transition: box-shadow .3s, background .3s, transform .3s, border-color .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
}
.hero__signal:hover,
.hero__signal:focus-visible {
  background: rgba(111,227,255,.12);
  box-shadow: 0 0 36px rgba(111,227,255,.4);
  transform: translateY(-3px) scale(1.05);
  border-color: var(--beam);
}
.hero__signal-ring {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(111,227,255,.5);
  animation: signalPulse 2.6s ease-out infinite;
  pointer-events: none;
}
/* тултип при наведении — снизу, чтобы не kryть «Войти в город» */
.hero__signal::after {
  content: 'Связаться с создателем';
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(14,26,38,.95);
  border: 1px solid rgba(111,227,255,.3);
  color: var(--beam);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hero__signal:hover::after,
.hero__signal:focus-visible::after {
  opacity: 1;
}
@keyframes signalPulse {
  0% { transform: scale(.85); opacity: .9; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* ядро голокарты: оверлей по центру экрана */
.holo-card {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5,11,20,.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
}
.holo-card[hidden] { display: none; }
.holo-card.is-open { opacity: 1; }
.holo-card__box {
  position: relative;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 32px 32px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(14,26,38,.92), rgba(5,11,20,.96));
  border: 1px solid rgba(111,227,255,.35);
  box-shadow: 0 0 60px rgba(111,227,255,.18), 0 30px 80px rgba(0,0,0,.6);
  text-align: center;
  transform: translateY(14px) scale(.97);
  transition: transform .25s ease;
}
.holo-card.is-open .holo-card__box { transform: none; }
.holo-card__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(111,227,255,.3);
  background: transparent;
  color: var(--beam);
  cursor: pointer;
}
.holo-card__over {
  font-size: 10px; font-weight: 800; letter-spacing: .3em;
  color: var(--beam); text-transform: uppercase;
}
.holo-card__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 22px;
}
.holo-card__qr {
  position: relative;
  width: 220px; height: 220px;
  margin: 22px auto 10px;
  padding: 10px;
  border-radius: 16px;
  background: var(--pearl);
  box-shadow: 0 0 30px rgba(111,227,255,.25);
}
.holo-card__qr img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 8px;
}
.holo-card__scanline {
  position: absolute; left: 6%; right: 6%; top: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--beam), transparent);
  box-shadow: 0 0 10px var(--beam);
  animation: holoSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes holoSweep {
  0%, 100% { top: 8%; opacity: .9; }
  50% { top: 88%; opacity: .5; }
}
.holo-card__note { color: var(--text-dim); font-size: 12px; }
.holo-card__chips {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px;
}
.holo-chip {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(111,227,255,.3);
  background: rgba(111,227,255,.06);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.holo-chip:hover { background: rgba(111,227,255,.12); }
.holo-chip.is-copied {
  border-color: var(--world-lifelens);
  color: var(--world-lifelens);
}
.holo-chip.is-copied::after { content: ' ✓ скопировано'; }
.holo-card__links {
  display: flex; justify-content: center; gap: 22px;
  margin-top: 16px;
}
.holo-card__links a {
  color: var(--beam);
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-decoration: none;
  border-bottom: 1px solid rgba(111,227,255,.35);
  padding-bottom: 2px;
}

/* ============ РОЖДЕНИЕ КНОПОК ИЗ ПОРТАЛА ============ */
.hero__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__portal {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: url('../img/warp-corridor.jpg') center / cover no-repeat;
  filter: blur(5px) saturate(1.15) brightness(1.1);
  /* маска = размытый край: к границе круга изображение плавно тает в ноль */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 28%, rgba(0,0,0,.4) 55%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 28%, rgba(0,0,0,.4) 55%, transparent 74%);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
/* белая вспышка и сияние — отдельным полупрозрачным слоем, без жёстких границ */
.hero__portal::after {
  content: '';
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255,255,255,.7), rgba(111,227,255,.3) 45%, transparent 72%);
  filter: blur(6px);
}
/* до заморозки ролика кнопок не видно, но место под них занято — макет не прыгает */
.hero__cta,
.hero__signal {
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}
.hero.is-ready .hero__cta,
.hero.is-ready .hero__signal {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero.is-ready .hero__portal { animation: portalBirth 1.1s ease-out forwards; }
.hero.is-ready .hero__cta    { animation: actionIn .7s cubic-bezier(.2,.8,.2,1) .55s backwards; }
.hero.is-ready .hero__signal { animation: actionIn .7s cubic-bezier(.2,.8,.2,1) .75s backwards; }
@keyframes portalBirth {
  0%   { opacity: 0; transform: scale(0); }
  25%  { opacity: .8; transform: scale(1); }
  55%  { opacity: .55; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes actionIn {
  from { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.08); }
}

/* ============ HUD: ПРИБОРЫ ВСЕЛЕННОЙ ============ */
.hud {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease .8s;
  --hud: var(--beam);
  --hud-soft: rgba(111,227,255,.35);
  --hud-bright: #F2FBFF;
}
.hero.is-ready .hud { opacity: 1; }
.hud.is-paused * { animation-play-state: paused !important; }

.hud__corner {
  position: absolute;
  width: 46px; height: 46px;
  border: 1px solid var(--hud);
  opacity: .35;
}
.hud__corner--tl { left: 22px; top: 22px; border-right: 0; border-bottom: 0; }
.hud__corner--tr { right: 22px; top: 22px; border-left: 0; border-bottom: 0; }
.hud__corner--bl { left: 22px; bottom: 22px; border-right: 0; border-top: 0; }
.hud__corner--br { right: 22px; bottom: 22px; border-left: 0; border-top: 0; }

.hud__tag {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--hud);
  opacity: .45;
}
.hud__tag--tl { left: 80px; top: 32px; }
.hud__tag--tr { right: 80px; top: 32px; }
.hud__tag--br { right: 80px; bottom: 32px; font-variant-numeric: tabular-nums; }

.hud__scan {
  position: absolute; left: 0; right: 0; top: -4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hud) 30%, var(--hud) 70%, transparent);
  box-shadow: 0 0 18px var(--hud);
  opacity: .16;
  animation: hudScan 9s linear infinite;
}
@keyframes hudScan { 0% { top: -4%; } 100% { top: 104%; } }

/* мини-порталы над башнями: открываются редко и приглушённо */
.hud__gate {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: url('../img/warp-corridor.jpg') center / cover no-repeat;
  filter: blur(4px) saturate(1.15) brightness(1.1);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 28%, rgba(0,0,0,.4) 55%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 28%, rgba(0,0,0,.4) 55%, transparent 74%);
  opacity: 0;
  transform: scale(.2);
  pointer-events: none;
}
.hud__gate::after {
  content: '';
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255,255,255,.65), rgba(111,227,255,.28) 45%, transparent 72%);
  filter: blur(5px);
}
/* левый — НАД башней; правый — над своей */
.hud__gate--a { left: 20%; top: 32%; }
.hud__gate--b { right: 16%; top: 34%; width: 64px; height: 64px; }
.hud__gate.is-open { animation: gateFlash 2.4s ease-out; }
@keyframes gateFlash {
  0%   { opacity: 0; transform: scale(.2); }
  30%  { opacity: .5; transform: scale(1); }
  70%  { opacity: .32; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.28); }
}

.hud__radar {
  position: absolute;
  left: 6%; bottom: 12%;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 1px solid var(--hud);
  opacity: .28;
  overflow: hidden;
}
.hud__radar::before {
  content: '';
  position: absolute; inset: 22%;
  border-radius: 50%;
  border: 1px solid var(--hud);
  opacity: .7;
}
.hud__radar i {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0 76%, var(--hud-soft) 92%, transparent 100%);
  animation: hudSpin 4.5s linear infinite;
}
@keyframes hudSpin { to { transform: rotate(360deg); } }

.hud__forge {
  position: absolute;
  right: 6%; bottom: 12%;
  width: min(240px, 34vw);
  display: flex; flex-direction: column; gap: 12px;
  opacity: .68;
}
.hud__bar { display: flex; flex-direction: column; gap: 5px; }
.hud__bar-head {
  display: flex; justify-content: space-between;
  font-size: 9px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--hud-bright);
  font-variant-numeric: tabular-nums;
}
.hud__bar-head b { transition: color .3s, text-shadow .3s; }
.hud__bar.is-surge .hud__bar-head b {
  color: #fff;
  text-shadow: 0 0 14px var(--hud-bright);
}
.hud__bar-track {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.hud__bar-track i {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, transparent, var(--hud-bright));
  box-shadow: 0 0 10px var(--hud-soft);
  transition: width .45s ease;
}
/* светящаяся точка на кончике заливки */
.hud__bar-track i::after {
  content: '';
  position: absolute; right: -2px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--hud-bright);
}
.hud__bar-track::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: hudShimmer 2.8s ease-in-out infinite;
}
@keyframes hudShimmer { to { left: 130%; } }

@media (max-width: 640px) {
  .hud__radar, .hud__gate--b, .hud__tag--tr { display: none; }
  .hud__forge { right: 5%; bottom: 8%; width: 46vw; }
}

/* ============ ССЫЛКА ВОЗВРАТА НА СТРАНИЦАХ МИРОВ ============ */
.hero__back, .back-link, .world-back {
  position: absolute;
  top: 26px; left: 28px;
  z-index: 3;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .3s;
}
.hero__back:hover, .back-link:hover, .world-back:hover { color: var(--text); }

/* ============ УВАЖЕНИЕ К ВЕСТИБУЛЯРУ ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .portal-flash { display: none; }
  .preloader__warp, .preloader__ring { display: none; }
  .preloader__text { opacity: 1; transform: none; animation: none; }
  .hero__signal-ring, .holo-card__scanline { display: none; }
  .holo-card, .holo-card__box { transition: none; }
  .hero__cta, .hero__signal { opacity: 1; transform: none; pointer-events: auto; animation: none; }
  .hero__portal { display: none; }
  .hud__scan, .hud__radar i, .hud__bar-track::after { animation: none; }
  .hud__gate { display: none; }
  .hud { transition: none; }
  .hero.is-playing .hero__over, .hero.is-playing .hero__title, .hero.is-playing .hero__sub { animation: none; }
  .world-card__scan { display: none; }
  .world-card__status i { animation: none; }
}