/* Base overrides and extra utilities not covered by Tailwind CDN easily */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar for brand marquee */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Floating animation for hero camera */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.floating-anim {
    animation: float 8s ease-in-out infinite;
}

/* Custom background for the placeholder camera if no asset is available.
   The mockup showed a beautiful light floating HIKVISION dome/bullet camera.
   We can style the placeholder div slightly to make it look decent if the image fails. */
.hero-cctv-placeholder {
    /* Only visible if image is missing */
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 70%);
    border-radius: 50%;
    box-shadow: inset -10px -10px 40px rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.5);
    z-index: 10;
}

/* Since we use real image via CDN in index.html for placeholder, hide the div fallback */
.hero-cctv-img {
    z-index: 20;
    opacity: 1 !important; /* Force opacity to show the unpslash placeholder */
    filter: drop-shadow(0 30px 30px rgba(0,0,0,0.6));
}

.hero-cctv-img[src] + .hero-cctv-placeholder {
    display: none;
}