/* ==========================================
   NEON UNIVERSE CUSTOM CYBER STYLES
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --neon-purple: #a855f7;
  --neon-pink: #ec4899;
  --neon-blue: #06b6d4;
  --bg-dark: #03000a;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-dark);
  color: #ffffff;
}

/* ==========================================
   1. PREMIUM GLASSMORPHISM
   ========================================== */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow: 0 12px 40px 0 rgba(168, 85, 247, 0.15);
  transform: translateY(-2px);
}

/* ==========================================
   2. AMBIENT GLOWING BACKGROUND
   ========================================== */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, rgba(13, 5, 28, 0.8) 0%, var(--bg-dark) 100%);
  z-index: -2;
}

.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  opacity: 0.25;
  pointer-events: none;
}

.orb-1 {
  top: 10%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: var(--neon-purple);
  animation: floatOrb 20s infinite alternate ease-in-out;
}

.orb-2 {
  bottom: 10%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: var(--neon-blue);
  animation: floatOrb 25s infinite alternate-reverse ease-in-out;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -30px) scale(1.1); }
  100% { transform: translate(-30px, 50px) scale(0.9); }
}

/* ==========================================
   3. ANIMATED NEON TEXT GLOW
   ========================================== */
.animate-glow {
  animation: textGlow 4s infinite alternate ease-in-out;
}

@keyframes textGlow {
  0% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.2), 0 0 20px rgba(168, 85, 247, 0.1); }
  100% { text-shadow: 0 0 20px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.2); }
}

/* ==========================================
   4. BUTTON STYLES & GLOWS
   ========================================== */
.btn-primary {
  background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-pink) 100%);
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  box-shadow: 0 6px 25px rgba(236, 72, 153, 0.5);
  transform: scale(1.03);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

/* ==========================================
   5. DYNAMIC ISLAND NOTCH (24/7 SPINNING BORDER)
   ========================================== */
.island-glow-border {
  position: relative;
  overflow: hidden;
  border: none !important;
}

/* Rotating conic-gradient border */
.island-glow-border::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 30%,
    var(--neon-purple) 45%,
    var(--neon-pink) 60%,
    var(--neon-blue) 75%,
    transparent 100%
  );
  animation: spinBorder 6s linear infinite;
  z-index: 1;
}

/* Inner card background masking */
.island-glow-border::after {
  content: '';
  position: absolute;
  inset: 1.5px; /* Border thickness */
  background: rgba(3, 0, 10, 0.85); /* Dark transparent background */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: inherit;
  z-index: 2;
}

@keyframes spinBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.nav-btn {
  transition: all 0.3s ease;
}

.nav-btn:hover i {
  transform: scale(1.2);
}

/* ==========================================
   6. PREMIUM CUSTOM INPUT FIELDS
   ========================================== */
.input-field {
  transition: all 0.3s ease;
}

.input-field:focus {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}

/* ==========================================
   7. CUSTOM COOL SCROLLBAR
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-purple);
}