/* === Custom Properties === */
:root {
  --color-primary: #0161EF;
  --color-primary-dark: #0154CF;
  --color-accent: #7C3AED;
  --color-glow-primary: rgba(1, 97, 239, 0.08);
  --color-glow-accent: rgba(124, 58, 237, 0.06);
}

/* === Fade-in-up Animation === */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out both;
}

/* === Focus Styles === */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* === Text Selection === */
::selection {
  background-color: var(--color-primary);
  color: white;
}

.dark ::selection {
  background-color: #60A5FA;
  color: #0B1222;
}

/* === Skip to Content === */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
}

.skip-to-content:focus {
  left: 0;
}

/* === Smooth dark mode transition === */
html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* === Card Glow — gradient top border on hover === */
.card-glow {
  position: relative;
  overflow: hidden;
}

.card-glow::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-glow:hover::before {
  opacity: 1;
}

/* === Mesh Light Background === */
.bg-mesh-light {
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, var(--color-glow-primary), transparent),
    radial-gradient(ellipse 50% 60% at 90% 80%, var(--color-glow-accent), transparent);
}

.dark .bg-mesh-light {
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(1, 97, 239, 0.12), transparent),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(124, 58, 237, 0.10), transparent);
}

/* === Timeline Step connector line === */
.timeline-step {
  position: relative;
}

@media (min-width: 640px) {
  .timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: calc(50% + 2.5rem);
    right: calc(-50% + 2.5rem);
    height: 2px;
    background: linear-gradient(to right, var(--color-primary), var(--color-accent));
    opacity: 0.3;
  }
}