/**
 * HERO SLIDER - ANIMACIONES MEJORADAS (OPCIONAL)
 * 
 * Este archivo es OPCIONAL. Agrega animaciones adicionales al hero-slider.
 * 
 * INSTALACIÓN:
 * 1. Copia este contenido a: public/css/hero-slider.css
 * 2. En tu layout principal (app.blade.php), agrega:
 *    <link rel="stylesheet" href="{{ asset('css/hero-slider.css') }}">
 */

/* ============================================
   ANIMACIONES PERSONALIZADAS DEL SLIDER
   ============================================ */

/* Animación de Zoom suave en las imágenes de fondo */
@keyframes heroZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

.hero-slide-active {
    animation: heroZoom 8s ease-in-out infinite alternate;
}

/* Animación de Fade In para el texto */
@keyframes heroFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-text-animate {
    animation: heroFadeInUp 0.8s ease-out;
}

/* Animación de Pulse para los botones CTA */
@keyframes heroPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(251, 191, 36, 0);
    }
}

.hero-cta-pulse {
    animation: heroPulse 2s infinite;
}

/* Hover effect mejorado para el formulario */
.hero-form-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-form-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Efecto de Shimmer en inputs al hacer focus */
.hero-input-shimmer:focus {
    position: relative;
    overflow: hidden;
}

.hero-input-shimmer:focus::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Animación de los controles de navegación */
.hero-nav-button {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.hero-nav-button:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.4);
}

.hero-nav-button:active {
    transform: scale(0.95);
}

/* Indicadores de slide con animación */
.hero-slide-indicator {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide-indicator-active {
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

/* Efecto de Glassmorphism mejorado para el formulario */
.hero-glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Overlay gradient mejorado */
.hero-overlay-gradient {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.95) 0%,
        rgba(29, 78, 216, 0.85) 50%,
        transparent 100%
    );
}

/* Animación de entrada para las estadísticas */
@keyframes heroStatsSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-stats-badge {
    animation: heroStatsSlideIn 0.6s ease-out;
    animation-fill-mode: both;
}

.hero-stats-badge:nth-child(1) {
    animation-delay: 0.2s;
}

.hero-stats-badge:nth-child(2) {
    animation-delay: 0.4s;
}

/* Efecto de brillo en las estrellas de rating */
@keyframes heroStarGlow {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 1));
    }
}

.hero-star-icon {
    animation: heroStarGlow 2s ease-in-out infinite;
}

/* Transición suave para las categorías */
.hero-category-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-category-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
}

.hero-category-card img {
    transition: transform 0.3s ease;
}

.hero-category-card:hover img {
    transform: scale(1.15) rotate(5deg);
}

/* Loading skeleton para mientras cargan las imágenes */
@keyframes heroSkeletonLoading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.hero-skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: heroSkeletonLoading 1.5s ease-in-out infinite;
}

/* Responsive improvements */
@media (max-width: 1024px) {
    .hero-form-card {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero-text-animate h1 {
        font-size: 2.5rem;
    }
    
    .hero-stats-badge {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Dark mode support (si lo implementas en el futuro) */
@media (prefers-color-scheme: dark) {
    .hero-glass-effect {
        background: rgba(17, 24, 39, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .hero-overlay-gradient {
        background: linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.95) 0%,
            rgba(31, 41, 55, 0.85) 50%,
            transparent 100%
        );
    }
}

/* Accesibilidad: Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .hero-slide-active,
    .hero-text-animate,
    .hero-cta-pulse,
    .hero-stats-badge,
    .hero-star-icon {
        animation: none;
    }
    
    .hero-form-card:hover,
    .hero-nav-button:hover,
    .hero-category-card:hover {
        transform: none;
    }
}

/* ============================================
   CLASES DE UTILIDAD PARA EL HERO
   ============================================ */

/* Gradientes de texto */
.hero-text-gradient {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text-gradient-gold {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sombras mejoradas */
.hero-shadow-soft {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.hero-shadow-medium {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hero-shadow-hard {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

/* Bordes con gradiente */
.hero-border-gradient {
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.hero-border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ============================================
   MEJORAS OPCIONALES DEL FORMULARIO
   ============================================ */

/* Input con icono animado */
.hero-input-with-icon {
    position: relative;
}

.hero-input-with-icon svg {
    transition: all 0.3s ease;
}

.hero-input-with-icon:focus-within svg {
    color: #3B82F6;
    transform: scale(1.1);
}

/* Botón de envío con loading state */
.hero-submit-button {
    position: relative;
    overflow: hidden;
}

.hero-submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.hero-submit-button:hover::before {
    left: 100%;
}

/* DatePicker con animación mejorada */
.hero-datepicker-modal {
    transform-origin: top;
    animation: heroDatepickerSlideDown 0.3s ease-out;
}

@keyframes heroDatepickerSlideDown {
    0% {
        opacity: 0;
        transform: scaleY(0.95) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

/* Días del calendario con hover mejorado */
.hero-calendar-day {
    position: relative;
    transition: all 0.2s ease;
}

.hero-calendar-day:hover::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: inherit;
    z-index: -1;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Usar will-change para animaciones suaves */
.hero-slide-active,
.hero-nav-button,
.hero-category-card {
    will-change: transform;
}

/* GPU acceleration para transiciones */
.hero-form-card,
.hero-text-animate {
    transform: translateZ(0);
    backface-visibility: hidden;
}