/* ============================================================
   Hadrasoft Domain Marketplace — animations.css
   ============================================================ */

/* === Card Reveal (staggered slide-in) ==================== */
.domain-card {
    opacity: 0;
    transform: translateY(20px);
    animation: cardReveal 0.5s ease forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes cardReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Search results fade ================================= */
.domain-grid.searching .domain-card {
    animation: none;
    opacity: 0.4;
    transform: none;
    transition: opacity 0.2s ease;
}

.domain-grid.fade-in .domain-card {
    animation: cardReveal 0.35s ease forwards;
    animation-delay: var(--delay, 0ms);
}

/* === Hero title reveal =================================== */
.hero-title {
    animation: heroReveal 0.7s ease forwards;
}
.hero-stat {
    animation: heroReveal 0.7s 0.15s ease both;
}
@keyframes heroReveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Filter bar slide down =============================== */
.filter-bar {
    animation: slideDown 0.4s ease forwards;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Pagination fade in ================================== */
.pagination-wrap {
    animation: fadeUp 0.4s 0.2s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Button pulse on hover ============================== */
.btn-teklif:active {
    transform: scale(0.97);
}

/* === Page btn hover ===================================== */
.page-btn {
    transition: all 0.15s ease;
}

/* === Spinner for form submit ============================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* === Char fill bar animate on load ====================== */
.char-fill {
    animation: barGrow 0.8s ease forwards;
    transform-origin: left;
}
@keyframes barGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* === Status badge pulse ================================= */
.status-satilik {
    animation: softPulse 3s ease-in-out infinite;
}
@keyframes softPulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 8px rgba(76,175,80,0.3); }
}

/* === Modal open/close =================================== */
.modal-overlay {
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-box {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
}

/* === Reduce motion ====================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}