/* Behaviour styles that replace the original React/framer-motion runtime.
   All visual styling comes from the recovered Tailwind build in styles.css. */

/* Scroll reveal (initial states recovered from the server-rendered markup) */
html.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: var(--reveal, none);
}

/* Desktop "About" dropdown */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 60;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.75rem;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Mobile navigation sheet */
.mobile-sheet-overlay {
  transition: opacity 0.15s ease-in-out;
  opacity: 0;
}
.mobile-sheet {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  opacity: 0;
  transform: translateX(2.5rem);
  overflow-y: auto;
}
.sheet-open .mobile-sheet-overlay,
.sheet-open .mobile-sheet {
  opacity: 1;
  transform: none;
}
body.sheet-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
  }
}