/* --- RESET E CONFIGURAÇÃO GLOBAL --- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Comfortaa', sans-serif;
  background-color: #000000;
  scroll-behavior: smooth;
}

/* --- Definição da propriedade de ângulo para animação --- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.secao {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}

/* --- LAYOUT DA SEÇÃO 1 (HOME) --- */
#home {
  display: grid;
  grid-template-columns: 624px 1fr;
  align-items: center;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  background: #000;
}

/* Colunas */
.coluna-esquerda, .coluna-direita {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  position: relative;
  z-index: 5;
}

.coluna-esquerda {
  background: linear-gradient(180deg, rgba(26, 26, 26, 1) 0%, rgba(0, 0, 0, 1) 100%);
  gap: 25px; /* Espaçamento entre os itens */
}

.coluna-direita {
    gap: 40px; /* Espaçamento entre os itens */
}

/* --- ELEMENTOS DE CONTEÚDO (POSIÇÕES E TAMANHOS AJUSTADOS) --- */

/* =================================================================== */
/* --- INÍCIO DA SEÇÃO --- */
/* =================================================================== */

/* 1. O Contêiner Principal da Animação */
.logo-cabeca-container {
  position: relative; /* Essencial para posicionar os filhos dentro dele */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px; /* Definimos um tamanho fixo para o contêiner */
  height: 250px; /* Ajuste a altura conforme a imagem original */
  margin-top: -50px;
  cursor: pointer; /* Adiciona um cursor para indicar que é interativo */
}

/* 2. A Imagem do Anubis (Camada da Frente) */
.anubis-site-12 {
    width: 100%; /* Ocupa todo o contêiner */
    height: auto;
    position: relative; /* Para poder aplicar z-index e transição */
    z-index: 2; /* Fica na camada da frente (número maior) */

    /* A animação suave! */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. O Texto "Seja Dev" (Camada de Trás) */
.seja-dev {
    position: absolute; /* Posição absoluta para ficar no mesmo lugar que a imagem */
    z-index: 1; /* Fica na camada de trás (número menor) */

    /* Estilos do texto */
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;

    /* Centraliza o texto perfeitamente no meio do contêiner */
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 4. A ANIMAÇÃO: O que acontece quando o mouse passa por cima */
.logo-cabeca-container:hover .anubis-site-12 {
    /* Move a imagem 45px para cima e diminui para 75% do tamanho */
    transform: translateY(-45px) scale(0.75);
}

/* =================================================================== */
/* --- FIM DA SEÇÃO --- */
/* =================================================================== */

.inove-com-poucas-linhas {
    color: #fff;
    font-size: 44px;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    /* MUDANÇA: Garante que o texto não tenha margens indesejadas */
    margin: 0;
}

/* --- BOTÃO INICIAR COM VISUAL APRIMORADO --- */
.bot-o {
  width: 280px;
  height: 70px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: 3px solid transparent; /* A borda que será preenchida pelo gradiente */

  /* Técnica de 2 camadas de fundo */
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(from var(--angle), #4B0082, #8A2BE2 20%, #4B0082 35%, transparent 50%) border-box;

  /* Animação que muda o ângulo do gradiente */
  animation: border-loading-animation 2.5s linear infinite;

  /* NOVO: Glow sutil que emana do botão */
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
  /* MELHORADO: Transição mais suave para múltiplas propriedades */
  transition: transform 0.3s ease, box-shadow 0.3s ease, animation-duration 0.3s ease;
}

.bot-o:hover {
  transform: scale(1.05); /* Mantém o crescimento */

  /* NOVO: O glow fica mais intenso no hover */
  box-shadow: 0 0 25px rgba(138, 43, 226, 0.8);

  /* NOVO: A animação da borda fica mais rápida no hover */
  animation-duration: 1s;
}

/* NOVO: Feedback visual quando o botão é pressionado */
.bot-o:active {
    transform: scale(0.98); /* Encolhe um pouco para simular o clique */
}

.iniciar {
  font-size: 34px;
  font-weight: 700;

  /* MELHORADO: Texto com gradiente para combinar com a borda */
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* O texto em si fica transparente para revelar o fundo */

  /* NOVO: Sombra sutil para destacar o texto */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animação da borda (sem alterações) */
@keyframes border-loading-animation {
  to {
    --angle: 360deg;
  }
}
/* Define a animação da borda */
@keyframes border-loading-animation {
  to {
    --angle: 360deg;
  }
}

/* Botão Criar Conta */
.criarconta {
  padding: 4px 12px;
  background-color: transparent; border-radius: 19px; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease;
}
.criarconta:hover { background-color: #fff; }
.criarconta2 { font-size: 13px; color: #fff; font-weight: 700; transition: color 0.3s ease; }
.criarconta:hover .criarconta2 { color: #000; }

/* COLUNA DIREITA */
.logo-codashi-container {
    display: flex;
    align-items: flex-end; /* Alinha pela base, como no seu código */
    justify-content: center;
}
.cod-shi {
    height: 60px;
    margin-left: -102px;
}
.anubis-trecodalogo-1 {
    height: 70px;
    /* MUDANÇA: Ajustado para o seu valor exato */
    margin-left: -175px;
}

.de-ideias-simples-a-solu-es-maiores-voc-tem-espa-o-para-experimentar-aprender-e-inovar-com-poucos-ou-muitos-cliques-e-muita-liberdade {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    max-width: 650px;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.de-ideias-simples-a-solu-es-maiores-voc-tem-espa-o-para-experimentar-aprender-e-inovar-com-poucos-ou-muitos-cliques-e-muita-liberdade:hover {
  /* 1. Aumenta o tamanho do texto levemente */
  transform: scale(1.03);

  /* 2. Cria o brilho neon branco */
  text-shadow: 0 0 8px #ffffff, 0 0 10px #ffffff;
}

/* --- ELEMENTOS DE SOBREPOSIÇÃO --- */

.linha-vertical-magenta, .linha-vertical-amarela { position: absolute; top: 0; height: 100%; z-index: 10; animation: rainbow-background-loop 10s linear infinite, rainbow-neon-glow 10s linear infinite; }
.linha-vertical-magenta { left: 624px; width: 4px; }
.linha-vertical-amarela { left: 632px; width: 3px; animation-delay: -0.5s; }
.anubis-trecodalogo-2 { position: absolute; right: -120px; top: 200px; width: 724px; height: 789px; transform: scale(-1, 1); z-index: 1; }
.anubis-trecodalogo-22 { opacity: 0.1; width: 100%; height: 100%; object-fit: cover; }

.divisor-tela {
    position: absolute;
    /* MUDANÇA: Abaixado para mostrar só a borda */
    bottom: -108px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1440px;
    height: 150px; 
    object-fit: contain;
    pointer-events: none;
    z-index: 10;
}

/* --- SETA DE ROLAGEM COM ANIMAÇÃO (VERSÃO FINAL) --- */
.seta-link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    cursor: pointer;
}
.seta {
    width: 230px;
    height: 230px;
    transition: transform 0.3s ease;
    /* CORREÇÃO: Usando ../ para acertar o caminho da pasta css para a assets */
    -webkit-mask: url('../assets/img/Seta.svg') no-repeat center;
    mask: url('../assets/img/Seta.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* Gradiente animado como fundo */
    background: linear-gradient(180deg,
        #00ffff,
        #8A2BE2,
        #E800B2,
        #8A2BE2,
        #00ffff
    );
    background-size: 100% 300%;
    /* Combinando as duas animações */
    animation:
        bounce-arrow 2s ease-in-out infinite,
        scroll-gradient 3s linear infinite;
}

.seta-link:hover .seta {
    transform: scale(1.2);
    animation-play-state: paused;
}

/* Animação de pulo da seta */
@keyframes bounce-arrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

/* Animação que move o gradiente */
@keyframes scroll-gradient {
    from {
        background-position: 50% 0%;
    }
    to {
        background-position: 50% 100%;
    }
}

/* --- ANIMAÇÕES --- */
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rainbow-background-loop { 0%{background-color:#E800B2}14%{background-color:#8b00ff}28%{background-color:#0000ff}42%{background-color:#00ff00}57%{background-color:#ffff00}71%{background-color:#ff7f00}85%{background-color:#ff0000}100%{background-color:#E800B2} }
@keyframes rainbow-neon-glow { 0%{box-shadow:0 0 12px #E800B2}14%{box-shadow:0 0 12px #8b00ff}28%{box-shadow:0 0 12px #0000ff}42%{box-shadow:0 0 12px #00ff00}57%{box-shadow:0 0 12px #ffff00}71%{box-shadow:0 0 12px #ff7f00}85%{box-shadow:0 0 12px #ff0000}100%{box-shadow:0 0 12px #E800B2} }

/* --- SEÇÃO 2 (SOBRE) --- */
#sobre { background-color: #1A1A1D; display: flex; align-items: center; justify-content: center; text-align: center; color: white; }
.conteudo-secao-2 h1 { font-size: 4rem; margin-bottom: 20px; }
.conteudo-secao-2 p { font-size: 1.5rem; }

/* =================================================================== */
/* --- CÓDIGO DE RESPONSIVIDADE ADICIONADO --- */
/* =================================================================== */

/* Para telas de até 1200px (laptops menores e tablets grandes) */
@media (max-width: 1200px) {
  #home {
    /* Muda o grid para duas colunas flexíveis */
    grid-template-columns: 1fr 1fr;
  }
  .linha-vertical-magenta, .linha-vertical-amarela {
    /* Esconde as linhas divisórias pois a coluna não é mais fixa */
    display: none;
  }
  .anubis-trecodalogo-2 {
    /* Reduz e reposiciona a imagem de fundo */
    width: 600px;
    right: -150px;
  }
}

/* Para telas de até 1024px (tablets em modo paisagem) */
@media (max-width: 1024px) {
  #home {
    /* A MUDANÇA MAIS IMPORTANTE: Transforma em uma única coluna */
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .coluna-direita {
    /* Escondemos a coluna da direita em telas menores para focar no conteúdo principal */
    /* Você pode optar por mostrá-la se quiser, mas pode poluir a tela */
    display: none;
  }
  .coluna-esquerda {
    padding: 0 20px;
    text-align: center;
  }
  .inove-com-poucas-linhas {
    font-size: 36px;
  }
  .bot-o {
    width: 260px;
    height: 65px;
  }
  .iniciar {
    font-size: 30px;
  }
  .anubis-trecodalogo-2 {
    /* Reposiciona a imagem de fundo para o novo layout de coluna única */
    opacity: 0.1;
    right: -200px;
    top: 25%;
  }
}

/* Para telas de até 768px (tablets em modo retrato e celulares grandes) */
@media (max-width: 768px) {
  .secao {
    /* Permite que a altura da seção se ajuste ao conteúdo, se necessário */
    height: auto;
    min-height: 100vh;
  }
  .logo-cabeca-container {
    margin-top: 0; /* Reseta a margem */
    transform: scale(0.8); /* Reduz o tamanho do logo */
  }
  .inove-com-poucas-linhas {
    font-size: 28px;
  }
  .bot-o {
    transform: scale(0.9);
  }
  .seta {
    width: 150px;
    height: 150px;
  }
  /* Ajusta fontes na seção Sobre */
  .conteudo-secao-2 h1 { font-size: 2.5rem; }
  .conteudo-secao-2 p { font-size: 1.2rem; }
}

/* Para telas de até 480px (celulares) */
@media (max-width: 480px) {
  body {
    /* Garante que não haja overflow horizontal */
    overflow-x: hidden;
  }
  #home, .coluna-esquerda {
    padding: 0 15px; /* Reduz ainda mais o espaçamento lateral */
  }
  .logo-cabeca-container {
    transform: scale(0.7);
  }
  .inove-com-poucas-linhas {
    font-size: 24px;
  }
  .bot-o {
    transform: scale(0.8);
  }
  .seta {
    width: 120px;
    height: 120px;
    bottom: 10px;
  }
  /* Esconde a imagem de fundo para focar no conteúdo e melhorar performance */
  .anubis-trecodalogo-2 {
    display: none;
  }
}

/* =================================================================== */
/* --- VERSÃO FINAL: AJUSTE PARA MONITORES LARGOS --- */
/* =================================================================== */
@media (min-width: 1441px) {
  #home {
    /* Remove a barreira e usa padding para criar as 'bordas' laterais */
    max-width: none;
    padding-left: 5vw; /* Usa 5% da largura da tela como borda esquerda */
    padding-right: 5vw; /* E 5% na direita */

    /* Faz as colunas serem proporcionais */
    grid-template-columns: 45% 1fr;
  }

  .linha-vertical-magenta, .linha-vertical-amarela {
    /* Ajusta as linhas divisórias para a nova coluna fluida */
    left: 45%;
  }

  .divisor-tela {
    /* Faz o divisor ocupar a nova largura total */
    max-width: 100%;
  }
}