/* SPLASH SCREEN ANIMADO - EFECTOS DE LUZ INTENSOS */

/* OCULTAR SPLASH SCREEN DEVEXPRESS ORIGINAL */
.dxbs-splash-screen,
.dx-splash-screen,
[data-dx-splash-screen],
.blazor-splash-screen,
.splash-screen-container,
.splash-screen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}

.animated-splash-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: 
        radial-gradient(circle at 30% 70%, rgba(107, 194, 154, 0.25) 0%, transparent 55%),
        radial-gradient(circle at 70% 30%, rgba(168, 216, 192, 0.20) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(107, 194, 154, 0.15) 0%, transparent 60%),
        linear-gradient(145deg, #eef6f1 0%, #e2ede6 25%, #f0f7f3 50%, #e6efe9 75%, #eef6f1 100%) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    animation: background-shift 15s ease-in-out infinite !important;
}

/* Logo principal */
.splash-logo-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 20 !important;
    width: auto !important;
    height: auto !important;
}

.splash-main-logo {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.20) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
        #5a9b80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 0 40px rgba(90, 155, 128, 0.40),
        0 0 80px rgba(90, 155, 128, 0.20),
        0 0 120px rgba(90, 155, 128, 0.10),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 0 20px rgba(255, 255, 255, 0.35) !important;
    animation: splash-logo-3d-float 5s ease-in-out infinite, splash-logo-3d-glow 3s ease-in-out infinite alternate !important;
    position: relative !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
    z-index: 25 !important;
    margin: 0 auto !important;
}

.splash-logo-inner {
    position: relative !important;
    z-index: 2 !important;
    transform: translateZ(20px) !important;
}

.splash-logo-glow {
    position: absolute !important;
    top: -40px !important;
    left: -40px !important;
    right: -40px !important;
    bottom: -40px !important;
    border-radius: 50% !important;
    background: 
        radial-gradient(circle, rgba(107, 194, 154, 0.35) 0%, rgba(168, 216, 192, 0.18) 40%, transparent 70%) !important;
    animation: splash-logo-glow-pulse 2.5s ease-in-out infinite alternate !important;
    z-index: 1 !important;
    backdrop-filter: blur(3px) !important;
}

.splash-main-logo::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: 
        conic-gradient(from 0deg, 
            transparent 0deg, 
            rgba(255, 255, 255, 0.25) 60deg, 
            rgba(107, 194, 154, 0.20) 120deg, 
            rgba(255, 255, 255, 0.18) 180deg,
            rgba(168, 216, 192, 0.15) 240deg, 
            rgba(255, 255, 255, 0.12) 300deg,
            transparent 360deg) !important;
    animation: splash-shine-rotate-3d 4s linear infinite !important;
    z-index: 0 !important;
}

/* LOGO CICUMBA */
.splash-cicumba-icon {
    width: 100px !important;
    height: 100px !important;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 40px rgba(107, 194, 154, 0.4)) !important;
    animation: splash-cicumba-pulse 2s ease-in-out infinite alternate !important;
    transition: all 0.3s ease !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -webkit-font-smoothing: antialiased !important;
    object-fit: contain !important;
}

.splash-app-title {
    color: #2d4a3e !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-top: 20px !important;
    text-shadow: 
        0 0 20px rgba(90, 155, 128, 0.35),
        0 0 40px rgba(90, 155, 128, 0.15),
        0 0 60px rgba(90, 155, 128, 0.08) !important;
    animation: splash-title-glow 2.5s ease-in-out infinite alternate !important;
    letter-spacing: 1.5px !important;
    position: relative !important;
}

.splash-app-title.glitch-effect {
    animation: glitch-effect 1s ease-in-out !important;
}

.splash-loading-text {
    color: #5a7d6d !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin-top: 15px !important;
    animation: splash-loading-pulse 1.5s ease-in-out infinite !important;
}

/* ONDAS CONCENTRICAS - MAS INTENSAS */
.splash-waves-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 8 !important;
    pointer-events: none !important;
}

.splash-concentric-wave {
    position: absolute !important;
    top: calc(50% - 60px) !important;
    left: 50% !important;
    border: 1.5px solid rgba(90, 155, 128, 0.40) !important;
    border-radius: 50% !important;
    animation: splash-concentric-expand 6s ease-out infinite !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
}

.splash-concentric-wave.wave-1 { 
    animation-delay: 0s !important; 
    border-color: rgba(90, 155, 128, 0.50) !important;
    box-shadow: 0 0 25px rgba(90, 155, 128, 0.18), inset 0 0 25px rgba(90, 155, 128, 0.06) !important;
}
.splash-concentric-wave.wave-2 { 
    animation-delay: 1.2s !important; 
    border-color: rgba(107, 194, 154, 0.40) !important;
    box-shadow: 0 0 30px rgba(107, 194, 154, 0.15), inset 0 0 30px rgba(107, 194, 154, 0.05) !important;
}
.splash-concentric-wave.wave-3 { 
    animation-delay: 2.4s !important; 
    border-color: rgba(90, 155, 128, 0.35) !important;
    box-shadow: 0 0 35px rgba(90, 155, 128, 0.12), inset 0 0 35px rgba(90, 155, 128, 0.04) !important;
}
.splash-concentric-wave.wave-4 { 
    animation-delay: 3.6s !important; 
    border-color: rgba(107, 194, 154, 0.30) !important;
    box-shadow: 0 0 40px rgba(107, 194, 154, 0.10), inset 0 0 40px rgba(107, 194, 154, 0.03) !important;
}
.splash-concentric-wave.wave-5 { 
    animation-delay: 4.8s !important; 
    border-color: rgba(90, 155, 128, 0.25) !important;
    box-shadow: 0 0 45px rgba(90, 155, 128, 0.08) !important;
}

/* CRISTALES FLOTANTES - MAS BRILLANTES */
.splash-crystal-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 3 !important;
}

.splash-crystal {
    position: absolute !important;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.30) 0%,
        rgba(107, 194, 154, 0.25) 25%,
        rgba(168, 216, 192, 0.20) 50%,
        rgba(107, 194, 154, 0.18) 75%,
        rgba(255, 255, 255, 0.25) 100%) !important;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
    animation: splash-crystal-float 12s ease-in-out infinite !important;
    pointer-events: none !important;
    filter: blur(0.5px) !important;
    backdrop-filter: blur(3px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: 0 0 15px rgba(107, 194, 154, 0.10) !important;
}

.splash-crystal.crystal-1 { width: 18px !important; height: 18px !important; animation-delay: 0s !important; top: 20% !important; left: 15% !important; }
.splash-crystal.crystal-2 { width: 24px !important; height: 24px !important; animation-delay: 2s !important; top: 30% !important; right: 20% !important; }
.splash-crystal.crystal-3 { width: 14px !important; height: 14px !important; animation-delay: 4s !important; bottom: 25% !important; left: 25% !important; }
.splash-crystal.crystal-4 { width: 22px !important; height: 22px !important; animation-delay: 6s !important; bottom: 35% !important; right: 15% !important; }
.splash-crystal.crystal-5 { width: 16px !important; height: 16px !important; animation-delay: 8s !important; top: 60% !important; left: 10% !important; }
.splash-crystal.crystal-6 { width: 20px !important; height: 20px !important; animation-delay: 10s !important; top: 70% !important; right: 30% !important; }

.splash-crystal.dynamic-crystal {
    animation: splash-crystal-dynamic 8s ease-in-out infinite !important;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) !important;
}

/* ========== ANIMACIONES INTENSIFICADAS ========== */

@keyframes background-shift {
    0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%, 0% 0%; }
    50% { background-position: 100% 50%, 0% 50%, 50% 100%, 100% 100%; }
}

@keyframes splash-logo-3d-float {
    0%, 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg) scale(1); }
    25% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg) scale(1.03); }
    50% { transform: translateY(-15px) rotateX(0deg) rotateY(10deg) scale(1.06); }
    75% { transform: translateY(-10px) rotateX(-5deg) rotateY(5deg) scale(1.03); }
}

@keyframes splash-logo-3d-glow {
    0% { 
        box-shadow: 
            0 0 40px rgba(90, 155, 128, 0.35),
            0 0 80px rgba(90, 155, 128, 0.18),
            0 0 120px rgba(90, 155, 128, 0.08),
            0 8px 32px rgba(0,0,0,0.06),
            inset 0 0 20px rgba(255, 255, 255, 0.30);
    }
    100% { 
        box-shadow: 
            0 0 60px rgba(90, 155, 128, 0.50),
            0 0 120px rgba(90, 155, 128, 0.25),
            0 0 180px rgba(90, 155, 128, 0.12),
            0 12px 40px rgba(0,0,0,0.08),
            inset 0 0 30px rgba(255, 255, 255, 0.40);
    }
}

@keyframes splash-logo-glow-pulse {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0.85; transform: scale(1.15); }
}

@keyframes splash-shine-rotate-3d {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes splash-crystal-float {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.6; }
    25% { transform: translateY(-25px) rotate(90deg) scale(1.15); opacity: 0.85; }
    50% { transform: translateY(-35px) rotate(180deg) scale(1.25); opacity: 1; }
    75% { transform: translateY(-25px) rotate(270deg) scale(1.15); opacity: 0.85; }
}

@keyframes splash-crystal-dynamic {
    0%, 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 0.4; }
    33% { transform: translate(35px, -25px) rotate(120deg) scale(1.4); opacity: 0.7; }
    66% { transform: translate(-25px, 35px) rotate(240deg) scale(0.9); opacity: 0.5; }
}

@keyframes splash-concentric-expand {
    0% { width: 120px; height: 120px; opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    15% { opacity: 0.9; }
    50% { opacity: 0.5; }
    100% { width: 600px; height: 600px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes splash-title-glow {
    0% { text-shadow: 0 0 20px rgba(90, 155, 128, 0.30), 0 0 40px rgba(90, 155, 128, 0.12), 0 0 60px rgba(90, 155, 128, 0.06); }
    100% { text-shadow: 0 0 30px rgba(90, 155, 128, 0.45), 0 0 60px rgba(90, 155, 128, 0.20), 0 0 90px rgba(90, 155, 128, 0.10); }
}

@keyframes splash-loading-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes splash-cicumba-pulse {
    0% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 30px rgba(107, 194, 154, 0.3)); }
    100% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 50px rgba(107, 194, 154, 0.5)); }
}

@keyframes glitch-effect {
    0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
    10% { transform: translate(-2px, 2px); filter: hue-rotate(30deg); }
    20% { transform: translate(2px, -2px); filter: hue-rotate(60deg); }
    30% { transform: translate(-2px, -2px); filter: hue-rotate(90deg); }
    40% { transform: translate(2px, 2px); filter: hue-rotate(60deg); }
    50% { transform: translate(0); filter: hue-rotate(0deg); }
}

@keyframes wave-effect {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.2); }
}

@keyframes completed-effect {
    0% { box-shadow: 0 0 30px rgba(90, 155, 128, 0.4); }
    100% { box-shadow: 0 0 60px rgba(90, 155, 128, 0.7); }
}

/* DISOLUCION - rápida y fluida */
.splash-fade-out {
    animation: splash-complete-dissolve 0.5s ease-out forwards !important;
}

@keyframes splash-complete-dissolve {
    0% { opacity: 1; filter: blur(0px) brightness(1); }
    50% { opacity: 0.5; filter: blur(2px) brightness(1.1); }
    100% { opacity: 0; filter: blur(6px) brightness(1.2); }
}

/* Modo rendimiento: menos capas animadas (clase añadida por animated-splash-screen.js) */
.animated-splash-container.cicumba-splash-perf {
    animation: none !important;
}
.cicumba-splash-perf .splash-waves-container,
.cicumba-splash-perf .splash-crystal-container {
    display: none !important;
}
.cicumba-splash-perf .splash-main-logo {
    animation: none !important;
}
.cicumba-splash-perf .splash-logo-glow {
    display: none !important;
}
.cicumba-splash-perf .splash-main-logo::before {
    animation: none !important;
    opacity: 0 !important;
}
.cicumba-splash-perf .splash-cicumba-icon {
    animation: none !important;
}
.cicumba-splash-perf .splash-app-title {
    animation: none !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .splash-main-logo { width: 100px !important; height: 100px !important; }
    .splash-logo-text { font-size: 24px !important; }
    .splash-app-title { font-size: 28px !important; }
    .splash-progress-container { width: 250px !important; bottom: 60px !important; }
}

@media (max-width: 480px) {
    .splash-main-logo { width: 80px !important; height: 80px !important; }
    .splash-logo-text { font-size: 20px !important; }
    .splash-app-title { font-size: 24px !important; }
}