/* ==========================================================================
   Angelica Grace Home - Keyframes and Screen Transitions
   ========================================================================== */

/* Zoom In Modal */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll Reveal Classes */
.reveal {
    opacity: 1;
    transform: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

/* Animations Variations when initializing reveal */
.js-reveal .reveal-up {
    transform: translateY(30px);
    opacity: 0;
}

.js-reveal .reveal-left {
    transform: translateX(30px);
    opacity: 0;
}

.js-reveal .reveal-right {
    transform: translateX(-30px);
    opacity: 0;
}

.js-reveal .reveal-scale {
    transform: scale(0.95);
    opacity: 0;
}

/* Visible States */
.reveal.active,
.reveal.reveal-visible,
.js-reveal .reveal.active,
.js-reveal .reveal.reveal-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Pulse Effect for Floating CTAs */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 90, 150, 0.4);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(0, 90, 150, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 90, 150, 0);
    }
}

@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.btn-phone {
    animation: pulse 2s infinite;
}

.btn-whatsapp {
    animation: pulse-whatsapp 2s infinite;
}

/* Hover Zoom for Images in Grid Layouts */
.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-zoom:hover img {
    transform: scale(1.08);
}