/* ==========================================================
   UTILITIES.CSS — Helper Classes & Scroll Reveal
   Alfredo Limson Portfolio V2
   ========================================================== */

/* ----------------------------------------------------------
   SCROLL REVEAL — Applied via JS IntersectionObserver
   ---------------------------------------------------------- */
.al-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1),
              transform 0.8s cubic-bezier(.16,1,.3,1);
}

.al-reveal.al-visible {
  opacity: 1;
  transform: translateY(0);
}

.al-reveal--left {
  opacity: 0;
  transform: translateX(-30px);
}

.al-reveal--left.al-visible {
  opacity: 1;
  transform: translateX(0);
}

.al-reveal--right {
  opacity: 0;
  transform: translateX(30px);
}

.al-reveal--right.al-visible {
  opacity: 1;
  transform: translateX(0);
}

.al-reveal--scale {
  opacity: 0;
  transform: scale(0.92);
}

.al-reveal--scale.al-visible {
  opacity: 1;
  transform: scale(1);
}

/* ----------------------------------------------------------
   SPACING UTILITIES
   ---------------------------------------------------------- */
.al-mt-0 { margin-top: 0 !important; }
.al-mb-0 { margin-bottom: 0 !important; }
.al-mt-4 { margin-top: 1rem !important; }
.al-mb-4 { margin-bottom: 1rem !important; }
.al-mt-8 { margin-top: 2rem !important; }
.al-mb-8 { margin-bottom: 2rem !important; }

/* ----------------------------------------------------------
   TEXT UTILITIES
   ---------------------------------------------------------- */
.al-text-center { text-align: center; }
.al-text-left   { text-align: left; }
.al-text-right  { text-align: right; }

.al-text-gradient {
  color: transparent;
  background: linear-gradient(135deg, #00ffff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.al-text-muted { color: #94a3b8; }
.al-text-dim   { color: #64748b; }

/* ----------------------------------------------------------
   DISPLAY & FLEX
   ---------------------------------------------------------- */
.al-flex        { display: flex; }
.al-flex-center { display: flex; align-items: center; justify-content: center; }
.al-flex-col    { display: flex; flex-direction: column; }
.al-gap-4      { gap: 1rem; }
.al-gap-6      { gap: 1.5rem; }

/* ----------------------------------------------------------
   VISIBILITY
   ---------------------------------------------------------- */
.al-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.al-hidden { display: none !important; }

/* ----------------------------------------------------------
   HOVER GLOW UTILITY
   ---------------------------------------------------------- */
.al-glow-hover {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.al-glow-hover:hover {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  border-color: rgba(0, 255, 255, 0.3);
}