/* ============================================
   NowItClicks — Shared Styles (taste-skill)
   Single source of truth for both pages.
   ============================================ */

/* Base */
* { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background-color: #0a0a0a;
  color: #e4e4e7;
  overflow-x: hidden;
}

/* Mouse glow — emerald tinted */
#mouse-glow {
  position: fixed; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.07) 0%, rgba(16, 185, 129, 0.02) 40%, transparent 70%);
  pointer-events: none; z-index: 0; transform: translate(-50%, -50%);
  will-change: transform;
}

/* Scroll progress */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 999;
  background: linear-gradient(90deg, #059669, #34d399, #059669);
  background-size: 200% 100%;
  transform-origin: left;
}

/* Gradient blobs */
.blob {
  position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.07;
  pointer-events: none; z-index: 0;
}
@media (max-width: 767px) {
  .blob {
    opacity: 0.04;
    filter: blur(80px);
    width: 250px !important;
    height: 250px !important;
  }
}
@keyframes blobMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(100px, -50px) scale(1.1); }
  50% { transform: translate(-50px, 100px) scale(0.9); }
  75% { transform: translate(80px, 60px) scale(1.05); }
}
@keyframes blobMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-120px, 80px) scale(1.15); }
  66% { transform: translate(60px, -100px) scale(0.85); }
}

/* Particles canvas */
#particles {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* Animations — spring easing */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Buttons — tactile feedback */
.btn-primary {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden;
}
.btn-primary:hover {
  box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.2);
}
.btn-primary::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary:hover::after { transform: translateX(100%); }

/* Magnetic button physics */
.magnetic-btn { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }

/* Navbar — liquid glass on scroll */
#navbar {
  background: transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#navbar.scrolled {
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px;
  background: #10b981; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #e4e4e7; }
.nav-link.active::after { width: 100%; }

/* Mobile menu */
#mobile-menu-btn.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobile-menu-btn.open .hamburger-line:nth-child(2) { opacity: 0; }
#mobile-menu-btn.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mobile-menu.open { opacity: 1; pointer-events: all; }

/* Glitch hover on logo */
.glitch-hover { position: relative; display: inline-block; }
.glitch-hover:hover { animation: glitch 0.3s ease forwards; }
@keyframes glitch {
  0% { transform: translate(0); }
  10% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  20% { transform: translate(2px, -1px); }
  30% { transform: translate(-1px, -1px); filter: hue-rotate(0deg); }
  40% { transform: translate(1px, 1px); filter: hue-rotate(-90deg); }
  50% { transform: translate(-1px, 1px); }
  60% { transform: translate(1px, -1px); filter: hue-rotate(0deg); }
  70% { transform: translate(0); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* Mobile touch improvements */
@media (max-width: 767px) {
  /* Ensure minimum tap target size (44px) */
  .btn-primary { min-height: 44px; }

  /* Prevent text overflow on very narrow screens */
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }

  /* Disable hover-only effects */
  .btn-primary:hover { transform: none; box-shadow: none; }
  .btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.2);
  }

  /* Reduce scroll progress bar to 1px for cleaner mobile look */
  #scroll-progress { height: 1px; }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  #navbar > div { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
}

/* Line divider */
.line-draw {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.35), transparent);
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-draw.visible { transform: scaleX(1); }