/* ============================================================
   HuertoRentable - Sistema de Animaciones v1.0
   Módulo independiente y modular de animaciones
   
   CÓMO USAR:
   - Añadir clases de animación a los elementos HTML
   - Las animaciones se activan automáticamente o por scroll
   - Para modificar: cambiar solo las variables de este archivo
   
   CLASES DISPONIBLES:
   - .anim-fade-in        → Aparece con opacidad
   - .anim-slide-up       → Sube desde abajo
   - .anim-slide-down     → Baja desde arriba
   - .anim-slide-left     → Entra desde la derecha
   - .anim-slide-right    → Entra desde la izquierda
   - .anim-scale-in       → Escala desde pequeño
   - .anim-bounce-in      → Efecto rebote
   - .anim-blur-in        → Desenfoque a foco
   - .anim-float           → Flotación continua
   - .anim-pulse           → Pulso continuo
   - .anim-shimmer         → Brillo pasante
   - .anim-stagger         → Uso con .anim-stagger-item
   - .hover-lift           → Eleva al pasar el ratón
   - .hover-glow           → Brillo al pasar el ratón
   - .hover-scale          → Escala al pasar el ratón
   ============================================================ */

/* --- Variables de animación (modificar aquí para cambiar globalmente) --- */
:root {
    /* Duraciones */
    --anim-duration-fast: 0.25s;
    --anim-duration-normal: 0.5s;
    --anim-duration-slow: 0.8s;
    --anim-duration-very-slow: 1.2s;

    /* Distancias de desplazamiento */
    --anim-distance-sm: 12px;
    --anim-distance-md: 24px;
    --anim-distance-lg: 40px;

    /* Curvas de easing */
    --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Stagger (retardo entre elementos consecutivos) */
    --anim-stagger-delay: 0.07s;

    /* Escala */
    --anim-scale-start: 0.92;
    --anim-scale-hover: 1.03;
}


/* ============================================================
   KEYFRAMES - Definidos una vez, reutilizados por clases
   ============================================================ */

@keyframes animFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes animSlideUp {
    from { opacity: 0; transform: translateY(var(--anim-distance-md)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes animSlideDown {
    from { opacity: 0; transform: translateY(calc(var(--anim-distance-md) * -1)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes animSlideLeft {
    from { opacity: 0; transform: translateX(var(--anim-distance-md)); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes animSlideRight {
    from { opacity: 0; transform: translateX(calc(var(--anim-distance-md) * -1)); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes animScaleIn {
    from { opacity: 0; transform: scale(var(--anim-scale-start)); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes animBounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes animBlurIn {
    from { opacity: 0; filter: blur(8px); transform: scale(0.96); }
    to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}

@keyframes animFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes animPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.05); opacity: 0.85; }
}

@keyframes animShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

@keyframes animCheckmark {
    0%   { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
}

@keyframes animRipple {
    0%   { transform: scale(0); opacity: 0.6; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes animSpinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes animShake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-4px); }
    30%, 70% { transform: translateX(4px); }
}


/* ============================================================
   CLASES DE ENTRADA - Se activan cuando se hacen visibles
   ============================================================ */

/* Estado inicial: escondidos */
.anim-fade-in,
.anim-slide-up,
.anim-slide-down,
.anim-slide-left,
.anim-slide-right,
.anim-scale-in,
.anim-bounce-in,
.anim-blur-in {
    opacity: 0;
}

/* Cuando son visibles (JS añade .is-visible o se usa .anim-auto) */
.anim-fade-in.is-visible,
.anim-fade-in.anim-auto {
    animation: animFadeIn var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-slide-up.is-visible,
.anim-slide-up.anim-auto {
    animation: animSlideUp var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-slide-down.is-visible,
.anim-slide-down.anim-auto {
    animation: animSlideDown var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-slide-left.is-visible,
.anim-slide-left.anim-auto {
    animation: animSlideLeft var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-slide-right.is-visible,
.anim-slide-right.anim-auto {
    animation: animSlideRight var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-scale-in.is-visible,
.anim-scale-in.anim-auto {
    animation: animScaleIn var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-bounce-in.is-visible,
.anim-bounce-in.anim-auto {
    animation: animBounceIn var(--anim-duration-slow) var(--anim-ease-spring) forwards;
}

.anim-blur-in.is-visible,
.anim-blur-in.anim-auto {
    animation: animBlurIn var(--anim-duration-slow) var(--anim-ease-out) forwards;
}


/* ============================================================
   ANIMACIONES CONTINUAS - Siempre activas
   ============================================================ */

.anim-float {
    animation: animFloat 3s ease-in-out infinite;
}

.anim-pulse {
    animation: animPulse 2s ease-in-out infinite;
}

.anim-spin {
    animation: animSpinSlow 8s linear infinite;
}

.anim-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: animShimmer 2s ease-in-out infinite;
}


/* ============================================================
   STAGGER - Retardo automático entre hermanos
   Uso: <div class="anim-stagger"><div class="anim-stagger-item">...</div></div>
   ============================================================ */

.anim-stagger .anim-stagger-item {
    opacity: 0;
    animation: animSlideUp var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

.anim-stagger .anim-stagger-item:nth-child(1)  { animation-delay: calc(var(--anim-stagger-delay) * 1); }
.anim-stagger .anim-stagger-item:nth-child(2)  { animation-delay: calc(var(--anim-stagger-delay) * 2); }
.anim-stagger .anim-stagger-item:nth-child(3)  { animation-delay: calc(var(--anim-stagger-delay) * 3); }
.anim-stagger .anim-stagger-item:nth-child(4)  { animation-delay: calc(var(--anim-stagger-delay) * 4); }
.anim-stagger .anim-stagger-item:nth-child(5)  { animation-delay: calc(var(--anim-stagger-delay) * 5); }
.anim-stagger .anim-stagger-item:nth-child(6)  { animation-delay: calc(var(--anim-stagger-delay) * 6); }
.anim-stagger .anim-stagger-item:nth-child(7)  { animation-delay: calc(var(--anim-stagger-delay) * 7); }
.anim-stagger .anim-stagger-item:nth-child(8)  { animation-delay: calc(var(--anim-stagger-delay) * 8); }
.anim-stagger .anim-stagger-item:nth-child(9)  { animation-delay: calc(var(--anim-stagger-delay) * 9); }
.anim-stagger .anim-stagger-item:nth-child(10) { animation-delay: calc(var(--anim-stagger-delay) * 10); }
.anim-stagger .anim-stagger-item:nth-child(11) { animation-delay: calc(var(--anim-stagger-delay) * 11); }
.anim-stagger .anim-stagger-item:nth-child(12) { animation-delay: calc(var(--anim-stagger-delay) * 12); }


/* ============================================================
   DELAYS MANUALES - Para controlar el orden
   ============================================================ */

.anim-delay-1 { animation-delay: 0.1s !important; }
.anim-delay-2 { animation-delay: 0.2s !important; }
.anim-delay-3 { animation-delay: 0.3s !important; }
.anim-delay-4 { animation-delay: 0.4s !important; }
.anim-delay-5 { animation-delay: 0.5s !important; }
.anim-delay-6 { animation-delay: 0.6s !important; }
.anim-delay-7 { animation-delay: 0.7s !important; }
.anim-delay-8 { animation-delay: 0.8s !important; }


/* ============================================================
   HOVER EFFECTS - Interacciones al pasar el ratón
   ============================================================ */

.hover-lift {
    transition: transform var(--anim-duration-fast) var(--anim-ease-out),
                box-shadow var(--anim-duration-fast) var(--anim-ease-out);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hover-glow {
    transition: box-shadow var(--anim-duration-fast) var(--anim-ease-out);
}
.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

.hover-scale {
    transition: transform var(--anim-duration-fast) var(--anim-ease-spring);
}
.hover-scale:hover {
    transform: scale(var(--anim-scale-hover));
}

.hover-bright {
    transition: filter var(--anim-duration-fast) ease;
}
.hover-bright:hover {
    filter: brightness(1.08);
}


/* ============================================================
   MICRO-INTERACCIONES - Feedback visual sutil
   ============================================================ */

/* Efecto ripple en botones */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}
.ripple:active::after {
    animation: animRipple 0.6s ease-out;
}

/* Shake para errores */
.anim-shake {
    animation: animShake 0.6s ease-in-out;
}

/* Número que sube (para contadores) */
.anim-count {
    animation: animCountUp 0.4s var(--anim-ease-out) forwards;
}


/* ============================================================
   SUCCESS FEEDBACK - Confirmación visual
   ============================================================ */

@keyframes animSuccessPop {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.anim-success {
    animation: animSuccessPop 0.5s var(--anim-ease-spring) forwards;
}


/* ============================================================
   SKELETON LOADING - Placeholder animado
   ============================================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-inset) 25%,
        var(--surface-hover) 50%,
        var(--surface-inset) 75%
    );
    background-size: 200% 100%;
    animation: animShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}
.skeleton-circle {
    border-radius: 50%;
}


/* ============================================================
   PREFERENCIAS DE USUARIO - Respetar reducción de movimiento
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .anim-fade-in,
    .anim-slide-up,
    .anim-slide-down,
    .anim-slide-left,
    .anim-slide-right,
    .anim-scale-in,
    .anim-bounce-in,
    .anim-blur-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}