/* main.css */

body {
    background-color: #141716; /* Your New Black */
    color: #E2E8F0;
    overflow-x: hidden;
}

/* Gradient Text Helper */
.text-gradient {
    /* Updated gradient to use your new Yellow (#FBD40C) */
    background: linear-gradient(to right, #FBD40C, #FFF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Search Input */
.search-container {
    background: rgba(255, 255, 255, 0.03); /* Slightly more transparent */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}
.search-container:focus-within {
    border-color: #FBD40C; /* Your New Yellow */
    background: rgba(255, 255, 255, 0.05);
    /* Updated shadow glow to match new yellow */
    box-shadow: 0 0 20px rgba(251, 212, 12, 0.1); 
}

/* --- ANIMATIONS --- */

/* --- UPDATED ANIMATION --- */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* CRITICAL FIX: Must be -50%, not -100% */
}

.animate-scroll {
    display: flex;       /* Ensures the two logo groups sit side-by-side */
    width: max-content;  /* Forces the box to be wide enough to hold both groups */
    animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

/* --- CUSTOM UTILITIES --- */

/* Gradient Text Helper */
.text-gradient {
    background: linear-gradient(to right, #FBD40C, #FFF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism Search Container */
.search-container {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.search-container:focus-within {
    border-color: #FBD40C;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(251, 212, 12, 0.1); 
}

/* Hide Scrollbar for horizontal scrolling containers (if any) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* main.css - Append this at the end */

/* --- 3D BOX ANIMATIONS (Smart Logistics Box) --- */

/* Rotates the box in 3D space */
@keyframes floatSpin {
    0% { transform: rotateX(-15deg) rotateY(0deg); }
    100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* Moves the laser scanner up and down */
@keyframes scanLaser {
    0% { top: 10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 90%; opacity: 0; }
}

/* --- NEW FRANCHISE SIDEBAR PROGRESS STYLES --- */

/* Active Step Indicator */
.step-indicator.active .step-icon-number {
    color: #141716; /* Black */
}

.step-indicator.active > div { /* Target the w-16 h-16 circle */
    border-color: #FBD40C !important; /* Gold border */
    background-color: #FBD40C !important; /* Gold background */
    box-shadow: 0 0 15px rgba(251, 212, 12, 0.6);
    transform: scale(1.1); /* Slight pop effect */
}

.step-indicator.active .step-indicator-title {
    opacity: 100%;
    color: #FBD40C; /* Gold text */
}

/* Ensure smooth transition for all elements */
.step-indicator > div,
.step-indicator .step-icon-number,
.step-indicator .step-indicator-title {
    transition: all 0.3s ease;
}

/* Mobile home hero: hide the copy overlapping the Earth globe so the animation shows
   cleanly on small screens (ClickUp 86d3mtc5g). Copy still shows on lg+ desktop. */
@media (max-width: 1023px) {
    .hero-hide-mobile { display: none !important; }
}