/* Reset de estilos globais */
* {
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

/* Fonte Adelphi do Adobe Fonts */
@import url('https://use.typekit.net/kph1gyw.css');

:root {
  /* NOVA IDENTIDADE VISUAL */
  --idle-primary: #5BA1FF;      /* Azul suave para idle */
  --idle-secondary: #72F0EC;    /* Ciano para variação */

  --connecting-primary: #5200FF;   /* Roxo vibrante */
  --connecting-secondary: #FF900F; /* Laranja para contraste */

  --speaking-primary: #82ED83;     /* Folha de (Re)começos - verde suave */
  --speaking-secondary: #FFBAD3;   /* Doce Afinidade - rosa suave */

  --listening-primary: #5BA1FF;    /* Horizonte de Ideias - azul suave */
  --listening-secondary: #72F0EC;  /* Raio de Aconchego - ciano suave */

  --accent-yellow: #FFD038;        /* Amarelo para destaques */
  --bg-void: #0A0A16;             /* Fundo escuro mantido */
}

/* Aplicar fonte Adelphi em todo o projeto */
body {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, var(--bg-void) 70%);
  font-family: 'adelphi-pe-variable', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variation-settings: "slnt" 0, "opsz" 6, "wght" 100;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;

  /* Otimizações de performance para GPU */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Garantir que todos os textos usem Adelphi */
.text-overlay,
.text-idle,
.text-active,
button,
.orb-container {
  font-family: 'adelphi-pe-variable', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

/* Orb Principal - Estado IDLE */
.main-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, var(--idle-primary) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--idle-secondary) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(91, 161, 255, 0.3) 0%, transparent 70%);
  filter: blur(1px);
  animation: gentleBreath 6s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  cursor: pointer;

  /* Aceleração de hardware */
  will-change: transform, background, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Core interno - Estado IDLE */
.inner-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(91, 161, 255, 0.6) 0%, transparent 70%);
  filter: blur(0.5px);
  animation: coreGlow 4s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;

  /* Aceleração de hardware */
  will-change: transform, background, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Ondas de Áudio */
.audio-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.wave-inner {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-color: rgba(255, 255, 255, 0.4);
}

.wave-mid {
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-color: rgba(114, 240, 236, 0.3); /* Ciano suave */
}

.wave-outer {
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-color: rgba(82, 0, 255, 0.2); /* Roxo vibrante */
}

/* Sistema de Texto com Transições Otimizadas */
.text-overlay {
  position: absolute;
  left: 50%;
  color: white;
  text-align: center;
  z-index: 20;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;

  /* Aceleração de hardware */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Tipografia refinada por estado */
.text-idle {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: lowercase;
  text-shadow: 
    0 0 30px rgba(91, 161, 255, 0.9),
    0 0 60px rgba(91, 161, 255, 0.6),
    0 2px 20px rgba(0, 0, 0, 0.8);
  background: rgba(91, 161, 255, 0.08);
  backdrop-filter: blur(20px);
  padding: 8px 24px;
  border-radius: 30px;
  border: 1px solid rgba(91, 161, 255, 0.2);
  box-shadow: 
    0 0 40px rgba(91, 161, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* CENTRALIZAÇÃO PERFEITA do logo na ORB */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: fit-content;
  white-space: nowrap;
}

/* Logo Portaria - SIMPLES E VISÍVEL */
.text-idle .logo {
  height: 2em;
  width: auto;
  max-width: 8em;
  object-fit: contain;
  margin: 0;
  display: inline-block !important;
  vertical-align: middle;
  opacity: 1 !important;
  z-index: 999;
  position: relative;
  
  /* Sem filtros complexos - logo já é branco */
  filter: none;
}

/* Fallback: Se SVG falhar, mostra texto */
.text-idle .logo-text {
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-shadow: 
    0 0 30px rgba(91, 161, 255, 1),
    0 0 60px rgba(91, 161, 255, 0.8);
  letter-spacing: 1px;
}

/* Texto de estado abaixo da ORB */
.idle-subtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(200px); /* 200px abaixo do centro da ORB */

  font-family: 'adelphi-pe-variable', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 15px rgba(91, 161, 255, 0.4);

  opacity: 0.9;
  animation: subtlePulse 3s ease-in-out infinite;
  z-index: 10;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* Animação suave para o texto embaixo */
@keyframes subtlePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

.text-active {
  font-weight: 200;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: lowercase;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
  opacity: 0.75;
}

.text-over-orb {
  top: 50%;
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}

.text-under-orb {
  bottom: 60px;
  opacity: 1;
  transform: translateX(-50%);
}

/* Efeitos de desintegração/integração */
.text-dissolving-into-orb {
  top: 50%;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) scale(0.2);
  filter: blur(20px);
  text-shadow: 0 0 50px rgba(0, 212, 255, 1);
}

.text-emerging-from-orb {
  top: 50%;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) scale(2);
  filter: blur(25px);
  text-shadow: 0 0 60px rgba(255, 255, 255, 1);
}

.text-fading-away {
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
  filter: blur(8px);
}

/* Efeito poeira digital */
.text-dust {
  animation: digitalDust 4s ease-in-out infinite;
}

/* Estados da Orb - NOVA IDENTIDADE VISUAL */

/* CONNECTING - Roxo vibrante + Laranja */
.state-connecting .main-orb {
  background: 
    radial-gradient(circle at 30% 30%, var(--connecting-primary) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--connecting-secondary) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(82, 0, 255, 0.4) 0%, transparent 70%);
  animation: connectingPulse 1.5s ease-in-out infinite;
}

.state-connecting .inner-core {
  background: 
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(82, 0, 255, 0.8) 0%, transparent 70%);
  animation: coreConnecting 1.2s ease-in-out infinite;
}

/* SPEAKING - Verde suave + Rosa suave (HARMONIOSO!) */
.state-speaking .main-orb {
  background: 
    radial-gradient(circle at 30% 30%, var(--speaking-primary) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--speaking-secondary) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(130, 237, 131, 0.3) 0%, transparent 70%);
  filter: blur(1px) saturate(1.1);
}

.state-speaking .inner-core {
  background: 
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 186, 211, 0.7) 0%, transparent 70%);
  animation: coreSpeaking 0.8s ease-in-out infinite;
}

/* LISTENING - Ciano suave + Azul */
.state-listening .main-orb {
  background: 
    radial-gradient(circle at 30% 30%, var(--listening-primary) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--listening-secondary) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(114, 240, 236, 0.3) 0%, transparent 70%);
  filter: blur(1px) brightness(1.2);
}

.state-listening .inner-core {
  background: 
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(114, 240, 236, 0.7) 0%, transparent 70%);
  animation: coreListening 2s ease-in-out infinite;
}

/* Ativação de ondas de volume */
.volume-active .wave-inner {
  animation: audioWave 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.volume-active .wave-mid {
  animation: audioWave 1s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.2s;
}

.volume-active .wave-outer {
  animation: audioWave 1s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.4s;
}

/* Animações Otimizadas para Performance */
@keyframes gentleBreath {
  0%, 100% { 
    transform: translateZ(0) scale(1);
    opacity: 0.9;
  }
  50% { 
    transform: translateZ(0) scale(1.02);
    opacity: 1;
  }
}

@keyframes coreGlow {
  0%, 100% { 
    transform: translateZ(0) scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: translateZ(0) scale(1.05);
    opacity: 1;
  }
}

@keyframes connectingPulse {
  0%, 100% { 
    transform: translateZ(0) scale(1);
    filter: blur(1px) brightness(1);
  }
  50% { 
    transform: translateZ(0) scale(1.05);
    filter: blur(1.5px) brightness(1.2);
  }
}

@keyframes coreConnecting {
  0%, 100% { 
    opacity: 0.8;
    transform: translateZ(0) scale(1);
  }
  50% { 
    opacity: 1;
    transform: translateZ(0) scale(1.08);
  }
}

@keyframes coreListening {
  0%, 100% { 
    transform: translateZ(0) scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: translateZ(0) scale(1.06);
    filter: brightness(1.3);
  }
}

@keyframes coreSpeaking {
  0%, 100% { 
    transform: translateZ(0) scale(1);
    filter: brightness(1);
  }
  25% { 
    transform: translateZ(0) scale(1.08);
    filter: brightness(1.4);
  }
  50% { 
    transform: translateZ(0) scale(1.04);
    filter: brightness(1.2);
  }
  75% { 
    transform: translateZ(0) scale(1.1);
    filter: brightness(1.5);
  }
}

@keyframes audioWave {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
    border-width: 1px;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.4;
    border-width: 2px;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes digitalDust {
  0%, 100% { 
    opacity: 0.75;
    filter: blur(0px);
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
  }
  20% { 
    opacity: 0.3;
    filter: blur(2px);
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
  }
  40% { 
    opacity: 0.6;
    filter: blur(0.5px);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  }
  60% { 
    opacity: 0.4;
    filter: blur(1.5px);
    text-shadow: 0 0 35px rgba(255, 255, 255, 0.9);
  }
  80% { 
    opacity: 0.7;
    filter: blur(0px);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
}

/* ================================ */
/* NUMPAD STYLES - Sistema de Autenticação Morador */
/* ================================ */

/* Animações para o Numpad */
@keyframes fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.02); 
    opacity: 0.95; 
  }
}

/* Overlay do Numpad */
.numpad-overlay {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Container do Numpad */
.numpad-container {
  font-family: 'adelphi-pe-variable', 'Inter', sans-serif;
  position: relative;
  user-select: none;
}

/* Hover states para botões do numpad */
.numpad-container button:hover {
  background-color: #444 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.numpad-container button:active {
  background-color: #222 !important;
  transform: scale(0.95) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: all 0.1s ease;
}

/* Estados especiais dos botões */
.numpad-container button[style*="dc2626"]:hover {
  background-color: #b91c1c !important;
}

.numpad-container button[style*="16a34a"]:hover {
  background-color: #15803d !important;
}

/* Efeitos de foco e acessibilidade */
.numpad-container button:focus {
  outline: 2px solid #5BA1FF;
  outline-offset: 2px;
}

/* Animações de status */
.numpad-container[style*="authenticating"] {
  animation: pulse 2s infinite;
}

.numpad-container[style*="authorized"] {
  border-color: #16a34a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(22, 163, 74, 0.5) !important;
}

.numpad-container[style*="denied"] {
  border-color: #dc2626 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(220, 38, 38, 0.5) !important;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Estados dinâmicos do Numpad Container */
.numpad-container.numpad-idle {
  border: 2px solid #333;
  animation: slideUp 0.3s ease-out;
}

.numpad-container.numpad-authenticating {
  border: 2px solid #2563eb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(37, 99, 235, 0.3);
  animation: pulse 2s infinite;
}

.numpad-container.numpad-authorized {
  border: 2px solid #16a34a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(22, 163, 74, 0.3);
}

.numpad-container.numpad-denied {
  border: 2px solid #dc2626;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(220, 38, 38, 0.3);
  animation: shake 0.5s ease-in-out;
}

/* Estados do título */
.numpad-title-idle {
  color: #fff;
}

.numpad-title-authenticating {
  color: #3b82f6;
}

.numpad-title-authorized {
  color: #22c55e;
}

.numpad-title-denied {
  color: #ef4444;
}

/* Estados do display de senha */
.numpad-display-idle {
  border: 1px solid #333;
  font-family: monospace;
  font-size: 16px;
  letter-spacing: 4px;
  color: #fff;
}

.numpad-display-authenticating {
  border: 1px solid #2563eb;
  font-family: inherit;
  font-size: 16px;
  color: #3b82f6;
  letter-spacing: 0px;
}

.numpad-display-authorized {
  border: 1px solid #16a34a;
  font-family: inherit;
  font-size: 14px;
  color: #22c55e;
  letter-spacing: 0px;
}

.numpad-display-denied {
  border: 1px solid #dc2626;
  font-family: inherit;
  font-size: 16px;
  color: #ef4444;
  letter-spacing: 0px;
}

/* Botões do Numpad */
.numpad-digit-btn:hover {
  background-color: #444 !important;
  transform: scale(1.05) !important;
}

.numpad-digit-btn:active {
  background-color: #222 !important;
  transform: scale(0.95) !important;
}

.numpad-clear-btn:hover {
  background-color: #b91c1c !important;
}

.numpad-clear-btn:active {
  background-color: #991b1b !important;
  transform: scale(0.95) !important;
}

.numpad-enter-enabled {
  background-color: #16a34a !important;
  border: 1px solid #16a34a !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.numpad-enter-enabled:hover {
  background-color: #15803d !important;
}

.numpad-enter-enabled:active {
  background-color: #166534 !important;
  transform: scale(0.95) !important;
}

.numpad-enter-disabled {
  background-color: #555 !important;
  border: 1px solid #555 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Responsividade do Numpad */
@media (max-width: 320px) {
  .numpad-container {
    max-width: 260px !important;
    padding: 16px !important;
  }
  
  .numpad-container button {
    height: 44px !important;
    font-size: 16px !important;
  }
}

/* Admin Dashboard Button */
.admin-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(91, 161, 255, 0.1);
  border: 1px solid rgba(91, 161, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.admin-btn:hover {
  background: rgba(91, 161, 255, 0.2);
  border-color: rgba(91, 161, 255, 0.5);
  color: white;
}