/* Future.css - Futuristic theme */
:root {
  --neo-purple: #a78bfa;
  --neo-blue: #60a5fa;
  --neo-cyan: #22d3ee;
  --neo-pink: #f472b6;
  --neo-dark: rgba(15, 12, 41, 1);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
}

/* Animated grid background overlay */
.future-grid {
  position: relative;
  isolation: isolate;
}
.future-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 600px at 80% -20%, rgba(167,139,250,0.15), transparent 60%),
    radial-gradient(800px 500px at 20% 120%, rgba(34,211,238,0.12), transparent 60%),
    linear-gradient(transparent 0 0),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px);
  background-blend-mode: screen, screen, normal, overlay, overlay;
  animation: pan 24s linear infinite;
  z-index: -2;
}
@keyframes pan {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-120px,-120px,0); }
}

/* Glassmorphism card */
.card-glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: 16px;
}

/* Neon glow border */
.neon-border { position: relative; }
.neon-border::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, var(--neo-purple), var(--neo-blue), var(--neo-cyan));
  filter: blur(14px); opacity: 0.45; z-index: -1;
}

/* Buttons */
.btn-neo {
  background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(34,211,238,0.25));
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.btn-neo:hover { filter: brightness(1.1); }

/* Inputs */
.input-neo { background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); outline: none; transition: box-shadow .25s ease, border-color .25s ease; }
.input-neo:focus { border-color: var(--neo-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.22), 0 10px 24px rgba(0,0,0,0.25); }

/* Nav glass */
.nav-glass { background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Footer glow line */
.footer-glow { position: relative; }
.footer-glow::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neo-purple), var(--neo-cyan), transparent);
  box-shadow: 0 0 32px var(--neo-purple); opacity: 0.7;
}

/* Subtle elevate */
.hover-elevate { transition: transform .25s ease, box-shadow .25s ease; }
.hover-elevate:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.35); }

/* Accent text gradient */
.text-accent {
  background: linear-gradient(135deg, var(--neo-purple), var(--neo-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Animations */
@keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 rgba(34,211,238,0); } 50% { box-shadow: 0 0 36px rgba(34,211,238,0.25); } }
.float-slow { animation: floatY 6s ease-in-out infinite; }
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

/* Image styles */
.avatar-neo { position: relative; display: inline-block; border-radius: 9999px; overflow: hidden; }
.avatar-neo img { display: block; width: 120px; height: 120px; object-fit: cover; }
.avatar-neo::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--neo-purple), var(--neo-cyan)); filter: blur(10px); opacity: .6; z-index: -1; }
.avatar-ring { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); }

.thumb-neo { position: relative; overflow: hidden; }
.thumb-neo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 80% -20%, rgba(167,139,250,0.15), transparent 60%); opacity: 0; transition: opacity .3s ease; }
.thumb-neo:hover::before { opacity: 1; }
.thumb-neo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .35s ease; }
.thumb-neo:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .future-grid::before { animation: none; }
  .float-slow, .pulse-glow { animation: none; }
}