/* =============================
   css/style.css – AIAICO Site
   ============================= */

/* === Reset e Variáveis === */
:root {
  --offwhite: #D8CAB7;
  --yellow:   #FFD966;
  --green:    #14FFEC;
  --pink:     #FF00C8;
  --militar:  #556B2F;
  --teal:     #008080;
  --bg-dark:  #0a0a0a;
}

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

/* === Body e Tipografia === */
body {
  background: var(--bg-dark) url('../images/background-lines.svg') repeat;
  color: var(--offwhite);
  font-family: 'Roboto', sans-serif;
  text-align: center;
  overflow-x: hidden;
  padding: 40px 20px;
}

/* === Botões Principais === */
.btn-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 600px;
  margin: 0 auto 60px;
}

.btn {
  padding: 14px;
  font-weight: bold;
  font-size: 1rem;
  border: 3px solid var(--yellow);
  border-radius: 8px;
  cursor: pointer;
  transition: transform .1s;
  text-transform: uppercase;
  user-select: none;
  background: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn:hover:not([disabled]) {
  transform: scale(1.05);
}

/* Cores fixas por ID, evitando conflitos de índice */
#btn-token {
  background: var(--militar) !important;
  color: #000 !important;
}
#btn-follow-x {
  background: var(--teal) !important;
  color: #fff !important;
}
#btn-recompensa {
  background: var(--green) !important;
  color: #000 !important;
}

/* === Avatar e Headline === */
.avatar {
  width: 200px;
  max-width: 70%;
  margin: 0 auto 30px;
  display: block;
  transition: transform .1s;
}

.avatar.shake {
  animation: wobble 3s infinite ease-in-out;
}

.headline {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 40px;
  display: inline-block;
}

.headline.glitch {
  animation: text-glitch .3s infinite;
}

.headline br {
  display: block;
  margin-bottom: 8px;
}

/* === Seções Internas (Quem é, Tokenomics, História, Compra, etc.) === */
/* — cole aqui todo o CSS que já existia para #quem-e, #token-logs, #historia, #compra, etc. — */

/* =============================
   Rodapé AIAICO Caótico
   ============================= */
#rodape {
  background: rgba(0,0,0,0.9);
  padding: 40px 20px;
  text-align: center;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}

.foot-avatar {
  width: 80px;
  height: auto;
  margin-bottom: 16px;
  animation: wobble 3s infinite ease-in-out;
  filter: hue-rotate(-20deg) brightness(1.2);
}

.foot-text {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--offwhite);
  position: relative;
  margin-bottom: 8px;
}

/* glitch layers */
.foot-text.glitch::before,
.foot-text.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  clip: rect(0, 9999px, 0, 0);
}

.foot-text.glitch::before {
  animation: glitchTop 2s infinite ease-in-out;
  color: var(--pink);
  z-index: 1;
}

.foot-text.glitch::after {
  animation: glitchBottom 1.5s infinite ease-in-out;
  color: var(--yellow);
  z-index: 2;
}

.foot-subtext {
  color: var(--offwhite);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* === Keyframes Gerais === */
@keyframes wobble {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(5deg) scale(1.05); }
  50%     { transform: rotate(0deg); }
  75%     { transform: rotate(-5deg) scale(1.05); }
}

@keyframes text-glitch {
  0%,100% { opacity:1; clip: rect(2px,9999px,35px,0); }
  10%     { clip: rect(10px,9999px,50px,0); }
  20%     { clip: rect(5px,9999px,60px,0); }
  30%     { clip: rect(15px,9999px,40px,0); }
  40%     { clip: rect(20px,9999px,70px,0); }
  50%     { clip: rect(12px,9999px,30px,0); }
  60%     { clip: rect(25px,9999px,55px,0); }
  70%     { clip: rect(8px,9999px,65px,0); }
  80%     { clip: rect(18px,9999px,45px,0); }
  90%     { clip: rect(3px,9999px,75px,0); }
}

@keyframes glitchTop {
  0%,50%,100% { clip: rect(0,9999px,0,0); transform: none; }
  10%  { clip: rect(2px,9999px,20px,0); transform: translate(-2px,-2px); }
  30%  { clip: rect(15px,9999px,40px,0); transform: translate(2px,2px); }
  70%  { clip: rect(8px,9999px,65px,0); transform: translate(-2px,2px); }
}

@keyframes glitchBottom {
  0%,50%,100% { clip: rect(0,9999px,0,0); transform: none; }
  20%  { clip: rect(12px,9999px,32px,0); transform: translate(2px,2px); }
  40%  { clip: rect(14px,9999px,30px,0); transform: translate(-2px,-2px); }
  80%  { clip: rect(16px,9999px,28px,0); transform: translate(-2px,2px); }
}