/*
 * Homepage Custom Styles — Tag N Trak It
 * Companion to quick-website.css for homepage-specific overrides
 */

/* ── Hero Section ────────────────────────────────────────── */
.hero-section {
    padding: 2.5rem 0 2rem;
}

.hero-section .hero-img {
    border-radius: 6px;
}

.typed-cursor {
    color: var(--primary, #008aff);
    font-weight: 600;
}

/* ── Service Cards ───────────────────────────────────────── */
.service-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    transition: transform .3s ease, box-shadow .3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125);
}

.service-card .card-body {
    padding: 1.5rem;
}

.service-card .service-img {
    height: 80px;
    object-fit: contain;
}

.service-card .service-link {
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    transition: color .2s ease;
}

.service-card .service-link:hover {
    text-decoration: underline;
}

/* ── Stats Counter Bar ───────────────────────────────────── */
.stats-bar {
    background: #171347;
}

.stats-bar .stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.stats-bar .stat-label {
    font-size: .875rem;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Why Us Section ──────────────────────────────────────── */
.why-us-section {
    background-color: #f8f9fa;
}

/* ── Scroll Animations ───────────────────────────────────── */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Base transition + stagger delays for service cards */
.fade-in-up.delay-1 { transition: opacity .6s ease .1s, transform .6s ease .1s; }
.fade-in-up.delay-2 { transition: opacity .6s ease .2s, transform .6s ease .2s; }
.fade-in-up.delay-3 { transition: opacity .6s ease .3s, transform .6s ease .3s; }
.fade-in-up.delay-4 { transition: opacity .6s ease .4s, transform .6s ease .4s; }
.fade-in-up.delay-5 { transition: opacity .6s ease .5s, transform .6s ease .5s; }
.fade-in-up.delay-6 { transition: opacity .6s ease .6s, transform .6s ease .6s; }

/* Elements without delay class get base transition */
.fade-in-up:not([class*="delay-"]) {
    transition: opacity .6s ease, transform .6s ease;
}

/* Hero entrance animations */
.hero-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp .7s ease forwards;
}

.hero-fade-left {
    opacity: 0;
    transform: translateX(30px);
    animation: heroFadeLeft .8s ease .2s forwards;
}

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

@keyframes heroFadeLeft {
    to { opacity: 1; transform: translateX(0); }
}

/* ── CSS Safety Net — auto-reveal if JS never fires ─────── */
@keyframes safeReveal {
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: safeReveal 0s ease 3s forwards;
}

.fade-in-up.visible {
    animation: none;
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .hero-fade-up,
    .hero-fade-left {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}