/* ============================================================
   UTILITIES & ANIMATIONS – Kazuma Ali Portfolio
   ============================================================ */

/* ---------- UTILITY HELPERS ---------- */
.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}
.gap-1 {
    gap: 1rem;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.w-full {
    width: 100%;
}

/* ---------- SVG ICONS ---------- */
.icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  flex-shrink: 0;
}
.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 1.8em; height: 1.8em; }

/* Keep consistent with old button icon sizes */
button .icon,
.btn .icon {
  margin-right: 0.3rem;
}
[dir="rtl"] button .icon,
[dir="rtl"] .btn .icon {
  margin-right: 0;
  margin-left: 0.3rem;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
}
@keyframes pulseGlow {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(78, 205, 196, 0.10);
    }
    50% {
        box-shadow: 0 0 40px rgba(78, 205, 196, 0.25);
    }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Additional utilities from end */
.profile-pic {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(78, 205, 196, 0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.msg-avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
  object-fit: cover;
}