/* =============================================
   CALCULADORA — style.css
   Gustavo Alves · Portfólio Front-end

   ÍNDICE:
   1. Variáveis CSS e Reset
   2. Layout Base
   3. Header
   4. Título da Página
   5. Container da Calculadora
   6. Display
   7. Histórico
   8. Teclado e Botões
   9. Footer
   10. Animações
   11. Responsivo
============================================= */


/* ══════════════════════════════════════
   1. VARIÁVEIS CSS E RESET

   Variáveis CSS (Custom Properties) são
   declaradas em :root (= elemento html).
   Sintaxe: --nome-da-variavel: valor;
   Uso:     color: var(--accent);

   Vantagem: mudar uma variável aqui
   atualiza em TODO o CSS de uma vez.
   Isso é o que mantém a identidade
   visual igual ao portfólio.
══════════════════════════════════════ */

/* Seletor universal: aplica em TODOS os elementos.
   box-sizing: border-box faz com que padding e border
   sejam incluídos na largura/altura, não adicionados.
   Evita cálculos manuais de espaçamento. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;   /* remove margem padrão do navegador */
  padding: 0;  /* remove padding padrão do navegador */
}

/* :root = o elemento raiz do documento (html).
   É onde declaramos as variáveis globais. */
:root {
  /* Backgrounds — do mais escuro para o mais claro */
  --bg:      #0a0a0a;  /* fundo geral da página */
  --bg2:     #111111;  /* fundo do display */
  --bg3:     #1a1a1a;  /* fundo dos botões */
  --card:    #141414;  /* fundo da calculadora */

  /* Cores de destaque (mesmas do portfólio) */
  --accent:  #c8ff00;  /* verde-limão: cor primária, resultado */
  --accent2: #ff4d6d;  /* rosa-vermelho: botões de operador */
  --accent3: #00d4ff;  /* azul-ciano: botão igual */

  /* Textos */
  --text:    #f0f0f0;  /* texto principal (quase branco) */
  --muted:   #666;     /* texto secundário (cinza médio) */

  /* Borda sutil entre elementos */
  --border:  #222;
}

/* scroll-behavior: smooth faz links âncora
   scrollarem suavemente em vez de pular */
html { scroll-behavior: smooth; }

/* body: configurações globais de aparência */
body {
  background: var(--bg);         /* fundo escuro */
  color: var(--text);            /* cor de texto padrão */
  font-family: 'Syne', sans-serif; /* fonte principal */
  min-height: 100vh;             /* ocupa pelo menos 100% da altura da tela */
  display: flex;                 /* flexbox para empilhar header/main/footer */
  flex-direction: column;        /* empilha verticalmente */
  overflow-x: hidden;            /* esconde scroll horizontal */
  cursor: none;                  /* esconde o cursor nativo — usamos o customizado */
}

/* ── CURSOR CUSTOMIZADO (mesmo do portfólio) ── */
#cursor {
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
  mix-blend-mode: difference;
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  opacity: 0.5;
}


/* ══════════════════════════════════════
   2. LAYOUT BASE

   flex: 1 no .main faz ele crescer e
   ocupar todo o espaço disponível entre
   o header e o footer (efeito "sticky footer").
══════════════════════════════════════ */

.main {
  flex: 1;               /* cresce para preencher o espaço disponível */
  display: flex;         /* flexbox interno para centralizar o conteúdo */
  flex-direction: column;
  align-items: center;   /* centraliza horizontalmente */
  justify-content: center; /* centraliza verticalmente */
  gap: 32px;             /* espaço entre título e calculadora */
  padding: 48px 24px;    /* respiro nas bordas */
}


/* ══════════════════════════════════════
   3. HEADER

   position: sticky mantém o header
   visível mesmo ao rolar a página.
   backdrop-filter: blur cria o efeito
   de vidro fosco (glassmorphism).
══════════════════════════════════════ */

.header {
  position: sticky;   /* gruda no topo ao rolar */
  top: 0;             /* posição de grude: borda superior */
  z-index: 100;       /* fica acima de outros elementos (número maior = mais na frente) */
  background: rgba(10, 10, 10, 0.9); /* rgba: cor com transparência (0=transparente, 1=opaco) */
  backdrop-filter: blur(12px);       /* desfoca o fundo atrás do header */
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center; /* alinha itens verticalmente ao centro */
  gap: 16px;
}

/* Logo: fonte Bebas Neue, cor de destaque */
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 2px;  /* espaçamento entre letras */
  color: var(--accent);
  text-decoration: none; /* remove sublinhado do link */
  margin-right: auto;    /* empurra os próximos itens para a direita */
}

/* Badge: nome do projeto em fonte mono */
.project-badge {
  font-family: 'DM Mono', monospace; /* monospace: cada letra tem mesma largura */
  font-size: 0.65rem;
  letter-spacing: 0.12em; /* em = relativo ao tamanho da fonte atual */
  color: var(--muted);
  text-transform: uppercase; /* força maiúsculas via CSS */
}

/* Botão de voltar */
.back-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 6px 14px;
  /* transition: anima mudanças de propriedade.
     Sintaxe: propriedade duração função-de-easing */
  transition: color 0.2s, border-color 0.2s;
}
/* :hover = quando o mouse está em cima */
.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}


/* ══════════════════════════════════════
   4. TÍTULO DA PÁGINA
══════════════════════════════════════ */

.page-title {
  text-align: center;
}

.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.title {
  font-family: 'Bebas Neue', sans-serif;
  /* clamp(min, preferido, max): tamanho responsivo.
     Mínimo 3rem, idealmente 8vw (8% da largura da tela), máximo 6rem. */
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;   /* altura de linha = 100% do tamanho da fonte */
  color: var(--text);
}


/* ══════════════════════════════════════
   5. CONTAINER DA CALCULADORA

   max-width: limita a largura máxima.
   width: 100% garante que em telas
   menores que 380px, ocupa a tela toda.
══════════════════════════════════════ */

.calculator {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden; /* esconde qualquer conteúdo que vaze para fora */
  /* box-shadow: sombra.
     Sintaxe: offset-x offset-y blur spread cor */
  box-shadow: 0 0 0 1px var(--border), 0 24px 64px rgba(0,0,0,0.6);
  /* animation: nome duração easing modo-de-preenchimento */
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ══════════════════════════════════════
   6. DISPLAY
══════════════════════════════════════ */

.display {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 16px;
  text-align: right;  /* números alinhados à direita (padrão calculadora) */
  min-height: 100px;  /* altura mínima para não colapsar quando vazio */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* empurra o conteúdo para baixo */
  gap: 4px;
}

/* Expressão anterior (ex: "10 +") em cinza pequeno */
.display-expression {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  min-height: 18px;   /* reserva espaço mesmo quando vazio */
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}

/* Número principal: grande e em destaque */
.display-value {
  font-family: 'DM Mono', monospace;
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 300;   /* peso leve (300 = light) */
  color: var(--text);
  letter-spacing: -0.02em; /* kerning negativo para números grandes */
  line-height: 1;
  transition: transform 0.1s, color 0.2s;
  /* Previne overflow quando o número é muito longo */
  overflow: hidden;
  text-overflow: ellipsis; /* mostra "..." quando o texto não cabe */
  white-space: nowrap;     /* impede quebra de linha */
}

/* Classe adicionada pelo JS ao mostrar resultado: muda cor */
.display-value.result {
  color: var(--accent);
}

/* Classe adicionada pelo JS em caso de erro (ex: divisão por zero) */
.display-value.error {
  color: var(--accent2);
  animation: shake 0.3s ease; /* tremida visual para indicar erro */
}


/* ══════════════════════════════════════
   7. HISTÓRICO
══════════════════════════════════════ */

.history-wrap {
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  max-height: 90px; /* limita altura para não crescer demais */
  overflow-y: auto; /* scroll vertical se tiver mais que 90px de conteúdo */
}

.history-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* list-style: none remove os marcadores (•) padrão das listas */
.history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-item {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-align: right;
  animation: fadeIn 0.3s ease forwards; /* aparece deslizando */
}

/* O resultado dentro do item de histórico fica em verde */
.history-item span {
  color: var(--accent);
  margin-left: 4px;
}

/* Personaliza a barra de scroll do histórico */
.history-wrap::-webkit-scrollbar { width: 3px; }
.history-wrap::-webkit-scrollbar-track { background: transparent; }
.history-wrap::-webkit-scrollbar-thumb { background: var(--border); }


/* ══════════════════════════════════════
   8. TECLADO E BOTÕES

   CSS Grid cria a grade de botões.
   grid-template-columns: repeat(4, 1fr)
   = 4 colunas de tamanho igual (1fr cada).
   "fr" = fração do espaço disponível.

   gap: 1px + background: var(--border)
   cria as linhas divisórias entre botões
   sem usar border em cada botão.
══════════════════════════════════════ */

.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas iguais */
  gap: 1px;              /* espaço de 1px entre células */
  background: var(--border); /* fundo da grade = cor da borda (cria linhas divisórias) */
}

/* ── BOTÃO BASE ── */
.btn {
  background: var(--bg3);
  color: var(--text);
  border: none;     /* remove borda padrão dos botões */
  padding: 22px 0;  /* altura do botão via padding vertical */
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;  /* muda o cursor para mãozinha ao passar por cima */
  transition: background 0.15s, color 0.15s, transform 0.1s;
  outline: none;    /* remove o contorno de foco padrão do browser */
  position: relative; /* necessário para o ::after (ripple) se posicionar */
  overflow: hidden;   /* esconde o ripple que vai além das bordas */
}

.btn:hover {
  background: #222;
  color: var(--accent);
}

/* :active = quando o botão está sendo clicado (mouse pressionado) */
.btn:active {
  transform: scale(0.94); /* encolhe levemente ao clicar */
  background: var(--accent);
  color: #000;
}

/* ::after = pseudo-elemento: conteúdo extra inserido depois do botão via CSS.
   Usado aqui para o efeito ripple (onda ao clicar). */
.btn::after {
  content: '';       /* obrigatório: sem isso o pseudo-elemento não aparece */
  position: absolute;
  inset: 0;          /* equivale a top:0; right:0; bottom:0; left:0 */
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
  border-radius: 50%; /* forma circular */
}
/* Classe adicionada pelo JS ao clicar: ativa a animação */
.btn.ripple::after {
  opacity: 0.15;
  transform: scale(2); /* expande para cobrir o botão */
}

/* ── BOTÕES DE FUNÇÃO (AC, +/−, %) ── */
.btn--func {
  color: var(--muted); /* cor mais discreta para não confundir com números */
  font-size: 0.95rem;
}
.btn--func:hover { color: var(--accent); }

/* ── BOTÕES DE OPERADOR (÷, ×, −, +) ── */
.btn--op {
  background: var(--bg2);
  color: var(--accent2); /* cor diferente para se destacar dos números */
  font-size: 1.3rem;
}
.btn--op:hover {
  background: var(--accent2);
  color: #fff;
}
/* Classe adicionada pelo JS quando o operador está selecionado */
.btn--op.active {
  background: var(--accent2);
  color: #fff;
}

/* ── BOTÃO ZERO ──
   grid-column: span 2 faz o botão ocupar
   2 colunas da grade em vez de 1. */
.btn--zero {
  grid-column: span 2;
  text-align: left;
  padding-left: 28px; /* move o "0" para a esquerda como nas calculadoras reais */
}

/* ── BOTÃO IGUAL ── */
.btn--eq {
  background: var(--accent3); /* azul-ciano: cor única para se destacar */
  color: #000;
  font-size: 1.3rem;
}
.btn--eq:hover {
  background: #fff;
  color: #000;
}
.btn--eq:active {
  background: var(--accent);
  color: #000;
}


/* ══════════════════════════════════════
   9. FOOTER
══════════════════════════════════════ */

.footer {
  border-top: 1px solid var(--border);
  padding: 20px 32px;
  display: flex;
  justify-content: space-between; /* um item em cada extremidade */
  align-items: center;
}
.footer p {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.footer span { color: var(--accent); }

/* Texto de dica de teclado */
.keyboard-hint {
  padding: 10px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-align: center;
  border-top: 1px solid var(--border);
}


/* ══════════════════════════════════════
   10. ANIMAÇÕES

   @keyframes define os quadros de uma
   animação CSS. "from" e "to" são iguais
   a "0%" e "100%". Você pode usar
   porcentagens para controle fino.
══════════════════════════════════════ */

/* Calculadora surge de baixo ao carregar */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(32px); /* começa 32px abaixo */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* termina na posição normal */
  }
}

/* Items do histórico aparecem deslizando da direita */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(8px); /* começa 8px à direita */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tremida para erros */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}


/* ══════════════════════════════════════
   11. RESPONSIVO

   @media queries aplicam estilos apenas
   quando a condição é verdadeira.
   max-width: 480px = telas menores que 480px
   (celulares menores).
══════════════════════════════════════ */

@media (max-width: 480px) {
  .header { padding: 12px 20px; }
  /* display: none esconde o elemento completamente */
  .project-badge { display: none; }
  .main { padding: 32px 16px; }
  .btn { padding: 20px 0; font-size: 1rem; }
  .display-value { font-size: 2rem; }
  /* Empilha o footer verticalmente em mobile */
  .footer { flex-direction: column; gap: 6px; text-align: center; }
}