/* ============================================
   UTILITIES — atmospheric overlays, gradient
   text, scroll reveal, helpers
   ============================================ */

/* ---------- ATMOSPHERIC OVERLAYS ---------- */

.vb-atmosphere {
  position: relative;
  overflow: hidden;
}

.vb-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vb-atmosphere.cool::before { background: var(--atmosphere-cool); }
.vb-atmosphere.warm::before { background: var(--atmosphere-warm); }
.vb-atmosphere.deep::before { background: var(--atmosphere-deep); }
.vb-atmosphere.teal::before { background: var(--atmosphere-teal); }

.vb-atmosphere > * { position: relative; z-index: 1; }

/* ---------- GRADIENT TEXT ---------- */

.vb-grad-text-cool,
.vb-grad-text-warm,
.vb-grad-text-teal {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.vb-grad-text-cool { background-image: var(--gradient-text-cool); }
.vb-grad-text-warm { background-image: var(--gradient-text-warm); }
.vb-grad-text-teal { background-image: var(--gradient-teal); }

/* ---------- SCROLL REVEAL ---------- */

.vb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.vb-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vb-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- VISUALLY HIDDEN (a11y) ---------- */

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

/* ---------- SPACING UTILITIES (sparing) ---------- */

.vb-mt-0 { margin-top: 0 !important; }
.vb-mb-0 { margin-bottom: 0 !important; }

/* ---------- LAYOUT HELPERS ---------- */

.vb-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vb-text-center { text-align: center; }