/* =========================================================
   UTILITIES.CSS — ANIMATIONS, REVEALS, HELPERS
   ========================================================= */

/* ---------------------------------------------------------
   REVEAL ANIMATIONS
   --------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}

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

.reveal--delay-1 { transition-delay: .1s; }
.reveal--delay-2 { transition-delay: .25s; }
.reveal--delay-3 { transition-delay: .4s; }
.reveal--delay-4 { transition-delay: .55s; }
.reveal--delay-5 { transition-delay: .7s; }
.reveal--delay-6 { transition-delay: .85s; }

/* ---------------------------------------------------------
   FADE UP KEYFRAMES
   --------------------------------------------------------- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fadeUp--1 { animation: fadeUp .7s .1s both; }
.anim-fadeUp--2 { animation: fadeUp .7s .25s both; }
.anim-fadeUp--3 { animation: fadeUp .7s .4s both; }
.anim-fadeUp--4 { animation: fadeUp .7s .55s both; }
.anim-fadeUp--5 { animation: fadeUp .7s .7s both; }
.anim-fadeUp--6 { animation: fadeUp .7s .85s both; }

/* ---------------------------------------------------------
   CHAT TYPING DOTS
   --------------------------------------------------------- */
@keyframes typingDots {
    0%, 100% {
        opacity: .3;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.chat__typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    animation: typingDots 1.2s infinite;
}

.chat__typing span:nth-child(2) { animation-delay: .2s; }
.chat__typing span:nth-child(3) { animation-delay: .4s; }

/* ---------------------------------------------------------
   HOVER LIFT
   --------------------------------------------------------- */
.hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(10, 15, 30, 0.24);
}

/* ---------------------------------------------------------
   VISIBILITY
   --------------------------------------------------------- */
.hidden { display: none !important; }
.visible { display: block !important; }

/* ---------------------------------------------------------
   OPACITY
   --------------------------------------------------------- */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

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

/* ---------------------------------------------------------
   FLEX UTILITIES
   --------------------------------------------------------- */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   GRID UTILITIES
   --------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

/* ---------------------------------------------------------
   EXTRA SPACING
   --------------------------------------------------------- */
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }

/* ---------------------------------------------------------
   BORDERS & RADIUS
   --------------------------------------------------------- */
.border { border: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }

/* ---------------------------------------------------------
   GLASS EFFECT
   --------------------------------------------------------- */
.glass {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
}

/* ---------------------------------------------------------
   TRANSITIONS
   --------------------------------------------------------- */
.transition { transition: all .25s ease; }
.transition-fast { transition: all .15s ease; }