/* =========================================================
   OTAKU SENPAI VERSE — Components Layer
   Estilos específicos que não são cobertos por utilitários Tailwind.
   ========================================================= */

/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */
#navbar {
  background: linear-gradient(180deg, rgba(10, 7, 16, 0.9), transparent);
  transition: transform var(--duration-base) var(--ease-standard), background var(--duration-base) ease, border-color var(--duration-base) ease;
}

#navbar[data-state="scrolled"] {
  background: rgba(10, 7, 16, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-line);
}

/* Sprint 003 — scroll inteligente: esconde ao descer, mostra ao subir */
#navbar[data-direction="down"] {
  transform: translateY(-100%);
}

#navbar[data-direction="up"] {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #navbar {
    transition: none;
    transform: none !important;
  }
}

#mobile-menu.open {
  display: flex;
}

/* ---------------------------------------------------------
   Splash Screen
   --------------------------------------------------------- */
#splash-screen {
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

#splash-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#splash-pen-line {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

/* ---------------------------------------------------------
   Search overlay
   --------------------------------------------------------- */
#search-overlay.open {
  display: flex;
}

/* ---------------------------------------------------------
   Back to top
   --------------------------------------------------------- */
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------
   Floating button (flutuante)
   --------------------------------------------------------- */
.animate-float {
  animation: floatY 3.4s ease-in-out infinite;
}

/* ---------------------------------------------------------
   Wallpaper grid
   --------------------------------------------------------- */
#wallpapers .columns-2 > a {
  break-inside: avoid;
}

/* ---------------------------------------------------------
   Service preview (hover-swap de categorias, se usado)
   --------------------------------------------------------- */
.svc-preview {
  position: sticky;
  top: 120px;
}

.svc-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s ease;
  transform: scale(1.06);
}

.svc-art.active {
  opacity: 1;
  transform: scale(1);
}