/* =============================================
   FACILIT – Responsive Extras
   Additional responsive styles
============================================= */

/* Smooth scrolling offset for sticky header */
:target::before {
  content: '';
  display: block;
  height: 80px;
  margin-top: -80px;
  pointer-events: none;
}

/* Selection color */
::selection {
  background: var(--yellow);
  color: var(--black);
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--yellow-dark); }

/* Loading animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  transform: translateY(30px);
}
.fade-up.visible {
  animation: fadeInUp 0.6s ease forwards;
}

/* Stagger delays */
.fade-up:nth-child(2) { animation-delay: 0.1s; }
.fade-up:nth-child(3) { animation-delay: 0.2s; }
.fade-up:nth-child(4) { animation-delay: 0.3s; }
.fade-up:nth-child(5) { animation-delay: 0.4s; }
.fade-up:nth-child(6) { animation-delay: 0.5s; }