/**
 * Page Builder Dynamic Styles
 * Styles for dynamically generated section styles from the page builder
 */

/* Animation Classes */
[data-animation] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-animation].animated {
    opacity: 1;
}

/* Fade Animations */
[data-animation="fade"] {
    animation: fadeIn 0.8s ease forwards;
}

[data-animation="fade-up"] {
    animation: fadeUp 0.8s ease forwards;
}

[data-animation="fade-down"] {
    animation: fadeDown 0.8s ease forwards;
}

[data-animation="fade-left"] {
    animation: fadeLeft 0.8s ease forwards;
}

[data-animation="fade-right"] {
    animation: fadeRight 0.8s ease forwards;
}

/* Zoom Animations */
[data-animation="zoom-in"] {
    animation: zoomIn 0.8s ease forwards;
}

[data-animation="zoom-out"] {
    animation: zoomOut 0.8s ease forwards;
}

/* Slide Animations */
[data-animation="slide-up"] {
    animation: slideUp 0.8s ease forwards;
}

[data-animation="slide-down"] {
    animation: slideDown 0.8s ease forwards;
}

/* Flip Animations */
[data-animation="flip-left"] {
    animation: flipLeft 0.8s ease forwards;
}

[data-animation="flip-right"] {
    animation: flipRight 0.8s ease forwards;
}

/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flipLeft {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0);
    }
}

@keyframes flipRight {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0);
    }
}

/* Animation with Intersection Observer support */
section[data-animation] {
    opacity: 0;
}

section[data-animation].in-view {
    opacity: 1;
}

/* Responsive visibility utilities (Bootstrap compatible) */
@media (max-width: 767.98px) {
    .d-md-block {
        display: block !important;
    }
    .d-md-none {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .d-md-block {
        display: block !important;
    }
    .d-md-none {
        display: none !important;
    }
}