@import url("base.css");

:root {
  --font-display: "Fraunces", Georgia, serif;
  --bg: #1a1210;
  --text: #faf6f2;
  --text-muted: #c4b5a8;
  --accent: #e07a4f;
  --accent-2: #f4a574;
  --glow: radial-gradient(circle, rgba(224, 122, 79, 0.4) 0%, transparent 70%);
  --grid-line: rgba(255, 255, 255, 0.03);
  --badge-bg: rgba(224, 122, 79, 0.15);
  --badge-text: #f4a574;
  --badge-border: rgba(224, 122, 79, 0.3);
  --progress-track: rgba(255, 255, 255, 0.1);
  --progress: 65%;
}

.bg-gradient {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(224, 122, 79, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(180, 100, 140, 0.15) 0%, transparent 50%),
    var(--bg);
  z-index: 0;
}

.bg-grid, .bg-glow, .bg-icons { display: none; }

/* Unity ring — abstract “hands together” */
.hands-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(90vmin, 420px);
  height: min(90vmin, 420px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
}

.hands-ring span {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: ring-pulse 6s ease-in-out infinite;
}

.hands-ring span:nth-child(1) { transform: rotate(0deg) scale(1); animation-delay: 0s; }
.hands-ring span:nth-child(2) { transform: rotate(60deg) scale(0.92); animation-delay: -1s; border-color: #c97b5a; }
.hands-ring span:nth-child(3) { transform: rotate(120deg) scale(0.84); animation-delay: -2s; border-color: #a86b4a; }
.hands-ring span:nth-child(4) { transform: rotate(180deg) scale(0.76); animation-delay: -3s; }
.hands-ring span:nth-child(5) { transform: rotate(240deg) scale(0.68); animation-delay: -4s; border-color: #d4956a; }
.hands-ring span:nth-child(6) { transform: rotate(300deg) scale(0.6); animation-delay: -5s; }

@keyframes ring-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.logo-circle {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  color: var(--accent);
  animation: fade-up 0.8s var(--ease-out) both;
}

.domain {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.6;
}