/* Kayyiza Custom Styles */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Selection color */
::selection {
  background-color: #C9A96E;
  color: #FDFAF6;
}

/* Navbar glass effect on scroll */
.navbar-scrolled {
  background: rgba(253, 250, 246, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232, 226, 217, 0.5);
}

/* Reveal animation base */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for children */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }

/* Hero entrance animations */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-hero] {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-hero="1"] { animation-delay: 0.3s; }
[data-hero="2"] { animation-delay: 0.5s; }
[data-hero="3"] { animation-delay: 0.7s; }
[data-hero="4"] { animation-delay: 0.9s; }

/* Mobile menu toggle */
#mobile-menu.open {
  display: block !important;
}

/* Portfolio hover lift */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Smooth focus outlines */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #C9A96E;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  [data-hero] {
    opacity: 1;
    animation: none;
  }
}

/* Subtle grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #FDFAF6;
}
::-webkit-scrollbar-thumb {
  background: #E8E2D9;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C9A96E;
}

/* Loading Screen */
#loading-screen {
  opacity: 1;
  transition: opacity 0.5s ease;
}
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* WhatsApp Float */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}
#wa-float {
  animation: waPulse 2.5s infinite;
}
#wa-float:hover {
  animation: none;
}

/* Ensure grain overlay sits above loading screen */
body::after {
  z-index: 101;
}

/* Lightbox */
#lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
#lightbox.hidden {
  display: none;
}

/* Dark Mode */
.light-hidden { display: none; }
.dark .light-hidden { display: block; }
.dark .dark-hidden { display: none; }

/* Dark mode overrides */
.dark body { background: #1a1a1a; color: #E8E2D9; }
.dark .bg-cream { background-color: #1a1a1a; }
.dark .bg-\[\#f5f0e8\] { background-color: #242018; }
.dark .bg-cream\/95 { background-color: rgba(26, 26, 26, 0.95); }
.dark .text-charcoal { color: #E8E2D9; }
.dark .text-brown { color: #C9A96E; }
.dark .text-dark\/90 { color: rgba(232, 226, 217, 0.9); }
.dark .border-muted\/40 { border-color: rgba(139, 115, 85, 0.3); }
.dark .bg-muted\/30 { background-color: rgba(139, 115, 85, 0.2); }
.dark .bg-muted\/50 { background-color: rgba(139, 115, 85, 0.3); }
.dark .hover\:bg-muted\/50:hover { background-color: rgba(139, 115, 85, 0.4); }
.dark .navbar-scrolled {
  background: rgba(26, 26, 26, 0.85) !important;
  border-bottom-color: rgba(139, 115, 85, 0.3) !important;
}
.dark ::-webkit-scrollbar-track { background: #1a1a1a; }
.dark ::-webkit-scrollbar-thumb { background: #8B7355; }

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 20s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

/* FAQ details animation */
details[open] summary ~ * {
  animation: faqSlide 0.3s ease;
}
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}