/**
 * Estilos para single-tiendas.php
 *
 * @package EcomNinja
 */

/* Contenedor de imagen */
#imageContainer {
    position: relative;
    overflow: hidden;
    transition: box-shadow 1s ease;
}

#draggableImage {
    transform-origin: center;
    will-change: transform;
}

/* Efectos de spotlight */
.spotlight-effect {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    mix-blend-mode: overlay;
}

/* Punto de anotacion */
.annotation-point {
    transform-origin: center;
}

/* Texto de anotacion */
.annotation-text {
    transform-origin: left center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Capas de parallax */
.parallax-layer {
    will-change: transform;
    mix-blend-mode: overlay;
}

/* Scrollbar personalizado */
#imageContainer::-webkit-scrollbar {
    width: 5px;
}

#imageContainer::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

#imageContainer::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#imageContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Cursor personalizado */
#imageContainer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v8'%3E%3C/path%3E%3Cpath d='M8 12h8'%3E%3C/path%3E%3C/svg%3E") 12 12, auto;
}

#imageContainer:active {
    cursor: grabbing;
}

/* Animaciones */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes glow {
    0% { filter: drop-shadow(0 0 5px rgba(255,215,0,0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(255,215,0,0.8)); }
    100% { filter: drop-shadow(0 0 5px rgba(255,215,0,0.5)); }
}

.annotation-point {
    animation: pulse 2s infinite;
}

.annotation {
    animation: float 6s ease-in-out infinite;
}

.spotlight-effect {
    animation: glow 4s infinite;
}

/* Estilos para line-clamp */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mejoras para las tarjetas */
.group {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* Transiciones suaves para las imagenes */
.w-full.h-\[120\%\] {
    transition: transform 3s ease-out;
}

/* Mejora para la sombra en hover */
.group:hover {
    box-shadow: 0 10px 25px -5px rgba(251, 191, 36, 0.1), 0 8px 10px -6px rgba(251, 191, 36, 0.1);
}

/* Asegurar que las imagenes se muestren correctamente */
.group img {
    object-fit: cover;
    object-position: top;
}