/* --- CONFIGURAÇÕES GERAIS --- */
body {
   box-sizing: border-box;
    margin: 0;
    background-image: url('../imgs/galaxy-back.jpg');
    background-color: #ffffff;
    overflow-x: hidden;
}

@font-face{
  font-family: "Aqila";
  src: url("../fonts/Aqila.ttf") format("trueType");
  
}

@font-face {
  font-family: "TypeMachine";
  src: url("../fonts/TypeMachine.ttf") format("trueType");
}

/* --- CABEÇALHO --- */
.hero-header {
    max-width: 1200px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 30px auto 0px;
    width: 90%;
    padding: 20px 30px;
}

/* --- TÍTULO COM CENTRALIZAÇÃO PERFEITA --- */
.hero-header h1 {
    font-family: Aqila;
   
    text-transform: uppercase;
    font-size: 99px;
    margin: 0;
    transform: scaleY(1.3);
}

 @keyframes lights {
    0% {
        color: hsl(0, 0%, 80%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), 1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
    30% {
        color: hsl(230, 80%, 90%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), 0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    40% {
        color: hsl(230, 100%, 95%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 90%, 0.5), 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }
    70% {
        color: hsl(230, 80%, 90%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em
    -12.375px
     0.25em hsla(40, 100%, 60%, 0.2), -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    
    100% {
        color: hsl(0, 0%, 80%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
}

h1 {
  margin: auto;
  font-size: 3.5rem;
  font-weight: 300;
  animation: lights 5s 750ms linear infinite;
}


/* CONTAINER PRINCIPAL (A MÁGICA DO LAYOUT DE 2 COLUNAS) */
.container {
  background-color: #aaaaaa;
  display: grid;
  grid-template-columns: 2fr 1fr; /* Define 2 colunas: a primeira (2fr) tem o dobro da largura da segunda (1fr) */ 
  gap: 30px;
  padding: 30px 30px 30px 30px;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

/* 2. DIV PRINCIPAL (COLUNA DA ESQUERDA) */
.div-principal {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espaço entre a 'welcome-folder' e 'updates-creators' */
}

/* 2.1. JANELA COM SCROLL */
.welcome-folder {
    font-size: 23px;
    background-image: url('../imgs/cowboy_bebop_back.jpg');;
    border: 1px solid #ccc;
    padding: 20px;
    height: 300px; /* Altura fixa para a caixa */
    overflow-y: auto; /* A MÁGICA: Cria a barra de rolagem vertical quando o conteúdo é maior que a altura */
}
.welcome-folder h2{
  color: black;
  font-size: 24px;
  font-weight: 400;
  background-color: #eceff4;
  padding: 15px;;
}

.folder-back{
  background-color: #eceff4;
  padding: 15px;
}
.palavra-animada1 {
  display: inline-block; /* Importante para a animação 'transform' funcionar corretamente */
  
  /* Aplica nossa animação 'wavy' */
  animation: wavy1 1.5s infinite ease-in-out; 
}
.palavra-animada2 {
  display: inline-block; /* Importante para a animação 'transform' funcionar corretamente */
  
  /* Aplica nossa animação 'wavy' */
  animation: wavy2 1.5s infinite ease-in-out; 
}
.palavra-animada3 {
  display: inline-block; /* Importante para a animação 'transform' funcionar corretamente */
  
  /* Aplica nossa animação 'wavy' */
  animation: wavy3 1.5s infinite ease-in-out; 
}

span{
  color: green;
}
/* Definição da animação (o que ela faz) */
@keyframes wavy1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* Ajuste este valor para uma onda mais alta ou mais baixa */
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wavy2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px); /* Ajuste este valor para uma onda mais alta ou mais baixa */
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wavy3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* Ajuste este valor para uma onda mais alta ou mais baixa */
  }
  100% {
    transform: translateY(0);
  }
}


.updates-creators{
  display: flex;
  gap: 20px; 
}

.updates-creators h3{
  font-weight: 400;
  text-align: center;
  font-size: 21px;
}
/* 2.2. UPDATES E CREATORS */
.update-box {
  font-size: 18px;
  flex: 1;
  background-color: #77a1b7;
  padding: 20px;
  position: relative;
}

.update-box li{
  font-weight: bold;
  padding: 10px;
}

.atabook-scroll-wrapper{
  display: flex;
}

 .creator-box{

  flex: 1;
  
  display: block;

  background-color: #eceff4;

  padding: 20px;

  position: relative;

}

.buttons{
  width: 220px;
  align-content: center;
  margin: auto;
}

.kamina_glass{
  position: absolute;
  z-index: 2;
  height: 50px;
  top: -25px;
  right: -40px;

}

.creator-box a{
  gap: 4px;
  margin: 2px;
  transition: transform 0.1s;
}

.creator-box a:hover{
  transform: scale(1.03);
  background-color: #77a1b7;
} 

.mybutton{
  transition: transform 0.1s;
}

.mybutton:hover{
  transform: scale(1.03);
  background-color: #77a1b7;
}

iframe{
  height: 300px;
  width: 70%;
}

/* 3. DIV SECUNDÁRIA (SIDEBAR DA DIREITA) */
.div-secundaria {
    background-color: #e9ecef;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 30px;
    align-self: flex-start; /* Impede que ele estique a altura inteira */
}

.sidebar-logo {
    text-align: center;
}

.logo{
  width: 180px;
}

.sidebar-nav{
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
}

/* 3.2. NAVBAR VERTICAL */
.sidebar-nav ul {
    list-style-type: none; /* Remove os pontos da lista */
    padding: 0;
    margin: auto;
    width: 60%;
    display: flex;
    flex-direction: column; /* Como você pediu: uma coluna */
    gap: 10px; /* Espaço entre os links */
}
.sidebar-nav a {
  border: 1px solid black;
    text-decoration: none;
    color: #023047;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
  
  transition: transform 0.1s;
  display: block;
  position: relative; 
  overflow: visible; 
}

/* 3. A ANIMAÇÃO NO HOVER */
.sidebar-nav a:hover {
  /* Movimento: 8px para baixo e 5% de expansão */
  z-index: 10;
  text-shadow: 2px 2px 4px #1919d4, 1px 1px 5em #5e618e, -1px -1px 0.2em #a9ccef;
  transform: translateX(-10px) scale(1.05);
  background-color: #d9d9d9;
  color: white;
}

.sidebar-contato {
  font-family: "Jersey 10", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
    background-color: #77a1b7;
    padding: 15px;
}

.blinkers{
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  
}

.blinkers img{
  margin: 5px;  
}

/* --- RESPONSIVIDADE PARA CELULARES --- */
/* ======================================================= */
/* --- RESPONSIVIDADE PARA CELULARES (VERSÃO CORRIGIDA) --- */
@media (max-width: 768px) {

    /* 1. CONFIGURAÇÃO "À PROVA DE FALHAS" PARA O CONTAINER */
    .container {
        display: block; /* Mudamos de grid para block para simplificar o layout de coluna única */
        width: 90%;    /* O container ocupa 100% da tela */
        padding: 0 15px;/* O espaçamento lateral é controlado pelo padding, não pela largura */
        margin: auto;
    }

    /* 2. FORÇANDO TODOS OS FILHOS A SE COMPORTAREM */
    /* Selecionamos todos os filhos diretos do container e os containers problemáticos */
    .div-principal, 
    .div-secundaria, 
    .welcome-folder, 
    .updates-creators, 
    .creator-box
    {
        width: 90%;    /* Força a largura a ser 100% do seu pai */
        max-width: 90%;  /* Garante que nunca seja maior que 100% */
        margin: 10px auto;
    }
    .atabook-scroll-wrapper{
      width: 87%;
      margin: auto;
    }
    
    .container-atabook{
      width: 100%;
    }
    
    #atabook-box{
      width: 100%;
    }

    /* 3. CORREÇÃO DOS ELEMENTOS ESPECÍFICOS */
    .updates-creators {
        flex-direction: column;
        gap: 30px;
    }

    /* 4. AJUSTES FINAIS DE ESTILO */

    .hero-header {
        padding: 15px 0; /* Ajusta o padding do header */
    }

    .hero-header h1 {
        font-size: 48px;
        transform: scaleY(1.2);
        color: white;
        animation: none;
    }
    .blinkers{
      flex-direction: column;
    }
}

/* BÔNUS: RESPEITA AS PREFERÊNCIAS DE ACESSIBILIDADE DO USUÁRIO */
@media (prefers-reduced-motion: reduce) {
  /* Desativa animações e transições para usuários que solicitaram movimento reduzido */
  h1, .sidebar-nav a, .creator-box a, .mybutton {
    animation: none;
    transition: none;
  }
}