/* Logo Scroller Animation */
.logo-track {
    display: flex;
    animation: scroll 40s linear infinite;
}

.logo-container {
    display: flex;
    gap: 3rem;
    padding: 0 1.5rem;
}

.logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Pause animation on hover */
.logo-track:hover {
    animation-play-state: paused;
}

/* Custom primary color - purple for accent text only */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
}

/* bg-primary should be black, not purple - override Tailwind */
.bg-primary {
    background-color: #000000 !important;
}

.hover\:bg-primary-dark:hover {
    background-color: #1f1f1f !important;
}

.hover\:bg-primary\/90:hover {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* text-primary stays purple for accent text (like "workflow" word) */
.text-primary {
    color: #6366f1 !important;
}

/* text-primary-dark should be dark gray/black for text */
.text-primary-dark {
    color: #1f1f1f !important;
}

/* Ensure text-primary-foreground is white for black backgrounds */
.text-primary-foreground {
    color: #ffffff !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

/* Ensure focus ring stays purple */
.focus\:ring-primary:focus {
    --tw-ring-color: var(--primary) !important;
}

/* Hero image glow animations */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes spin-glow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Hero glow effect layers */
.hero-glow-1 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.4), rgba(99, 102, 241, 0.15));
    filter: blur(40px);
    animation: pulse-glow 3s ease-in-out infinite;
    pointer-events: none;
}

.hero-glow-2 {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3), rgba(244, 114, 182, 0.3), rgba(251, 146, 60, 0.3), rgba(99, 102, 241, 0.3));
    filter: blur(60px);
    animation: spin-glow 6s linear infinite;
    border-radius: 80%;
    pointer-events: none;
}

.hero-glow-3 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(251, 146, 60, 0.25), transparent 70%);
    animation: pulse-glow 4s ease-in-out infinite;
    pointer-events: none;
}

.hero-glow-4 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.2), transparent 70%);
    animation: pulse-glow 5s ease-in-out infinite;
    pointer-events: none;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform 0.9s ease-in-out;
    will-change: transform;
}

.hero-bg-layer.no-transition {
    transition: none !important;
}

.hero-bg-layer.is-active {
    transform: translateX(0%);
}

.hero-bg-layer.is-left {
    transform: translateX(-100%);
}

.hero-bg-layer.is-right {
    transform: translateX(100%);
}

html,
body {
    overflow-x: hidden;
}