/* ============================================================
   AION 2.0 — стили главной страницы (Aion 2.0 v2.html)
   Подключать ПОСЛЕ aion-core.css
   ============================================================ */

/* hero background — video version */
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 26%;
  background: var(--bg-1);
  transform: scale(1.04);
  backface-visibility: hidden;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.4%, -1%, 0); }
}

/* hero version line + socials */
.hero h1 .v { color: var(--accent); }
.hero-version {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
  font-family: var(--mono); font-size: clamp(15px, 1.6vw, 19px); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
}
.hero-version .hv-line { width: clamp(28px, 5vw, 56px); height: 1px; background: var(--accent); opacity: 0.55; }
.hero-sep { width: 1px; height: 30px; background: var(--line-2); margin-inline: 4px; }
.hero-socials { display: flex; gap: 10px; }

/* hero ledger — staggered entrance */
.ledger-row {
  animation: rise .9s cubic-bezier(.16,.84,.44,1) both;
}
.ledger-row:nth-child(1) { animation-delay: .18s; }
.ledger-row:nth-child(2) { animation-delay: .28s; }
.ledger-row:nth-child(3) { animation-delay: .38s; }
.ledger-row:nth-child(4) { animation-delay: .48s; }

/* advantages — inline links + "more" affordance */
.adv-cell p a.inl { color: var(--text); text-decoration: none; box-shadow: inset 0 -1px 0 var(--accent-line); transition: color .2s ease, box-shadow .2s ease; }
.adv-cell p a.inl:hover { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.adv-more {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 14px; color: var(--text);
  padding-bottom: 4px; border-bottom: 1px solid var(--accent-line); transition: gap .2s ease;
}
.adv-more svg { width: 15px; height: 15px; color: var(--accent); }
.adv-more:hover { gap: 13px; }

/* ===================== BONUSES (merged into join) ===================== */
.bonuses { margin-top: 0; padding-bottom: clamp(56px, 8vw, 96px); }
.bonuses-bar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.bonuses-bar .b-label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.bonuses-bar .b-hint { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.03em; }

/* floating marquee */
.reel { position: relative; overflow: hidden; padding-block: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.reel-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
@keyframes reel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bonus-card {
  flex: 0 0 auto; width: 168px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg-2);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), border-color .3s ease, background .3s ease;
}
.bonus-card:hover { border-color: var(--accent-line); background: rgba(236,228,236,0.03); transform: translateY(-6px); }
.bonus-icon { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg-1); }
.bonus-icon image-slot { width: 100%; height: 100%; }
.bonus-qty {
  position: absolute; right: 7px; bottom: 7px; z-index: 2;
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent);
  padding: 2px 7px; border: 1px solid var(--accent-line); border-radius: 3px; background: rgba(10,8,9,0.82);
  letter-spacing: 0.02em;
}
.bonus-card .b-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bonus-card .b-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; margin-top: -6px; }

@media (max-width: 560px) {
  .bonus-card { width: 156px; }
}

/* ===================== ACCESS TOAST ===================== */
.access-toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: min(360px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 18px 18px 18px 16px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,.84,.44,1);
}
.access-toast.show { opacity: 1; transform: none; pointer-events: auto; }
.access-toast .toast-close {
  position: absolute; top: 9px; right: 9px; width: 26px; height: 26px;
  display: grid; place-items: center; border: none; background: none; cursor: pointer;
  color: var(--faint); border-radius: 5px; transition: color .2s ease, background .2s ease;
}
.access-toast .toast-close:hover { color: var(--text); background: rgba(236,228,236,0.06); }
.access-toast .toast-close svg { width: 15px; height: 15px; }
.access-toast .toast-icon {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--accent-line); border-radius: 7px; background: var(--accent-dim); color: var(--accent);
}
.access-toast .toast-icon svg { width: 24px; height: 24px; }
.access-toast .toast-body { min-width: 0; padding-right: 14px; }
.access-toast h4 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
.access-toast p { color: var(--muted); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.access-toast .toast-cta {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); text-decoration: none;
  padding: 9px 14px; border-radius: 5px; transition: filter .2s ease, transform .2s ease;
}
.access-toast .toast-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.access-toast .toast-cta svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .access-toast { transition: opacity .3s ease; transform: none; } }

/* ===================== PRELOADER ===================== */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 24px; }
.pre-wm { font-family: var(--display); font-size: clamp(34px, 6vw, 52px); letter-spacing: 0.16em; color: var(--text); }
.pre-wm b { color: var(--accent); font-weight: 400; }
.pre-bar { position: relative; width: min(260px, 70vw); height: 2px; background: var(--line-2); overflow: hidden; border-radius: 2px; }
.pre-bar span { position: absolute; inset: 0; width: 0; background: var(--accent); border-radius: 2px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.pre-status { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .preloader { transition: opacity .3s ease; } }

/* ===================== FOOTER (legal row) ===================== */
.footer-legal { list-style: none; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-legal a { position: relative; font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); transition: color .2s ease; }
.footer-legal a:hover { color: var(--accent); }
.footer-legal li + li a::before { content: ""; position: absolute; left: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); transform: translateY(-50%); }
.footer-legal + .footer-bottom { margin-top: 24px; }

/* reduced-motion extras */
@media (prefers-reduced-motion: reduce) {
  .ledger-row { animation: none; }
  /* keep the gentle ken-burns drift even with reduced motion — it is slow and non-vestibular */
  .hero-bg { animation-duration: 52s; }
}

/* news feature placeholder (earmarked for KB API image) */
.feature .ph { background: linear-gradient(135deg, var(--bg-2), var(--bg-1)); }