html {
  scroll-behavior: smooth;
}

/* --- VIEW TRANSITIONS (Cross-Document) --- */
@view-transition {
  navigation: auto;
}

@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes slide-from-right {
  from { transform: translateX(20px); }
}
@keyframes slide-to-left {
  to { transform: translateX(-20px); }
}

::view-transition-old(root) {
  animation: 90ms ease-out both fade-out,
             300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
             300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* --- STANDARDIZED HEADER TRANSPARENCY & SHADOW --- */
header.nav-scrolled, nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

.dark header.nav-scrolled, .dark nav.nav-scrolled {
  background: rgba(29, 31, 39, 0.95) !important;
}

/* --- GLOBAL SMOOTH HOVER TRANSITIONS --- */
.transition-standard {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.transition-slow {
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.transition-fast {
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-hover-effect {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-hover-effect:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(60, 92, 207, 0.15) !important;
}


/* Safe general selector for smoother interaction states */
a, button, select, input, textarea, svg, span, img, .group {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Global viewport overflow security rule */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}