/* Custom Styles & Keyframes */
@layer utilities {
    .animation-delay-2000 {
        animation-delay: 2s;
    }
}


/* Custom Cursor default styles */
#cursor, #cursor-dot {
    transition: width 0.3s, height 0.3s, border-color 0.3s, background-color 0.3s;
}

#cursor.hovered {
    width: 64px;
    height: 64px;
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.1);
}

#cursor-dot.hovered {
    background-color: transparent;
}

/* Hover effects */
.hover-glow {
    transition: text-shadow 0.3s ease;
}
.hover-glow:hover {
    text-shadow: 0 0 10px #2d69d3;
}

.link-hover {
    position: relative;
}
.link-hover::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #47b2e4;
    transition: width 0.3s ease;
}
.link-hover:hover::after {
    width: 100%;
}

/* Cards & Panels */
.service-card, .features-panel, .portfolio-panel {
    will-change: transform;
}

/* Hide horizontal scrollbar for mobile swipe wrappers */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Floating animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.float-anim {
    animation: float 6s ease-in-out infinite;
}

/* Hide scrollbar for clean look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #1A1A1A;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #183669;
}

/* Autofill styling override for forms */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* MARQUEE ANIMATION */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 35s linear infinite;
}


.animated-gradient-text {
    background: linear-gradient(
        270deg,
        #00F5FF,
        #00D9FF,
        #7B61FF,
        #f879dd,
        #7C3AED,
        #00F5FF
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rotateGradient 6s ease infinite;
}

@keyframes rotateGradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animated-border {
    background: linear-gradient(
        290deg,
        #00F5FF,
        #00D9FF,
        #7B61FF,
        #f879dd,
        #7C3AED,
        #00F5FF
    );
    background-size: 300% 300%;
    animation: rotateGradient 6s ease infinite;
}


/* Animated Gradient Border */
.product-card {
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* Gradient Border Layer */
.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 24px;

    background: linear-gradient(
        270deg,
        #00F5FF,
        #00D9FF,
        #7B61FF,
        #f879dd,
        #7C3AED,
        #00F5FF
    );

    background-size: 300% 300%;
    animation: rotateGradient 6s ease infinite;

    /* Border Effect */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.4s ease;

    pointer-events: none;
}

/* Hover Active */
.product-card:hover::before {
    opacity: 1;
}

/* Gradient Animation */
@keyframes rotateGradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Animated Gradient Loader */
.animated-loader-bar {
    background: linear-gradient(
        270deg,
        #00F5FF,
        #00D9FF,
        #7B61FF,
        #f879dd,
        #7C3AED,
        #00F5FF
    );

    background-size: 300% 300%;
    animation: rotateGradient 6s ease infinite;
}

/* Gradient Animation */
@keyframes rotateGradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.bg-motion {
    position: absolute;
    inset: -30%;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.7;
}

.bg-motion-1 {
    background: radial-gradient(
        circle,
        rgba(18, 52, 86, 0.22) 0%,
        rgba(18, 52, 86, 0.12) 45%,
        transparent 75%
    );

    animation: slowFloatOne 12s ease-in-out infinite;
}

.bg-motion-2 {
    background: radial-gradient(
        circle,
        rgba(28, 72, 128, 0.18) 0%,
        rgba(28, 72, 128, 0.08) 45%,
        transparent 75%
    );

    animation: slowFloatTwo 28s ease-in-out infinite;
}

@keyframes slowFloatOne {
    0% {
        transform: translate(-4%, -2%) scale(1);
    }

    50% {
        transform: translate(4%, 3%) scale(1.08);
    }

    100% {
        transform: translate(-4%, -2%) scale(1);
    }
}

@keyframes slowFloatTwo {
    0% {
        transform: translate(3%, 4%) scale(1.05);
    }

    50% {
        transform: translate(-3%, -4%) scale(1);
    }

    100% {
        transform: translate(3%, 4%) scale(1.05);
    }
}


/* ---------- Life at CIINFOS: scoped styles ---------- */
        #life-at-ciinfos { position: relative; }

        #life-at-ciinfos .culture-card {
            transition: opacity .35s ease, transform .35s ease;
        }
        #life-at-ciinfos .culture-card.is-hidden {
            opacity: 0;
            transform: scale(.94);
            pointer-events: none;
        }

        #life-at-ciinfos .culture-card img {
            transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
        }
        #life-at-ciinfos .culture-card:hover img {
            transform: scale(1.08);
        }

        #life-at-ciinfos .culture-overlay {
            opacity: 0;
            transition: opacity .4s ease;
            background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.15) 45%, rgba(10,10,10,.92) 100%);
        }
        #life-at-ciinfos .culture-card:hover .culture-overlay { opacity: 1; }

        #life-at-ciinfos .culture-expand {
            opacity: 0;
            transform: scale(.7);
            transition: opacity .35s ease, transform .35s ease;
        }
        #life-at-ciinfos .culture-card:hover .culture-expand {
            opacity: 1;
            transform: scale(1);
        }

        #life-at-ciinfos .culture-caption {
            transform: translateY(14px);
            opacity: 0;
            transition: opacity .4s ease .05s, transform .4s ease .05s;
        }
        #life-at-ciinfos .culture-card:hover .culture-caption {
            transform: translateY(0);
            opacity: 1;
        }

        /* Masonry row sizing */
        #life-at-ciinfos .culture-grid {
            grid-auto-rows: 130px;
        }
        @media (min-width: 768px) {
            #life-at-ciinfos .culture-grid { grid-auto-rows: 150px; }
        }
        @media (min-width: 1024px) {
            #life-at-ciinfos .culture-grid { grid-auto-rows: 160px; }
        }

        /* Lightbox */
        #culture-lightbox {
            background: rgba(10,10,10,.92);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        #culture-lightbox.lb-open { display: flex; }
        #culture-lightbox .lb-stage {
            opacity: 0;
            transform: scale(.92);
            transition: opacity .35s ease, transform .35s ease;
        }
        #culture-lightbox.lb-show .lb-stage {
            opacity: 1;
            transform: scale(1);
        }
        #culture-lightbox .lb-nav-btn:focus-visible,
        #life-at-ciinfos .gallery-filter-btn:focus-visible,
        #life-at-ciinfos .culture-card:focus-visible,
        #culture-lightbox .lb-close-btn:focus-visible {
            outline: 2px solid #47b2e4;
            outline-offset: 3px;
        }