/* PAX ROMANA — сайт-визитка. Мрамор, золото, пурпур. */

:root {
  --obsidian: #0b0908;
  --porphyry: #1a1210;
  --marble: #efe7d7;
  --marble-dim: #b9ad97;
  --gold: #c9a227;
  --gold-bright: #f4dc8a;
  --blood: #7e1c16;
  --shadow: rgba(0, 0, 0, 0.55);
}

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

html, body { min-height: 100%; }

body {
  /* fixed — иначе градиенты обрываются там, где заканчивается экран,
     и при скролле снизу появляется чёрная полоса */
  background:
    radial-gradient(1200px 700px at 50% -10%, #2a1d18 0%, transparent 60%),
    radial-gradient(900px 500px at 50% 110%, #241a2a 0%, transparent 55%),
    var(--obsidian);
  background-attachment: fixed;
  color: var(--marble);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Мраморная текстура поверх фона */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(28deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 11px);
}

/* Лучи света, медленно плывущие сверху */
.rays {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 90vh;
  pointer-events: none;
  background:
    conic-gradient(from 200deg at 50% 0%,
      transparent 0deg, rgba(244, 220, 138, 0.06) 12deg, transparent 26deg,
      transparent 40deg, rgba(244, 220, 138, 0.05) 52deg, transparent 66deg);
  filter: blur(2px);
  animation: sway 24s ease-in-out infinite alternate;
}

@keyframes sway {
  from { transform: translateX(-3%) rotate(-1.5deg); }
  to { transform: translateX(3%) rotate(1.5deg); }
}

/* Золотая пыль */
.dust { position: fixed; inset: 0; pointer-events: none; }

.dust i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  animation: float linear infinite;
  box-shadow: 0 0 6px rgba(244, 220, 138, 0.8);
}

@keyframes float {
  0% { transform: translateY(20vh) scale(0.6); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

.page {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
}

/* === Шапка === */
.crest { animation: rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(38px, 8vw, 86px);
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 1.05;
  background: linear-gradient(100deg,
    #8a6f1e 0%, var(--gold) 22%, var(--gold-bright) 38%,
    #fff6d8 46%, var(--gold-bright) 54%, var(--gold) 72%, #8a6f1e 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rise 900ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both, shimmer 7s linear infinite 1s;
  filter: drop-shadow(0 2px 14px rgba(201, 162, 39, 0.25));
}

@keyframes shimmer {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}

/* Девиз: латынь крупно, перевод тихо под ней */
.motto {
  text-align: center;
  animation: rise 900ms 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: opacity 600ms ease, transform 600ms ease;
  min-height: 52px;
}

.motto.fade { opacity: 0; transform: translateY(-6px); }

.motto-la {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--gold-bright);
  letter-spacing: 0.16em;
  font-size: clamp(13px, 2.6vw, 19px);
  opacity: 0.92;
}

.motto-ru {
  margin-top: 6px;
  color: var(--marble-dim);
  font-size: clamp(10px, 1.8vw, 12px);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.rule {
  width: min(520px, 86vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
  animation: widen 1100ms 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.rule::after {
  content: '❖';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold);
  background: var(--obsidian);
  padding: 0 12px;
  font-size: 12px;
}

@keyframes widen { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* === Центральная сцена: легионеры и ссылки === */
.scene {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px) 1fr;
  align-items: center;
  gap: clamp(8px, 3vw, 36px);
  width: 100%;
}

.guard { display: flex; justify-content: center; }
.guard svg { width: clamp(120px, 20vw, 220px); height: auto; }

.guard.left { animation: enterLeft 1100ms 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.guard.right { animation: enterRight 1100ms 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes enterLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes enterRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* Лёгкое дыхание строя */
.guard .body { animation: breathe 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
.guard.right .body { animation-delay: 0.7s; }

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Блик по копью */
.glint { animation: glint 6s ease-in-out infinite; transform-origin: center; }
.guard.right .glint { animation-delay: 3s; }

@keyframes glint {
  0%, 82%, 100% { opacity: 0; }
  88% { opacity: 0.9; }
}

/* === Ссылки === */
.links { display: flex; flex-direction: column; gap: 14px; }

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(42, 30, 24, 0.9), rgba(20, 14, 12, 0.9));
  color: var(--marble);
  text-decoration: none;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.12em;
  font-size: 15px;
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  animation: rise 700ms both;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.link:nth-child(1) { animation-delay: 560ms; }
.link:nth-child(2) { animation-delay: 650ms; }
.link:nth-child(3) { animation-delay: 740ms; }
.link:nth-child(4) { animation-delay: 830ms; }

.link:hover {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  box-shadow: 0 12px 30px -12px rgba(201, 162, 39, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Золотая волна по наведению */
.link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(244, 220, 138, 0.16) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}

.link:hover::before { transform: translateX(120%); }

.link .mark {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 3px;
  color: var(--gold-bright);
}

.link .text { display: flex; flex-direction: column; gap: 2px; }
.link .hint {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--marble-dim);
  text-transform: none;
}

.link .arrow { margin-left: auto; color: var(--gold); transition: transform 220ms ease; }
.link:hover .arrow { transform: translateX(4px); }

.link.off { opacity: 0.45; pointer-events: none; }
.link.off .arrow { opacity: 0.3; }

/* === Пантеон === */
.pantheon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 4vw, 46px);
  animation: rise 900ms 950ms both;
}

.god {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--marble-dim);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  transition: color 260ms ease, transform 260ms ease;
  cursor: default;
}

.god svg { width: 30px; height: 30px; opacity: 0.65; transition: opacity 260ms ease, transform 400ms ease; }
.god:hover { color: var(--gold-bright); transform: translateY(-4px); }
.god:hover svg { opacity: 1; transform: rotate(-6deg) scale(1.1); }

.foot {
  color: rgba(185, 173, 151, 0.5);
  font-size: 11px;
  letter-spacing: 0.28em;
  font-family: 'Cinzel', Georgia, serif;
  text-align: center;
}

/* На телефоне строй остаётся по бокам — просто фигуры уменьшаются,
   а колонка ссылок забирает всё, что останется. */
@media (max-width: 760px) {
  .page { padding: 34px 12px 56px; gap: 30px; }
  .scene { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .guard svg { width: clamp(46px, 16vw, 104px); }

  .link { padding: 12px 12px; font-size: 13px; gap: 10px; }
  .link .mark { width: 28px; height: 28px; }
  .link .mark svg { width: 14px; height: 14px; }
  .link .hint { font-size: 10px; }
  .link .arrow { font-size: 13px; }
}

/* Совсем узкие экраны: подпись-подсказку прячем, чтобы кнопка не ломалась */
@media (max-width: 400px) {
  .scene { gap: 4px; }
  .link { letter-spacing: 0.06em; font-size: 12px; }
  .link .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}