/* ============================================
   SEZIONE LOGHI FORNITORI ANIMATI
   Estratto da loghi.html
   ============================================ */
/* ============================================
   SEZIONE LOGHI FORNITORI ANIMATI
   ============================================ */

.marche-section {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Override container width specifically for this section */
.marche-section .container {
    max-width: 85%;
    width: 100%;
    padding: 0 10px;
}

/* Titoli centrati e colorati */
.marche-title {
    text-align: center;
    color: #017f7c;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.marche-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
}

.logo-row 
{ display:flex; 
    justify-content:space-between;
     align-items:center; gap:10px; 
     width: 100%;
 }
.logo-slot
 { 
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            position: relative;
            overflow: hidden;
 }

/* logo-box: garantisce stacking, will-change per performance */
.logo-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    white-space: nowrap;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.6s ease, filter 0.6s ease;
    will-change: transform, opacity;
    z-index: 1;
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.logo-box.transparent-bg {
    background: transparent !important;
    box-shadow: none;
    padding: 0;
}

.logo-box.transparent-bg img { height: 100%; width: auto; }

/* entry/exit classes: assicurati che il box in entrata sia sopra quello uscente */
.logo-box.fade-in { transform: translateY(120px) scale(0.9); opacity: 0; filter: blur(8px); z-index: 3; }
.logo-box.fade-in-active { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); z-index: 3; }
.logo-box.fade-out { transform: translateY(-120px) scale(0.9); opacity: 0; filter: blur(8px); z-index: 2; }

/* responsive fallback - mantiene layout come prima */
@media (max-width: 1024px) {
    .logo-row { display: grid; grid-template-columns: repeat(3,1fr); gap:15px; }
    .logo-slot { height:75px; }
}

@media (max-width: 600px) {
    .marche-section .container { padding: 0 5px; }
    .logo-row { grid-template-columns: repeat(2,1fr); gap:10px; }
    .logo-slot { height:70px; }
    .logo-box { font-size: 11px; padding: 5px; }
}