/* Shared base styles for Sohail Merchant portfolio */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-page);
  font-family: var(--font-body);
  color: var(--text-primary);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  overflow-x: hidden;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
[data-lucide] { display: inline-flex; vertical-align: middle; stroke-width: 2; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }

/* Scroll reveal */
.reveal, [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-delay="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .float-blob { animation: none !important; }
}

/* Floating brand blobs (subtle) */
.float-blob { animation: floaty 9s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(6deg); }
}

/* Card hover lift utility */
.lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Responsive */
@media (max-width: 900px) {
  .site-nav, .nav-cta { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .section { padding: 64px 0; }
  .hero-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Marquee for tools */
.marquee { display: flex; gap: 56px; width: max-content; animation: marquee 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }