/*
Theme Name: LSRI Custom Theme
Theme URI: https://lsri.uk
Author: LSRI Dev Team
Author URI: https://lsri.uk
Description: Custom WordPress theme migrated from React/Vite application.
Version: 1.0.0
License: Proprietary
Text Domain: lsri-theme
*/

/* 
 * This theme relies on Tailwind CSS compiled from the source React application.
 * All styles are loaded via the enqueued assets in functions.php.
 */

/* =========================================
   Missing Utility & Animation Classes
   (Restoring classes that might be purged or custom)
   ========================================= */

/* Opacity & Transform Overrides */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1 !important;
}

.translate-y-8 {
    transform: translateY(2rem);
}

.translate-y-0 {
    transform: translateY(0) !important;
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1) !important;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-700 {
    transition-duration: 700ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.delay-200 {
    transition-delay: 200ms;
}

/* Custom Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes infinite-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.animate-infinite-scroll {
    display: flex;
    width: max-content;
    animation: infinite-scroll 60s linear infinite;
}

.logo-carousel-mask {
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Ensure Alpine x-cloak works if used (optional) */
[x-cloak] {
    display: none !important;
}

/* =========================================
   Layout Utilities
   ========================================= */
.container-custom {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    max-width: 1280px;
    /* equivalent to max-w-7xl */
}

@media (min-width: 640px) {
    .container-custom {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-custom {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

/* =========================================
   Typography Overrides
   (Assuming Inter/system fonts if custom fonts missing)
   ========================================= */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.font-display {
    font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}