/* ========================================
   Basecamp Ops — Supplementary Styles
   Tailwind CDN handles the bulk; these
   cover gaps and custom behaviors.
   ======================================== */

/* 1. Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* 2. Scroll-triggered fade-in-up animation */
.animate-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3-4. Header: transparent → solid on scroll */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#site-header.scrolled {
  background-color: rgb(var(--color-brand-950, 2 6 23));
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -4px rgb(0 0 0 / 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 5. Remove default details marker */
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

/* 6. Button hover / focus-visible outlines */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgb(var(--color-brand-500, 99 102 241));
  outline-offset: 2px;
}

button:hover,
[role="button"]:hover {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* 7. Input / select focus transitions */
input,
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgb(var(--color-brand-500, 99 102 241));
  box-shadow: 0 0 0 3px rgb(var(--color-brand-500, 99 102 241) / 0.25);
}

/* 8. Smooth card transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* 9. Custom scrollbar (webkit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-brand-950, 2 6 23));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-brand-500, 99 102 241));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-brand-400, 129 140 248));
}

/* 10. Mobile menu transition */
#mobile-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* 11. Text selection */
::selection {
  background-color: rgb(var(--color-brand-100, 224 231 255));
  color: rgb(var(--color-brand-900, 30 27 75));
}