* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000;
  color: #fff;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 2rem;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid #333;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.message {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: #aaa;
  letter-spacing: 0.05em;
}

.dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

.reason {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  animation: fadein 0.6s ease;
}

.reason.visible { display: flex; }

.reason-label {
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  color: #555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.reason-value {
  font-size: clamp(1.5rem, 5vw, 3rem);
  color: #fff;
  letter-spacing: 0.05em;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}