@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS Variables */
:root {
  --background: #ffffff;
  --foreground: #252525;
  --primary: #373737;
  --border: #eaeaea;
}

.dark {
  --background: #252525;
  --foreground: #ffffff;
  --primary: #fafafa;
  --border: #454545;
}

/* Optional Global Styling */
body {
  background-color: #ffffff;
  background-color: var(--background);
  color: #252525;
  color: var(--foreground);
}
body{background:#f3f4f6;font-family:Arial,Helvetica,sans-serif;margin:0;padding:20px}
input,textarea{width:100%;padding:8px;margin:6px 0;border:1px solid #ddd;border-radius:4px}
button{padding:8px 12px;border-radius:4px;border:0;background:#2563eb;color:#fff;cursor:pointer}
button[disabled]{opacity:.6}
/* ===== LOADER CONTAINER ===== */
.universe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center; /* ✅ Vertical + Horizontal center */
  background: radial-gradient(ellipse at center, #0b0e1a, #03050b);
  overflow: hidden;
  z-index: 9999;
  transition: opacity 0.8s, visibility 0.8s;
  will-change: opacity;
}
.universe.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== STARS (Absolute – no layout impact) ===== */
.stars, .stars-2, .stars-3 {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  animation: twinkle 4s ease-in-out infinite alternate;
  will-change: opacity;
}
.stars-2 { width: 2px; animation-duration: 6s; animation-delay: 1s; }
.stars-3 { width: 3px; animation-duration: 8s; animation-delay: 2s; }

/* Star positions – same as before */
.stars { box-shadow: /* ... same ... */ }
.stars-2 { box-shadow: /* ... same ... */ }
.stars-3 { box-shadow: /* ... same ... */ }

@keyframes twinkle { 0% { opacity: .2; } 100% { opacity: 1; } }

/* ===== LOGO (centered) ===== */
.loader-logo {
  width: max(80px, min(15vmin, 180px));
  height: max(80px, min(15vmin, 180px));
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 40px rgba(255,255,255,.15);
  margin-bottom: 12px; /* ✅ Space between logo and orbit */
  animation: pulse 2s ease-in-out infinite;
  will-change: transform, box-shadow;
  z-index: 10;
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 40px rgba(255,255,255,.15); }
  50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(255,255,255,.25); }
  100% { transform: scale(1); box-shadow: 0 0 40px rgba(255,255,255,.15); }
}

/* ===== ORBIT (centered) ===== */
.orbit {
  position: relative;
  width: max(150px, min(30vmin, 350px));
  height: max(150px, min(30vmin, 350px));
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  animation: spin 12s linear infinite;
  will-change: transform;
}
.planet {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: max(60px, min(12vmin, 130px));
  height: max(60px, min(12vmin, 130px));
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 30px rgba(255,255,255,.2);
  animation: planetFloat 2s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes planetFloat {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(-12px) scale(1.02); }
}