/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__bg-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background-size: cover;
  background-position: center;
  animation: heroZoom 20s ease-in-out infinite alternate;
}
.hero__bg-image--desktop { display: block; }
.hero__bg-image--mobile { display: none; }


.hero__gradient {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgb(var(--bg-1-rgb) / 0.35) 0%, rgb(var(--bg-1-rgb) / 0.05) 30%, rgb(var(--bg-1-rgb) / 0.55) 78%, var(--bg-1) 100%),
    linear-gradient(90deg, rgb(var(--bg-1-rgb) / 0.5) 0%, transparent 35%, transparent 60%, rgb(var(--bg-1-rgb) / 0.5) 100%);
}
.hero__fog {
  position: absolute; z-index: 3;
  width: 200%; height: 40%;
  background: radial-gradient(ellipse, rgb(var(--magic-1-rgb) / 0.14) 0%, rgba(135, 92, 246, 0.05) 40%, transparent 70%);
  opacity: 0.7;
  animation: fogMove 30s linear infinite;
}
.hero__fog--1 { bottom: 10%; left: -50%; }
.hero__fog--2 { bottom: 20%; left: -50%; animation-delay: -15s; opacity: 0.45; }

.hero__light {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 50% 42% at 68% 28%, rgb(var(--magic-1-rgb) / 0.12), transparent 70%);
  animation: lightPulse 6s ease-in-out infinite alternate;
}

.hero__content {
  position: relative; z-index: 10;
  text-align: center;
  padding: calc(var(--header-h) + 2vh) 0 calc(80px + 2vh);
}
/* подложка за текстами первого экрана: фиолетовое свечение кругом; сверху гасится, чтобы не закрывать логотип */
.hero__text { position: relative; }
.hero__text::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 30%; translate: -50% -50%;
  width: min(90vh, 760px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, rgba(105, 71, 189, 0.3), transparent);
  mask-image: linear-gradient(transparent 24%, #000 30%);
}
.hero__title {
  margin-bottom: 16px;
  line-height: 0;
}
.hero__logo-img {
  display: block;
  width: min(520px, 88vw, 56vh);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgb(var(--magic-1-rgb) / 0.35));
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--gold-3);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  margin-bottom: 8px;
}
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-1);
  max-width: 600px;
  margin: 0 auto 16px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.hero__opening { margin-bottom: 28px; }
.hero__opening-date {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.hero__online-badge {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: var(--success);
  text-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
  animation: onlinePulse 2s ease-in-out infinite;
}

.countdown {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.countdown__item { text-align: center; min-width: 70px; }
.countdown__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.countdown__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--text-2);
  margin-top: 4px;
}
.countdown__sep {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold-1);
  opacity: 0.5;
  margin-bottom: 20px;
}

.hero__cta {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 0;
}

/* Декоративная линия-вензель под заголовками */
.hero__headline::after, .modal__subtitle::after {
  content: ''; display: block;
  height: 16px; width: min(320px, 70%);
  margin: 10px auto 0;
  background: url('/design/assets/ornaments/divider.svg') center / contain no-repeat;
}

/* Server Status Panel */
.server-status {
  display: inline-flex; align-items: center; gap: 24px;
  padding: 16px 32px;
  background: rgb(var(--bg-2-rgb) / 0.7);
  border: 1px solid rgb(var(--gold-1-rgb) / 0.15);
  border-radius: 4px;
  backdrop-filter: blur(16px);
  font-size: 0.85rem;
}

/* Панель стадий справа на первом экране */
.hero__side {
  position: absolute; right: 40px; top: calc(var(--header-h) + 36px); z-index: 11;
  display: flex; flex-direction: column; gap: 14px; width: 290px;
}
.side-item {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgb(var(--bg-1-rgb) / 0.72), rgb(var(--bg-1-rgb) / 0.35));
  backdrop-filter: blur(6px);
  text-align: left;
}
.side-item__icon {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold-3);
}
.side-item__icon::before {
  content: ''; position: absolute; inset: 0;
  background: url('/design/assets/ornaments/diamond-frame.svg') center / 100% 100% no-repeat;
}
.side-item__icon .icon { width: 24px; height: 24px; position: relative; color: var(--gold-3); fill: rgba(230, 195, 130, 0.22); stroke-width: 1.7; filter: drop-shadow(0 0 6px rgb(var(--gold-1-rgb) / 0.7)); }
.side-item__name { display: block; font-size: 0.95rem; color: var(--text-1); }
.side-item__sub { display: block; white-space: nowrap; font-size: 0.75rem; color: var(--gold-2); }
.badge {
  padding: 3px 10px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; border-radius: 2px;
  white-space: nowrap;
}

/* ---- HERO: ADAPTIVE ---- */
/* до 1279px: без панели стадий справа, у якорей только иконки */
@media (max-width: 1279px) {
  .hero__side { display: none; }
}

/* до 1023px: без боковых якорей, мобильный фон героя */
@media (max-width: 1023px) {
  .hero__bg-image--desktop { display: none; }
  .hero__bg-image--mobile { display: block; background-position: center top; }
}

/* телефон */
@media (max-width: 640px) {
  .hero__logo-img { width: min(380px, 92vw); }
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__cta .btn { width: 100%; max-width: 320px; }
  .server-status { flex-direction: column; gap: 12px; text-align: center; }
  .countdown { gap: 12px; }
  .countdown__item { min-width: 56px; }
  .countdown__sep { display: none; }
}

/* ---- SIDE NAV: боковые якоря главной (десктоп) ---- */
.side-nav {
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 900;
  display: flex; flex-direction: column; gap: 22px;
}
.side-nav::before {
  content: ''; position: absolute; left: 13.5px; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(transparent, rgb(var(--gold-1-rgb) / 0.5) 20%, rgb(var(--gold-1-rgb) / 0.5) 80%, transparent);
  pointer-events: none;
}
.side-nav__link {
  display: flex; align-items: center; gap: 14px;
  min-height: 28px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
  transition: color 0.3s, text-shadow 0.3s;
}
.side-nav__link i {
  position: relative; width: 28px; height: 28px; flex-shrink: 0;
  background: url('/design/assets/ornaments/anchor.svg') center / contain no-repeat;
}
.side-nav__link i::after {
  content: ''; position: absolute; inset: 0;
  background: url('/design/assets/ornaments/anchor-active.svg') center / contain no-repeat;
  opacity: 0; transition: opacity 0.3s;
}
.side-nav__link:hover, .side-nav__link.active { color: var(--gold-2); }
.side-nav__link.active { text-shadow: 0 0 12px rgb(var(--gold-1-rgb) / 0.55); }
.side-nav__link.active i::after { opacity: 1; }

/* ---- SIDE NAV: ADAPTIVE ---- */
/* до 1279px: у якорей только иконки */
@media (max-width: 1279px) {
  .side-nav__link span { display: none; }
}

/* до 1023px: без боковых якорей */
@media (max-width: 1023px) {
  .side-nav { display: none; }
}