/**
 * Estilos del frontend - Bento Box Generator
 */

.bbg-bento-box {
    width: 100%;
    box-sizing: border-box;
}

.bbg-bento-box *,
.bbg-bento-box *::before,
.bbg-bento-box *::after {
    box-sizing: border-box;
}

.bbg-item {
    position: relative;
    overflow: hidden;
}

.bbg-item-bg {
    will-change: transform;
}

.bbg-item-link {
    text-decoration: none;
}

.bbg-item-link:focus {
    outline: 2px solid rgba(124, 58, 237, 0.5);
    outline-offset: 2px;
}

/* Animaciones */
.bbg-animate {
    opacity: 0;
}

.bbg-animate.bbg-visible {
    animation-duration: var(--bbg-duration, 600ms);
    animation-delay: var(--bbg-delay, 0ms);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade Up */
.bbg-fade-up {
    transform: translateY(40px);
}

.bbg-fade-up.bbg-visible {
    animation-name: bbgFadeUp;
}

@keyframes bbgFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Down */
.bbg-fade-down {
    transform: translateY(-40px);
}

.bbg-fade-down.bbg-visible {
    animation-name: bbgFadeDown;
}

@keyframes bbgFadeDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Left */
.bbg-fade-left {
    transform: translateX(40px);
}

.bbg-fade-left.bbg-visible {
    animation-name: bbgFadeLeft;
}

@keyframes bbgFadeLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Right */
.bbg-fade-right {
    transform: translateX(-40px);
}

.bbg-fade-right.bbg-visible {
    animation-name: bbgFadeRight;
}

@keyframes bbgFadeRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
.bbg-zoom-in {
    transform: scale(0.85);
}

.bbg-zoom-in.bbg-visible {
    animation-name: bbgZoomIn;
}

@keyframes bbgZoomIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip */
.bbg-flip {
    transform: perspective(600px) rotateY(90deg);
}

.bbg-flip.bbg-visible {
    animation-name: bbgFlip;
}

@keyframes bbgFlip {
    to {
        opacity: 1;
        transform: perspective(600px) rotateY(0);
    }
}

/* Reducir movimiento para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
    .bbg-animate {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}