/* ============================================
   WEBSMITHERZ — Core Design System
   Based on lalalalalalala.html reference
   ============================================ */

/* 1. TYPOGRAPHY */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.font-serif { font-family: 'Playfair Display', Georgia, Cambria, "Times New Roman", Times, serif; }
.font-bricolage { font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; }
.font-mono { font-family: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace !important; }

/* 2. SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* 3. GRAIN OVERLAY */
.bg-grain {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 4. GRID LINES */
.grid-lines {
  position: fixed; inset: 0; width: 100%; max-width: 90rem;
  margin: 0 auto; pointer-events: none; z-index: 5;
  display: flex; justify-content: space-between;
  padding: 0 3rem; opacity: 0.08;
}
@media (max-width: 768px) { .grid-lines { padding: 0 1.5rem; } }
.grid-line { width: 1px; height: 100%; background-color: rgba(255,255,255,0.25); }

/* 5. KEYFRAMES */
@keyframes cinematicEntrance {
  0%   { transform: scale(1.4); filter: blur(20px) grayscale(100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1); filter: blur(0px) grayscale(0%); opacity: 1; }
}
.animate-cinematic { animation: cinematicEntrance 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes slideUpFade {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUpFade 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes animationIn {
  0%   { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

@keyframes shimmerMove {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(200%) skewX(-20deg); }
}
.animate-shimmer-effect {
  animation: shimmerMove 3.5s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes slideInLeft  { from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(50px);  } to { opacity:1; transform:translateX(0); } }

@keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.animate-spin-slow-reverse { animation: spinReverse 20s linear infinite; }

@keyframes barEqualizer {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.25); }
}
.bar-anim {
  transform-origin: bottom;
  animation-name: barEqualizer;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-ticker { animation: ticker 30s linear infinite; }

@keyframes fanSlideIn {
  0%   { opacity: 0; transform: translateY(40px) rotate(2deg) scale(0.96); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: blur(0); }
}

/* 6. SCROLL ANIMATIONS */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1),
              transform 0.9s cubic-bezier(0.2,0.8,0.2,1),
              filter 0.9s cubic-bezier(0.2,0.8,0.2,1);
}
.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}
.animate-on-scroll[data-anim="slide-left"]         { transform: translateX(-40px); filter: blur(4px); opacity: 0; }
.animate-on-scroll[data-anim="slide-left"].animate  { transform: translateX(0); filter: blur(0); opacity: 1; }
.animate-on-scroll[data-anim="slide-right"]         { transform: translateX(40px); filter: blur(4px); opacity: 0; }
.animate-on-scroll[data-anim="slide-right"].animate { transform: translateX(0); filter: blur(0); opacity: 1; }

/* 7. ANIMATION DELAYS */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 8. 3D TRANSFORMS */
.perspective-midrange  { perspective: 800px !important; }
.perspective-distant   { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.rotate-x-15 { transform: rotateX(15deg) !important; }
.rotate-y-15 { transform: rotateY(15deg) !important; }

/* 9. GLASSMORPHISM */
.glass {
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* 10. TEXT GLOW */
.text-glow { text-shadow: 0 0 20px rgba(255,255,255,0.4); }

/* 11. LAYOUT */
section { position: relative; z-index: 10; }

/* 12. HIDE SCROLLBAR */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 13. PROGRESS LINE REVEAL (on hover via group) */
.progress-reveal {
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.group:hover .progress-reveal { transform: translateX(0); }

/* 14. CARD IMAGE REVEAL */
.card-img {
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
.group:hover .card-img {
  opacity: 0.75;
  filter: grayscale(0);
  transform: scale(1.05);
}

/* 15. SERVICES NAV DROPDOWN */
.nav-services-dropdown {
  position: relative;
}
.nav-services-dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-services-dropdown .services-chevron {
  transition: transform 0.2s ease;
}
.nav-services-dropdown:hover .services-chevron {
  transform: rotate(180deg);
}
.nav-services-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 220px;
  opacity: 0;
  display: none;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
.nav-services-dropdown:hover .nav-services-menu,
.nav-services-menu:hover {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-services-dropdown > a:hover + .nav-services-menu {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-services-menu-inner {
  background: rgba(18, 18, 20, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-services-menu-inner .svc-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.nav-services-menu-inner .svc-all span {
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.3);
}
.nav-services-menu-inner .svc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background 0.15s ease;
  text-decoration: none;
}
.nav-services-menu-inner .svc-item:hover {
  background: rgba(255,255,255,0.05);
}
.nav-services-menu-inner .svc-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-services-menu-inner .svc-label {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  transition: color 0.15s ease;
  font-weight: 500;
}
.nav-services-menu-inner .svc-item:hover .svc-label {
  color: rgba(255,255,255,1);
}

/* 16. RESPONSIVE MOBILE NAV PANEL */
nav.nav-open .mobile-nav-panel.hidden {
  display: block !important;
}
nav.nav-open .mobile-nav-panel {
  display: block !important;
}
nav.nav-open {
  border-radius: 28px !important;
  background: rgba(10, 10, 10, 0.98) !important;
}
nav.nav-open .nav-icon-menu {
  transform: rotate(90deg);
}
@media (max-width: 768px) {
  nav {
    max-width: calc(100% - 32px) !important;
  }
  /* Fix vertical overflow scroll dimensions on mobile */
  .mobile-nav-panel {
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: 16px;
  }
}

nav button, nav a {
  pointer-events: auto !important;
  cursor: pointer !important;
}