/* Agartha ARK - tema "Guerra Territorial" (o mesmo estilo escolhido para o PW), em teste.
   Carregado depois de agartha-site.css nas paginas publicas. Usa as imagens que o site ja tem
   (hero de cada pagina, cards e Discords). As animacoes ficam no fim e somem com prefers-reduced-motion. */

:root {
  --ag-sangue: #d23b2b;
  --ag-sangue-escuro: #7a1a10;
  --ag-bronze: #b48a4a;
  --ag-fundo: #0c0e10;
  --ag-placa: #15181b;
  --ag-texto: #e9e1d0;
  --ag-apagado: #a89f8e;
  --text: #e9e1d0;
  --soft: #d8cfbd;
  --muted: #a89f8e;
  --line: rgba(180, 138, 74, .18);
  --line-strong: rgba(180, 138, 74, .32);
}

body {
  background:
    linear-gradient(90deg, var(--ag-fundo) 0%, rgba(12, 14, 16, .96) 45%, rgba(12, 14, 16, .6) 100%),
    radial-gradient(ellipse at 85% 30%, #4a3418 0%, #18110a 55%, var(--ag-fundo) 100%);
  background-color: var(--ag-fundo);
  background-attachment: fixed;
  color: var(--ag-texto);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(180, 138, 74, .07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, rgba(180, 138, 74, .07) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
}

h1, h2, .brand span, .action-card strong, .server-tab strong, .discord-card h3 { font-family: Cinzel, Georgia, serif; }
h1 { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; color: #fff; }
h2 { color: #fff; font-weight: 700; letter-spacing: .02em; }

/* ---------- Barra ---------- */
.site-header { background: rgba(12, 14, 16, .9); border-bottom: 1px solid rgba(180, 138, 74, .22); }
.brand span { letter-spacing: .14em; color: #fff; }
.brand small { color: var(--ag-apagado); }
.site-header nav a {
  position: relative;
  color: #cfc5b0;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 8px 7px;
  text-transform: uppercase;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  background: var(--ag-sangue);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.site-header nav a:hover, .site-header nav a.active { color: #fff; background: transparent; }
.site-header nav a:hover::after, .site-header nav a.active::after { transform: scaleX(1); }
/* Doacoes vira o estandarte da barra. */
.site-header nav a[href^="/doacoes.html"], .site-header nav a.login-link {
  color: #fff;
  background: linear-gradient(var(--ag-sangue), var(--ag-sangue-escuro));
  box-shadow: 0 8px 20px rgba(210, 59, 43, .3);
  margin-top: -14px;
  padding: 23px 14px 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  filter: none;
  transform: none;
}
.site-header nav a[href^="/doacoes.html"]::after, .site-header nav a.login-link::after { display: none; }

/* ---------- Hero: texto no escuro a esquerda, imagem do ARK aparecendo a direita ---------- */
.hero, .donation-hero {
  border: 0;
  border-left: 4px solid var(--ag-sangue);
  border-radius: 2px;
  background-image:
    linear-gradient(90deg, rgba(12, 14, 16, .97) 0%, rgba(12, 14, 16, .85) 36%, rgba(12, 14, 16, .2) 72%, rgba(12, 14, 16, .45) 100%),
    var(--hero, var(--donation-hero, none)) !important;
  background-size: 100% auto, cover;
  background-position: 0 0, center right;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.donation-hero {
  background-image:
    linear-gradient(90deg, rgba(12, 14, 16, .97) 0%, rgba(12, 14, 16, .85) 36%, rgba(12, 14, 16, .2) 72%, rgba(12, 14, 16, .45) 100%),
    var(--donation-hero, var(--hero, none)) !important;
}
.hero h1, .donation-hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hero p, .donation-hero p { color: var(--ag-texto); }
.eyebrow {
  border: 0;
  border-radius: 0;
  background: var(--ag-sangue);
  color: #fff;
  letter-spacing: .18em;
}

/* ---------- Botoes ---------- */
.btn, .discord-card a {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ag-sangue);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(210, 59, 43, .22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover, .discord-card a:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn.secondary { background: transparent; color: var(--ag-texto); border: 1px solid rgba(233, 225, 208, .7); box-shadow: none; }

/* ---------- Placas ---------- */
.section {
  background: linear-gradient(180deg, rgba(27, 31, 35, .95), rgba(21, 24, 27, .95));
  border: 1px solid rgba(180, 138, 74, .18);
  border-left: 4px solid var(--ag-sangue);
  border-radius: 2px;
}
.action-card, .server-tab {
  border: 1px solid rgba(180, 138, 74, .2);
  border-left: 3px solid var(--ag-sangue);
  border-radius: 2px;
  background-size: 115% !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-size .6s ease;
}
.action-card:hover, .server-tab:hover {
  transform: translateY(-4px);
  border-color: rgba(210, 59, 43, .6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  background-size: 125% !important;
}
.action-card strong, .server-tab strong { color: #fff; letter-spacing: .03em; }
.vip-card, .discord-card {
  border-radius: 2px;
  border-color: rgba(180, 138, 74, .2);
  background-color: var(--ag-placa);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vip-card:hover, .discord-card:hover { transform: translateY(-3px); border-color: rgba(210, 59, 43, .55); }
.discord-card h3 { color: #fff; }
.notice, .warning-inline { border-radius: 2px; }

/* Regras: cada regra numa placa numerada. */
.regras-lista { list-style: none; counter-reset: regra; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.regras-lista li {
  counter-increment: regra;
  position: relative;
  padding: 14px 16px 14px 64px;
  background: var(--ag-placa);
  border: 1px solid rgba(180, 138, 74, .16);
  line-height: 1.55;
  transition: border-color .2s ease, transform .2s ease;
}
.regras-lista li:hover { border-color: rgba(210, 59, 43, .5); transform: translateX(3px); }
.regras-lista li::before {
  content: counter(regra, decimal-leading-zero);
  position: absolute;
  left: 14px; top: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font: 900 14px Cinzel, Georgia, serif;
  color: #fff;
  background: linear-gradient(var(--ag-sangue), var(--ag-sangue-escuro));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.regras-atendimento { margin-top: 18px; border-left-color: var(--ag-bronze); background: rgba(180, 138, 74, .08); color: #ead9b5; }
.regras-atendimento p { margin: 4px 0; }
main a:not(.btn):not(.action-card):not(.server-tab):not(.vip-card a) { color: #f0a493; }
.site-footer { background: #090a0c; border-top-color: rgba(180, 138, 74, .2); color: var(--ag-apagado); }

@media (max-width: 760px) {
  .site-header nav a { font-size: 11px; letter-spacing: .04em; }
  .site-header nav a[href^="/doacoes.html"] { margin-top: 0; padding: 8px 6px 13px; }
  .hero, .donation-hero {
    background-image: linear-gradient(180deg, rgba(12, 14, 16, .55), rgba(12, 14, 16, .92)), var(--hero, var(--donation-hero, none)) !important;
  }
  .hero h1, .donation-hero h1 { font-size: 32px; overflow-wrap: normal; word-break: normal; }
}

/* ================= Animacoes ================= */
@keyframes ag-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ag-anima .hero > div > *, .ag-anima .donation-hero > div > * { animation: ag-subir .7s cubic-bezier(.2, .7, .2, 1) both; }
.ag-anima .hero > div > :nth-child(2), .ag-anima .donation-hero > div > :nth-child(2) { animation-delay: .12s; }
.ag-anima .hero > div > :nth-child(3), .ag-anima .donation-hero > div > :nth-child(3) { animation-delay: .24s; }
.ag-anima .hero > div > :nth-child(4), .ag-anima .donation-hero > div > :nth-child(4) { animation-delay: .36s; }
.hero > div, .donation-hero > div { position: relative; z-index: 2; }

/* Imagem do hero se aproximando bem devagar (camera lenta). */
@keyframes ag-camera { from { background-size: 100% auto, cover; } to { background-size: 100% auto, 112%; } }
.ag-anima .hero, .ag-anima .donation-hero { animation: ag-camera 22s ease-in-out infinite alternate; }

@keyframes ag-balancar { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.6deg); } }
.ag-anima .site-header nav a[href^="/doacoes.html"] { transform-origin: 50% 0; animation: ag-balancar 4.5s ease-in-out infinite; }

@keyframes ag-brilho { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
.ag-anima .btn:not(.secondary)::before, .ag-anima .discord-card a::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
  animation: ag-brilho 5s ease-in-out 2s infinite;
  pointer-events: none;
}

@keyframes ag-mapa { to { background-position: 88px 88px, -88px 88px; } }
.ag-anima body::before, body.ag-anima::before { animation: ag-mapa 40s linear infinite; }

.ag-faiscas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ag-faisca {
  position: absolute;
  bottom: -10px;
  width: var(--t, 3px);
  height: var(--t, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffd59a 0%, #ff7a3d 45%, transparent 70%);
  box-shadow: 0 0 6px 1px rgba(255, 122, 61, .6);
  opacity: 0;
  animation: ag-faisca var(--d, 7s) linear var(--a, 0s) infinite;
}
@keyframes ag-faisca {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--x, 30px), -460px); }
}

.ag-revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.ag-revelar.is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ag-anima *, .ag-anima *::before, body.ag-anima::before { animation: none !important; transition: none !important; }
  .ag-faiscas { display: none; }
  .ag-revelar { opacity: 1; transform: none; }
}

@media (min-width: 761px) { .site-header nav a { white-space: nowrap; flex-shrink: 0; } }
@media (min-width: 761px) and (max-width: 1400px) { .site-header nav { gap: 0; } .site-header nav a { font-size: 11px; letter-spacing: 0; padding: 8px 6px; } .brand small { display: none; } }