/**
 * Effetto Ingranaggio Rotante con Scroll
 * Per Ritrovo - Biblioteca degli Oggetti
 * 
 * UTILIZZO:
 * Aggiungi questo CSS alla tua pagina e usa le classi .rotating-gear-left o .rotating-gear-right
 */

/* ============================================
   CONTENITORE INGRANAGGIO
   ============================================ */

.rotating-gear-container {
    position: absolute;
    width: 400px;
    height: 400px;
    z-index: 1;
    pointer-events: none; /* Non interferisce con i click */
    overflow: hidden;
}

/* Posizionamento a SINISTRA */
.rotating-gear-left {
    left: -200px; /* Metà fuori dallo schermo */
}

/* Posizionamento a DESTRA */
.rotating-gear-right {
    right: -200px; /* Metà fuori dallo schermo */
}

/* Varianti di posizionamento verticale */
.rotating-gear-top {
    top: 0;
}

.rotating-gear-middle {
    top: 50%;
    transform: translateY(-50%);
}

.rotating-gear-bottom {
    bottom: 0;
}

/* ============================================
   IMMAGINE INGRANAGGIO
   ============================================ */

.rotating-gear-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.1s linear;
    transform-origin: center center;
    opacity: 0.3; /* Semitrasparente per effetto sfondo */
}

/* Variante più visibile */
.rotating-gear-container.visible img {
    opacity: 0.6;
}

/* Variante molto sfumata */
.rotating-gear-container.subtle img {
    opacity: 0.15;
}

/* ============================================
   DIMENSIONI ALTERNATIVE
   ============================================ */

/* Ingranaggio piccolo */
.rotating-gear-small {
    width: 250px;
    height: 250px;
}

.rotating-gear-small.rotating-gear-left {
    left: -125px;
}

.rotating-gear-small.rotating-gear-right {
    right: -125px;
}

/* Ingranaggio grande */
.rotating-gear-large {
    width: 600px;
    height: 600px;
}

.rotating-gear-large.rotating-gear-left {
    left: -300px;
}

.rotating-gear-large.rotating-gear-right {
    right: -300px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .rotating-gear-container {
        width: 300px;
        height: 300px;
    }
    
    .rotating-gear-left {
        left: -150px;
    }
    
    .rotating-gear-right {
        right: -150px;
    }
}

@media (max-width: 768px) {
    .rotating-gear-container {
        width: 200px;
        height: 200px;
    }
    
    .rotating-gear-left {
        left: -100px;
    }
    
    .rotating-gear-right {
        right: -100px;
    }
    
    .rotating-gear-large,
    .rotating-gear-small {
        width: 200px;
        height: 200px;
    }
}

/* Nascondi su schermi molto piccoli */
@media (max-width: 480px) {
    .rotating-gear-container {
        display: none;
    }
}

/* ============================================
   EFFETTI AGGIUNTIVI
   ============================================ */

/* Blur leggero per effetto sfocato */
.rotating-gear-blur img {
    filter: blur(2px);
}

/* Colorazione personalizzata */
.rotating-gear-colored img {
    filter: brightness(1.2) saturate(1.3);
}

/* Effetto ombra */
.rotating-gear-shadow {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
}