@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600&family=DM+Serif+Display&display=swap');

/* Fonts */
.font-brand { font-family: 'Bodoni Moda', serif; }
.font-inter { font-family: 'Urbanist', sans-serif; }
.font-hero { font-family: 'DM Serif Display', serif; }

/* Navigation link underline */
/* Fonts & underline still apply */
.nav-link {
  position: relative;
  padding: 0.4rem 1rem;
  border-radius: 9999px; /* full pill */
  transition: color 0.3s ease;
  z-index: 0;
}

.nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(ellipse at center, rgba(0,255,255,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: -1;
  transform: scale(0.9);
}

.nav-link:hover::before {
  opacity: 1;
  transform: scale(1.1);
}

.nav-link:hover {
  color: #67e8f9; /* Tailwind cyan-300 */
}



/* Hamburger lines (white by default) */
#nav-toggle .line {
  @apply block h-0.5 bg-white absolute left-0 w-full transition-all duration-300;
}

/* Position of lines when closed */
#nav-toggle .top    { top: 0; }
#nav-toggle .middle { top: 0.35rem; }
#nav-toggle .bottom { top: 0.7rem; }


/* Glow utility */
.drop-shadow-glow {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* Fade-up animation */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fade-up 0.8s ease-out both;
}

/* Matrix canvas */
canvas#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* Intro logo animation */
#intro-logo.show {
  opacity: 1;
  transform: translateY(0);
}
#intro-logo.start {
  transform: translateY(20px);
}

/* Content reveal after intro */
#main-content {
  opacity: 0;
  transition: opacity 1s ease 0.4s;
}
#main-content.reveal {
  opacity: 1;
}

/* Intro fade-out effect */
#intro-overlay.fade-out {
  opacity: 0;
  transform: scale(0.98);
  filter: blur(2px);
  pointer-events: none;
}


/* Juridescent about page extras */
.screenshot-frame {
  background: rgba(15, 23, 42, 0.04);
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 0.75rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.screenshot-image {
  display: block;
  width: 100%;
  border-radius: 0.9rem;
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.flow-badge {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(8, 47, 73, 1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}