/*
  Projeto: CSS responsável pelas cores e efeitos
  Autor: Bruno dos Santos Carvalho
  GitHub: https://github.com/bnocrv
  Contato: bnocrv@proton.me
  Criação: 06/07/2025
  Última Atualização: 16/07/2025
  Mudanças: Adicionado footer e correção no carrossel dos itens
  Licença: MIT
  Versão 1.0
*/


/* ===================== RESET GERAL ===================== */
/* Remove margens, paddings e formatações padrão dos navegadores */
* {
  margin: 0;                /* Remove margem externa padrão */
  padding: 0;               /* Remove espaçamento interno padrão */
  box-sizing: border-box;  /* Faz o padding e border não aumentarem a largura/altura total */
  list-style: none;        /* Remove marcadores de listas */
}

/* ===================== CONFIGURAÇÃO GERAL DO BODY ===================== */
body {
  background-color: black;               /* Fundo preto para contraste com o conteúdo */
  color: white;                          /* Cor do texto principal: branco */
  font-size: 16px;                       /* Tamanho padrão da fonte */
  overflow-x: hidden;                    /* Impede rolagem horizontal */
  font-family: 'Poppins', sans-serif;   /* Fonte moderna, limpa e elegante */
}

/* Impede rolagem vertical e fixa a página na altura da tela */
html, body {
  height: 100vh;        /* Altura de 100% da tela visível */
  overflow-y: hidden;   /* Remove a rolagem vertical */
}

/* ===================== CABEÇALHO ===================== */
header {
  position: fixed;                     /* Fixa o cabeçalho no topo da página */
  top: 0;
  left: 0;
  width: 100vw;                        /* Ocupa toda a largura da tela */
  height: 80px;                        /* Altura fixa para o cabeçalho */
  background-color: rgba(0, 0, 0, 0);  /* Fundo transparente */
  display: flex;                       /* Flexbox para alinhar elementos */
  justify-content: space-between;     /* Espaço entre o logo e o menu */
  align-items: center;                /* Centraliza verticalmente */
  padding: 0 40px;                     /* Espaçamento interno nas laterais */
  z-index: 10;                         /* Garante que o header fique por cima de outros elementos */
}

/* Logo da Tuti Gourmet */
header img {
  width: 180px;              /* Tamanho da logo */
  margin-top: 60px;          /* Empurra a logo para baixo (ajuste fino) */
}

/* Menu de navegação */
header nav ul {
  display: flex;             /* Exibe os links lado a lado */
  gap: 40px;                 /* Espaço entre cada item do menu */
}

/* Links do menu */
header nav ul li a {
  color: white;              /* Cor do texto: branco */
  text-decoration: none;     /* Remove sublinhado */
  font-weight: 500;          /* Peso da fonte: semi-negrito */
  font-size: 1rem;           /* Tamanho da fonte */
  transition: 0.3s;          /* Animação suave ao passar o mouse */
}

/* Efeito hover no menu */
header nav ul li a:hover {
  color: #ff5cc7;            /* Rosa claro ao passar o mouse */
}

/* ===================== CONTEÚDO PRINCIPAL ===================== */
section {
  background-image: radial-gradient(#b91495, #000000); /* Degradê radial do rosa para preto */
  height: 93.5vh;                                       /* Ocupa toda a altura da tela */
  padding-top: 80px;                                   /* Espaço para não cobrir o cabeçalho */
  position: relative;                                  /* Posição relativa para elementos filhos absolutos */
}

/* Container principal do carrossel */
section .list {
  width: 70vw;              /* Largura do container: 70% da tela */
  height: 100%;             /* Altura total da seção */
  margin: auto;             /* Centraliza horizontalmente */
  position: relative;       /* Permite posicionar os itens absolutos dentro */
}

/* Linha horizontal decorativa ao centro */
section .list::before {
  content: '';
  position: absolute;
  height: 1px;
  left: 40px;
  right: 40px;
  top: 50%;
  transform: translateY(-40px);     /* Ajuste fino para alinhar com as imagens */
  background-color: #fff;           /* Cor branca */
}

/* Cada item do carrossel */
section .list .item {
  position: absolute;              /* Sobrepõe os itens uns sobre os outros */
  inset: 0;                        /* Preenche todo o espaço do container */
  transform: translateX(100vw);    /* Começa fora da tela à direita */
  opacity: 0;                      /* Invisível inicialmente */
  transition: 0.5s;                /* Transição suave */
}

/* Imagem do item (doce) */
section .list .item .car-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);     /* Centraliza verticalmente */
  width: 60%;                      /* Ocupa 60% da largura do item */
}

section .list .item .car-img img {
  width: 100%;
  transform: rotate(-15deg);       /* Inclinação estética da imagem */
  transition: 0.5s;
}

/* Sombra decorativa abaixo da imagem */
section .list .item .car-img::before {
  content: '';
  position: absolute;
  background-color: #000;
  width: 100%;
  height: 100px;
  top: 150%;
  left: 50px;
  border-radius: 50%;
  filter: blur(50px);
}

/* Área de conteúdo à direita */
section .list .item .content {
  position: absolute;
  right: 80px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
  width: 40%;
}

/* Preço do produto */
section .list .item .content .car-information {
  font-weight: 600;
  font-size: 1rem;
  color: #fcdfff;
}

/* Título do doce */
section .list .item .content h2 {
  font-size: 4em;
  line-height: 1em;
  color: white;
  font-family: 'Pacifico', cursive;
}

/* Descrição do doce */
section .list .item .content .description {
  font-size: 14px;
  display: none;
  color: #d9d9d9;
  text-align: right;
  max-width: 350px;
}

/* Botão "Saiba Mais" */
section .list .item .content .information {
  border-radius: 30px;
  padding: 10px 20px;
  text-transform: uppercase;
  background-color: rgb(138, 34, 114);  /* Roxo escuro */
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

/* Efeito hover no botão */
section .list .item .content .information:hover {
  background-color: #ff5cc7;  /* Rosa claro */
}

/* ===================== SETAS DO CARROSSEL ===================== */
section .arrows {
  width: 70vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25px);
  display: flex;
  justify-content: space-between;
}

section .arrows button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: white;
  cursor: pointer;
  transition: 0.3s;
}

section .arrows button:hover {
  background-color: #ff5cc7;
}

section .arrows button:nth-child(1) img {
  transform: scaleX(-1);  /* Inverte a seta esquerda */
}

section .arrows button img {
  width: 28px;
  margin-top: 4px;
}

/* ===================== INDICADORES (bolinhas + número) ===================== */
section .indicators {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

section .indicators .number {
  font-size: 3em;
  font-weight: bold;
  font-family: 'Pacifico', cursive;
}

section .indicators ul {
  display: flex;
  gap: 8px;
}

section .indicators ul li {
  width: 40px;
  height: 5px;
  background-color: #8a2272;  /* Cor padrão das bolinhas */
  border-radius: 5px;
  transition: 0.5s;
}

section .indicators ul .active {
  background-color: #fff;     /* Cor branca da bolinha ativa */
}

/* ===================== TRANSIÇÕES DO ITEM ATIVO ===================== */
section .list .item.active {
  transform: translateX(0);  /* Slide visível na tela */
  opacity: 1;                /* Totalmente visível */
}

section .list .item.active .car-img img {
  transform: rotate(-20deg); /* Inclinação mais acentuada para destaque */
}

section .list .item.active .content .car-information,
section .list .item.active .content h2,
section .list .item.active .content .description,
section .list .item.active .content .information {
  transform: translateX(0);
  opacity: 1;
}

/* Estado padrão (antes de aparecer) com animação */
section .list .item .content .car-information,
section .list .item .content h2,
section .list .item .content .description,
section .list .item .content .information {
  transform: translateX(200px);  /* Inicia vindo da direita */
  opacity: 0;
  transition: 0.7s;
}

section .list .item .content h2 {
  transition-delay: 0.2s;  /* Aparece depois do preço */
}

section .list .item .content .description {
  transition-delay: 0.4s;
}

section .list .item .content .information {
  transition-delay: 0.6s;
}

/* ===================== MODAL PERSONALIZADO ===================== */

/* Tela escura por trás do modal */
.modal {
  display: none;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

/* Caixa branca com conteúdo */
.modal-content {
  background-color: white;
  color: black;
  padding: 30px;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  font-size: 1rem;
  position: relative;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Botão "X" de fechar */
.modal-content .close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

/* Título do modal */
.modal-content h3 {
  margin-bottom: 15px;
  font-size: 2em;
  font-family: 'Pacifico', cursive;
  color: #8a2272;
}

/* Texto do modal */
.modal-content p {
  line-height: 1.5em;
}

/* ===================== FOOTER ===================== */
.footer {
  text-align: center;           /* Centraliza o texto horizontalmente */
  padding: 10px;                /* Espaçamento interno de 10 pixels em todos os lados */
  background-color: #000000;    /* Fundo preto */
  border-top: 1px solid #ffffff; /* Linha fina branca na parte superior do footer */
}

.footer-main {
  color: #ff69b4;               /* Cor do texto em rosa (pink) */
  font-size: 1em;               /* Tamanho da fonte padrão */
  margin: 2px -5;                /* Margem vertical de 5 pixels (acima e abaixo) */
}

.footer-dev {
  color: #ffffff;               /* Cor do texto em branco */
  font-size: 0.8em;             /* Fonte menor que o padrão para informações secundárias */
  margin: 1px 0;                /* Margem vertical de 5 pixels (acima e abaixo) */
}

.footer-dev a {
  color: inherit;          /* Herdar a cor do texto pai */
  text-decoration: none;   /* Remove o sublinhado */
  cursor: pointer;         /* Cursor de link para indicar que é clicável */
}

/* Efeito hover suave */
.footer-dev a:hover {
  color: #ff69b4;          /* Deixa mudar para rosa no hover */
  text-decoration: underline; /* Ou sublinhado só no hover */
}