/* ============================================================
   Stone Solutions Consulting — shared visual identity
   Linked by index.html and every blog post under /blog/.
   Update here, propagate everywhere on next cache-bust.
   ------------------------------------------------------------
   Cache-busting: bump the ?v= query string on the <link> tag
   in each HTML file when this CSS changes (Firebase caches
   .css files immutable for 1y).
   ============================================================ */

/* === Reset & base === */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:#0C111D; }
body { font-family:'Montserrat','Segoe UI',sans-serif; color:#fff; background:transparent; }

/* === Animated gradient (fixed, behind everything) === */
@keyframes heroGradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.gradient-bg {
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(135deg,
    #2a8a2a 0%, #145a14 18%, #0f4a0f 36%,
    #1a1a2e 56%, #3a1555 72%, #1a1a2e 88%, #2a8a2a 100%);
  background-size:300% 300%;
  animation:heroGradientShift 10s ease infinite;
}

/* === S-curve watermark (fixed, between gradient and content) === */
.logo-bg {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:70vmin; height:70vmin;
  z-index:-1;
  opacity:0.13;
  pointer-events:none;
}
.logo-bg svg { width:100%; height:100%; display:block; }

/* === Section overlay ===
   Apply this class to any section/div/footer that should sit over
   the gradient with the standard 0.48 dark tint for legibility. */
.gradient-section { background:rgba(12,17,29,0.48) !important; }

/* === Fade-in on scroll (used with IntersectionObserver) === */
.fade-in {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible { opacity:1; transform:translateY(0); }

/* === Blog-page-only override ===
   Body text on /blog/ pages sits over the gradient with no section
   overlay, so the watermark needs to be dimmer to not impede reading. */
body.blog .logo-bg { opacity:0.05; }