/* Custom Fonts setup */
body {
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Outfit', sans-serif;
}

/* Custom Cursor Logic */
@media (pointer: fine) {
    body { cursor: none; }
    .cursor-dot {
        width: 8px;
        height: 8px;
        background-color: #F97316;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s, background-color 0.2s;
    }
    .cursor-outline {
        width: 40px;
        height: 40px;
        border: 2px solid rgba(249, 115, 22, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s, transform 0.1s ease-out;
    }
    .cursor-hover .cursor-dot {
        width: 0;
        height: 0;
    }
    .cursor-hover .cursor-outline {
        width: 60px;
        height: 60px;
        background-color: rgba(249, 115, 22, 0.1);
        border-color: rgba(249, 115, 22, 0.8);
    }
}

/* Glassmorphism Header */
.glass-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* Advanced Buttons Hover Effects */
.btn-primary {
    will-change: transform, box-shadow;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.7s ease;
}
.btn-primary:hover::before {
    left: 100%;
}
.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(249,115,22, 0.4), 0 10px 10px -5px rgba(249,115,22, 0.2);
}

/* Service Cards 3D Tilt */
.service-card {
    will-change: transform, box-shadow;
}
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.1);
}
.service-card:hover::after {
    box-shadow: inset 0 0 0 2px rgba(249,115,22,0.1);
}

/* Masonry Portfolio Items */
.portfolio-img-container {
    will-change: transform;
}
.portfolio-img-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -12px rgba(7, 12, 22, 0.2);
}
.portfolio-img {
    display: block;
}
.portfolio-img-container:hover .portfolio-img {
    transform: scale(1.05);
}
.portfolio-img-container:hover .portfolio-overlay {
    opacity: 1;
}
.portfolio-img-container:hover .portfolio-zoom-icon {
    transform: scale(1);
    opacity: 1;
}

/* Lightbox specific force visible when active */
#lightbox {
    transition: opacity 0.5s ease;
}
#lightbox.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
#lightbox-img {
    transition: transform 0.5s ease-out;
}
#lightbox.active #lightbox-img {
    transform: scale(1) !important;
}

/* Staggered Text Reveal animation for Hero */
.reveal-text span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;
}
.reveal-text.active span {
    transform: translateY(0);
    opacity: 1;
}