/* =============================================
   Contentia Creative - Shared Stylesheet
   ============================================= */

/* Base */
body { font-family: 'Inter', sans-serif; }

/* Animations */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Animate classes */
.animate-fade-slide { animation: fadeSlideUp 0.6s ease-out forwards; opacity: 0; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Hover lift effect */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Grid background */
.bg-grid {
    background-image:
        linear-gradient(rgba(226,232,240,0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226,232,240,0.4) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Dot pattern background */
.bg-pattern {
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Star/rating icons */
.star       { width: 14px; height: 14px; fill: #f59e0b; }
.star-empty { width: 14px; height: 14px; fill: #e2e8f0; }
.star-badge { display: inline-flex; align-items: center; gap: 4px; }
.check-icon { flex-shrink: 0; }

/* Service card icon hover */
.service-card { transition: all 0.3s ease; }
.service-card:hover .service-icon { transform: scale(1.15) rotate(-5deg); }

/* Portfolio filter button active state */
.filter-btn.active { background-color: #2563eb; color: white; border-color: #2563eb; }

/* Project card (masonry) */
.project-card { break-inside: avoid; }

/* Tailwind-like shorthand button classes */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: #2563eb;
    color: #fff;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(37,99,235,0.18);
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover { background-color: #1d4ed8; box-shadow: 0 4px 16px rgba(37,99,235,0.25); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    color: #1e293b;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    transition: background-color 0.2s;
    cursor: pointer;
    text-decoration: none;
}
.btn-secondary:hover { background-color: #f8fafc; }

/* Card shorthand */
.card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Nav active link */
.nav-link.active  { color: #2563eb; font-weight: 700; }
.nav-link:hover:not(.active) { color: #1e293b; }