/* =========================================
   MAIN — main.css
   ========================================= */

/* ── GOOGLE FONTS ────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* ── BODY ────────────────────────────────── */

body {
  font-family: var(--font-primary);
  background:  var(--bg);
  color:       var(--text-primary);
  transition:  background 5s ease;
}

/* ── PAGE WRAPPER ────────────────────────── */

.page-wrapper {
  position:  relative;
  min-height: 100vh;
  /* overflow-x:clip contains child overflow WITHOUT affecting
     position:fixed children (unlike overflow:hidden).
     This prevents any wide section from stretching the document
     and pushing the fixed header to the right. */
  overflow-x: clip;
}

/* ── UTILITIES ───────────────────────────── */

.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0 0 0 0);
  white-space: nowrap;
  border:     0;
}

/* ── SECTION INNER ───────────────────────── */

.section-inner {
  width:     100%;
  max-width: 1440px;
  margin:    0 auto;
}

/* ── FADE-IN ─────────────────────────────── */

.fade-in {
  opacity:   0;
  transform: translateY(20px);
  transition:
    opacity   0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.fade-in.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* On mobile: no vertical transform to prevent layout bleed */
@media (max-width: 768px) {
  .fade-in {
    transform: none;
    transition: opacity 0.5s var(--ease-out);
  }
  .fade-in.is-visible {
    opacity: 1;
  }
}

/* ── STAGGER DELAYS ──────────────────────── */

.fade-in:nth-child(1) { transition-delay: 0ms;   }
.fade-in:nth-child(2) { transition-delay: 80ms;  }
.fade-in:nth-child(3) { transition-delay: 160ms; }
.fade-in:nth-child(4) { transition-delay: 240ms; }