/* Nav link border segments - only visible on hover of specific item */
.nav-link {
  text-decoration: none !important;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #6366f1; /* brand-500 */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

.nav-link:hover::after {
  opacity: 1;
}

/* Work card background image - continuous network graph */
.work-card-bg {
  background-image:
    linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.65) 0%,
      rgba(15, 23, 42, 0.55) 50%,
      rgba(15, 23, 42, 0.65) 100%
    ),
    url('images/network-graph.png');
  background-size: cover, 200% auto; /* Gradient covers all, image width 200% with natural height */
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll;
  position: relative;
  background-blend-mode: normal, normal; /* Let colors show through more naturally */
  border-color: rgb(51, 65, 85) !important; /* Lighter than slate-800, closer to slate-700 */
  transition: background-image 0.3s ease-in-out, border-color 0.3s ease-in-out, border-width 0.3s ease-in-out;
}

/* Darker overlay and lighter border on hover for better text focus */
.work-card-bg:hover {
  background-image:
    linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.85) 0%,
      rgba(15, 23, 42, 0.75) 50%,
      rgba(15, 23, 42, 0.85) 100%
    ),
    url('images/network-graph.png');
  border-color: rgb(71, 85, 105) !important; /* Even lighter on hover (slate-600) */
  border-width: 2px;
}

/* Individual card background positions for continuous effect */
/* Format: gradient position, image position */
.card-1 { background-position: center, 0% 0%; }
.card-2 { background-position: center, 50% 0%; }
.card-3 { background-position: center, 0% 33.33%; }
.card-4 { background-position: center, 50% 33.33%; }
.card-5 { background-position: center, 0% 66.66%; }
.card-6 { background-position: center, 50% 66.66%; }

/* Page transition styles */
body {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

body.page-loaded {
  opacity: 1;
}

/* Accessibility: Focus indicators for keyboard navigation */
*:focus-visible {
  outline: 2px solid #10b981; /* teal-500 */
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #10b981;
  color: #0f172a;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body {
    transition: none;
  }

  .nav-link::after {
    transition: none;
  }
}