/* Animaciones Florales - Shekinah Theme */
/* Agregar movimiento dinámico a elementos decorativos florales */

/* ========================
   ANIMACIONES KEYFRAMES
   ======================== */

/* Flotación suave - movimiento vertical */
@keyframes floral-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(2deg);
    }
    50% {
        transform: translateY(-8px) rotate(0deg);
    }
    75% {
        transform: translateY(-20px) rotate(-2deg);
    }
}

/* Balanceo suave - rotación */
@keyframes floral-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(8deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-8deg);
    }
}

/* Pulso de brillo */
@keyframes floral-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Escala suave */
@keyframes floral-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* Brillo/destello */
@keyframes floral-shine {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
    100% {
        filter: brightness(1);
    }
}

/* Flotación diagonal */
@keyframes floral-float-diagonal {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(10px, -15px) rotate(5deg);
    }
    66% {
        transform: translate(-5px, -10px) rotate(-3deg);
    }
}

/* Vibración suave */
@keyframes floral-wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(-3deg);
    }
    20% {
        transform: rotate(3deg);
    }
    30% {
        transform: rotate(-2deg);
    }
    40% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(0deg);
    }
}

/* Aparición gradual */
@keyframes floral-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================
   CLASES DE ANIMACIÓN
   ======================== */

/* Animación de flotación principal */
.floral-float {
    animation: floral-float 6s ease-in-out infinite;
}

/* Animación de balanceo */
.floral-sway {
    animation: floral-sway 5s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Pulso de opacidad/escala */
.floral-pulse {
    animation: floral-pulse 4s ease-in-out infinite;
}

/* Escala suave */
.floral-scale {
    animation: floral-scale 5s ease-in-out infinite;
}

/* Efecto de brillo */
.floral-shine {
    animation: floral-shine 3s ease-in-out infinite;
}

/* Flotación diagonal */
.floral-float-diagonal {
    animation: floral-float-diagonal 7s ease-in-out infinite;
}

/* Vibración suave */
.floral-wiggle {
    animation: floral-wiggle 2s ease-in-out infinite;
}

/* Aparición gradual */
.floral-fade-in {
    animation: floral-fade-in 1.5s ease-out forwards;
}

/* Combinación de animaciones */
.floral-float-sway {
    animation: floral-float 6s ease-in-out infinite, floral-sway 5s ease-in-out infinite;
}

.floral-float-pulse {
    animation: floral-float 6s ease-in-out infinite, floral-pulse 4s ease-in-out infinite;
}

/* ========================
   POSICIONAMIENTO Y VARIANTES
   ======================== */

/* Flores de esquina - movimientos diferentes */
.floral-top-left {
    animation: floral-float-diagonal 8s ease-in-out infinite;
    animation-delay: 0s;
}

.floral-top-right {
    animation: floral-float 7s ease-in-out infinite;
    animation-delay: 1s;
}

.floral-bottom-left {
    animation: floral-sway 6s ease-in-out infinite;
    animation-delay: 0.5s;
}

.floral-bottom-right {
    animation: floral-float-diagonal 9s ease-in-out infinite;
    animation-delay: 1.5s;
    animation-direction: reverse;
}

/* Flores decorativas pequeñas */
.floral-small-1 {
    animation: floral-pulse 3s ease-in-out infinite;
    animation-delay: 0s;
}

.floral-small-2 {
    animation: floral-scale 4s ease-in-out infinite;
    animation-delay: 0.7s;
}

.floral-small-3 {
    animation: floral-shine 3.5s ease-in-out infinite;
    animation-delay: 1.2s;
}

/* Decoración hero - movimiento más pronunciado */
.floral-hero {
    animation: floral-float-sway 8s ease-in-out infinite;
}

/* Decoración de sección - movimiento sutil */
.floral-section {
    animation: floral-float 10s ease-in-out infinite;
}

/* ========================
   EFECTOS HOVER
   ======================== */

/* Efecto al pasar el mouse */
.floral-hover:hover {
    animation: floral-wiggle 0.5s ease-in-out;
    cursor: pointer;
}

/* Escalar al pasar */
.floral-hover-scale:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* ========================
   RESPONSIVE
   ======================== */

/* En móvil, reducir las animaciones */
@media (max-width: 768px) {
    .floral-float,
    .floral-float-diagonal {
        animation-duration: 10s;
        animation-name: floral-float;
    }
    
    .floral-sway {
        animation-duration: 8s;
    }
    
    /* Reducir el movimiento */
    @keyframes floral-float {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-8px) rotate(1deg);
        }
    }
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .floral-float,
    .floral-sway,
    .floral-pulse,
    .floral-scale,
    .floral-shine,
    .floral-float-diagonal,
    .floral-wiggle,
    .floral-float-sway,
    .floral-float-pulse,
    .floral-top-left,
    .floral-top-right,
    .floral-bottom-left,
    .floral-bottom-right,
    .floral-small-1,
    .floral-small-2,
    .floral-small-3,
    .floral-hero,
    .floral-section {
        animation: none !important;
    }
}

/* ========================
   CONTENEDORES FLORALES
   ======================== */

/* Contenedor base para decoraciones */
.floral-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

/* Asegurar que las animaciones no interfieran con clicks */
.floral-clickable {
    pointer-events: auto;
}

/* Contenedor de hero con flores */
.hero-floral-container {
    position: relative;
    overflow: visible;
}

.hero-floral-container .floral-decoration {
    width: 120px;
    height: 120px;
}

/* Contenedor de sección con flores */
.section-floral-container {
    position: relative;
}

.section-floral-container .floral-decoration {
    width: 80px;
    height: 80px;
    opacity: 0.6;
}