/**
 * Splash Screen e Loading Elegante - George III
 */

/* ===== SPLASH SCREEN (Tela de Abertura) ===== */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease-out;
  overflow: hidden;
}

.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Logo no splash com glow animado */
.splash-logo {
  max-width: 200px;
  width: 80%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(201, 169, 89, 0.6)) 
          drop-shadow(0 0 60px rgba(201, 169, 89, 0.3));
  animation: logoGlow 2s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(201, 169, 89, 0.6)) 
            drop-shadow(0 0 60px rgba(201, 169, 89, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(201, 169, 89, 0.8)) 
            drop-shadow(0 0 80px rgba(201, 169, 89, 0.5));
  }
}

/* Texto "GRAMADO - RS" */
.splash-location {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: rgba(201, 169, 89, 0.7);
  font-weight: 300;
  text-transform: uppercase;
}

/* ===== LOADING BAR COM DIAMANTES ===== */
.loading-container {
  margin-top: 2rem;
  width: 300px;
  max-width: 80%;
}

/* Linhas decorativas com diamante */
.loading-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.loading-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 89, 0.3) 50%, 
    transparent 100%);
}

.loading-diamond {
  width: 8px;
  height: 8px;
  background: rgba(201, 169, 89, 0.8);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201, 169, 89, 0.5);
  animation: diamondPulse 1.5s ease-in-out infinite;
}

@keyframes diamondPulse {
  0%, 100% {
    opacity: 0.5;
    transform: rotate(45deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.2);
  }
}

/* Barra de progresso */
.loading-bar-track {
  width: 100%;
  height: 2px;
  background: rgba(201, 169, 89, 0.2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(201, 169, 89, 0.5) 0%,
    rgba(201, 169, 89, 1) 50%,
    rgba(201, 169, 89, 0.5) 100%);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: loadingProgress 1.8s ease-in-out forwards, 
             loadingShimmer 1.2s linear infinite;
  box-shadow: 0 0 10px rgba(201, 169, 89, 0.5);
}

@keyframes loadingProgress {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes loadingShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Texto de carregamento */
.loading-text {
  margin-top: 1rem;
  font-size: 0.7rem;
  color: rgba(231, 227, 215, 0.5);
  letter-spacing: 2px;
  text-align: center;
  font-weight: 300;
}

/* ===== ELEMENTOS DECORATIVOS NO LAYOUT ===== */

/* Divisor elegante com diamante */
.elegant-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
}

.elegant-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 89, 0.3) 50%, 
    transparent 100%);
  max-width: 200px;
}

.elegant-divider-diamond {
  width: 10px;
  height: 10px;
  background: rgba(201, 169, 89, 0.6);
  transform: rotate(45deg);
  box-shadow: 0 0 15px rgba(201, 169, 89, 0.4);
}

/* Ornamento de canto */
.corner-ornament {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
}

.corner-ornament::before,
.corner-ornament::after {
  content: '';
  position: absolute;
  background: rgba(201, 169, 89, 0.2);
}

/* Canto superior esquerdo */
.corner-ornament.top-left {
  top: 0;
  left: 0;
}

.corner-ornament.top-left::before {
  width: 40px;
  height: 1px;
  top: 20px;
  left: 0;
}

.corner-ornament.top-left::after {
  width: 1px;
  height: 40px;
  top: 0;
  left: 20px;
}

/* Diamante decorativo */
.decorative-diamond {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: rgba(201, 169, 89, 0.5);
  transform: rotate(45deg);
  margin: 0 0.5rem;
}

/* Elemento decorativo circular com cruz (crosshair) */
.decorative-crosshair {
  position: absolute;
  width: 300px;
  height: 300px;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0; /* Atrás do overlay (z-index: 1) e do conteúdo (z-index: 2) */
}

.decorative-crosshair::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1.5px solid rgba(201, 169, 89, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.decorative-crosshair::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: 
    linear-gradient(90deg, transparent 49.5%, rgba(201, 169, 89, 0.4) 49.5%, rgba(201, 169, 89, 0.4) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(201, 169, 89, 0.4) 49.5%, rgba(201, 169, 89, 0.4) 50.5%, transparent 50.5%);
}

/* Posicionamento dos crosshairs decorativos */
.crosshair-top-right {
  top: 12%;
  right: 10%;
  animation: floatSlow 12s ease-in-out infinite;
}

.crosshair-bottom-left {
  bottom: 18%;
  left: 8%;
  animation: floatSlow 15s ease-in-out infinite reverse;
}

.crosshair-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  opacity: 0.06;
  animation: rotateSlow 40s linear infinite;
}

@keyframes fadeInBtn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeInSlow {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(15px, -15px);
  }
}

@keyframes rotateSlow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ===== RESPONSIVO ===== */
@media (max-width: 640px) {
  .splash-logo {
    max-width: 160px;
  }
  
  .loading-container {
    width: 250px;
  }
  
  .splash-location {
    font-size: 0.65rem;
    letter-spacing: 3px;
  }
  
  .decorative-crosshair {
    width: 200px;
    height: 200px;
  }
  
  .crosshair-center {
    width: 300px;
    height: 300px;
  }
  
  .crosshair-top-right,
  .crosshair-bottom-left {
    display: none; /* Oculta nas laterais em mobile */
  }
}