/*
 * carousel-image-fix.css
 * ------------------------------------------------------------------
 * Solucion definitiva al pixelado y efecto "dientes de sierra" en
 * imagenes .webp dentro de los contenedores de carrusel.
 *
 * Problemas que resuelve:
 *  1. image-rendering incorrecto (interpolacion bilineal por defecto).
 *  2. Falta de aislamiento de capa GPU en <img>.
 *  3. Subpixel bleeding por transform-style:preserve-3d en ancestros.
 * ------------------------------------------------------------------
 */

/* =================================================================
   1. CALIDAD DE RENDERIZADO — todas las imagenes de carrusel
   ================================================================= */

.skewed-carousel__card img,
.depth-carousel__item img,
.stack-card img,
.circular-gallery__item img,
.ag-panel__media img,
.equip-slide,
.equipment-img-wrapper img {

    /* Algoritmo de escala nitido: evita borroneo bilineal */
    
    

    /* Previene renderizado de cara posterior en contexto preserve-3d */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Promueve la imagen a su propio compositor layer.
       El GPU mueve el layer ya rasterizado sin re-interpolar pixeles. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    /* Avisa al browser que este elemento sera transformado */
    will-change: transform;
}

/* =================================================================
   2. AISLAMIENTO DE CONTEXTO — contenedores de cards/tiles
   ================================================================= */

.skewed-carousel__card,
.depth-carousel__item,
.stack-card,
.circular-gallery__item {
    contain: layout style;
    isolation: isolate;
}

/* ANTI-ALIASING FIX PARA BORDES REDONDEADOS EN 3D (Comunidad Studio Latam) */
.skewed-carousel__card {
    /* Forzar anti-aliasing de los bordes (Chrome/Safari 3D border-radius bug) */
    outline: 1px solid transparent;
    -webkit-font-smoothing: antialiased;
    /* Evitar que preserve-3d rompa el anti-aliasing del overflow: hidden */
    transform-style: flat !important;
}

/* drift-wall usa background-image (no <img>), se aplica al tile */
.drift-wall__tile {
    contain: layout style;
    isolation: isolate;
    
    
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* =================================================================
   3. ACCORDION GALLERY — manejo especial por GSAP
   ================================================================= */

.ag-panel__frame,
.ag-panel__media {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ag-panel__media img {
    
    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* will-change:contents evita conflicto con GSAP que controla el transform */
    will-change: contents;
}

/* =================================================================
   4. HOVER DRIFT-WALL — reemplazar scale() decimal por translateZ
   ================================================================= */

/*
 * scale(1.05) sobre un tile de 132px de alto genera 138.6px (decimal).
 * Se reemplaza por translateZ(60px) que da el mismo efecto "zoom hacia
 * adelante" en perspectiva SIN cambiar las dimensiones CSS del elemento.
 */
.drift-wall__tile:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    transform: translateZ(60px) !important;
}

/* =================================================================
   5. MODO DIA — mantener calidad bajo cambio de tema
   ================================================================= */

body.modo-dia .skewed-carousel__card img,
body.modo-dia .depth-carousel__item img,
body.modo-dia .stack-card img,
body.modo-dia .circular-gallery__item img,
body.modo-dia .ag-panel__media img,
body.modo-dia .equip-slide,
body.modo-dia .equipment-img-wrapper img {
    
    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}