/* Prevent layout shift during font loading */
body {
    font-display: swap;
}

/* Ensure logo has proper dimensions to prevent layout shift */
.header-logo img {
    width: 2rem;
    height: 2rem;
}

@media (min-width: 1024px) {
    .header-logo img {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Prevent FOUT (Flash of Unstyled Text) */
.header-logo h1,
.header-logo p {
    font-display: swap;
}

/* Slow floating animation for hero tech icons with rotation */
/* Using CSS variables for dynamic rotation per icon */
.ref-hero-tech-icon {
    --icon-scale: 1;
    --icon-rotation: 0deg;
    --icon-rotation-range: 10deg;
}

@keyframes slow-float {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + 0deg)); 
    }
    25% { 
        transform: translateY(-8px) translateX(4px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg))); 
    }
    50% { 
        transform: translateY(-4px) translateX(-2px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg) * 0.6)); 
    }
    75% { 
        transform: translateY(-12px) translateX(6px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg) * 0.8)); 
    }
}

@keyframes slow-float-rotate-1 {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + 0deg)); 
    }
    25% { 
        transform: translateY(-10px) translateX(3px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg) * 0.7)); 
    }
    50% { 
        transform: translateY(-6px) translateX(-3px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg) * 0.9)); 
    }
    75% { 
        transform: translateY(-14px) translateX(5px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg) * 0.5)); 
    }
}

@keyframes slow-float-rotate-2 {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + 0deg)); 
    }
    25% { 
        transform: translateY(-6px) translateX(5px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg))); 
    }
    50% { 
        transform: translateY(-8px) translateX(-4px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg) * 0.8)); 
    }
    75% { 
        transform: translateY(-10px) translateX(7px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg) * 0.6)); 
    }
}

@keyframes slow-float-rotate-3 {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + 0deg)); 
    }
    25% { 
        transform: translateY(-12px) translateX(2px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg) * 0.9)); 
    }
    50% { 
        transform: translateY(-5px) translateX(-5px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg))); 
    }
    75% { 
        transform: translateY(-15px) translateX(4px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg) * 0.7)); 
    }
}

@keyframes slow-float-rotate-4 {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + 0deg)); 
    }
    25% { 
        transform: translateY(-7px) translateX(6px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg) * 0.8)); 
    }
    50% { 
        transform: translateY(-9px) translateX(-3px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) - var(--icon-rotation-range, 10deg))); 
    }
    75% { 
        transform: translateY(-11px) translateX(8px) scale(var(--icon-scale, 1)) rotate(calc(var(--icon-rotation, 0deg) + var(--icon-rotation-range, 10deg) * 0.5)); 
    }
}

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

.animate-slow-float-delay-1 { 
    animation: slow-float-rotate-1 9s ease-in-out infinite; 
    animation-delay: 1s; 
}

.animate-slow-float-delay-2 { 
    animation: slow-float-rotate-2 10s ease-in-out infinite; 
    animation-delay: 2s; 
}

.animate-slow-float-delay-3 { 
    animation: slow-float-rotate-3 7s ease-in-out infinite; 
    animation-delay: 3s; 
}

.animate-slow-float-delay-4 { 
    animation: slow-float-rotate-4 11s ease-in-out infinite; 
    animation-delay: 4s; 
}

/* Brands scroll animation */
.brands-scroll {
    display: flex;
    gap: 2rem;
    animation: scroll 40s linear infinite;
}

.brands-scroll.paused {
    animation-play-state: paused;
}

.grayscale-90 {
    filter: grayscale(90%);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Line clamp utility for testimonial text */
.line-clamp-6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Page transition loader */
.page-transition-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-transition-loader.active {
    opacity: 1;
    pointer-events: auto;
}

.page-transition-loader-circle {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #9ca3af;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Page fadeout effect */
body.page-transitioning {
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.page-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hero CTA Logo */
.ref-hero-cta-logo {
    height: 2rem;
    width: auto;
}