/*
========================================================================
WELCOME EXTENSION - EXTERNAL STYLE SHEET
========================================================================
This stylesheet contains all visual layout rules, interactive element styles,
custom cursor settings, theme overrides, and animation keyframes for the
commercial welcome page.
*/

/* Hide default OpenXava welcome container */
.welcome-hero { 
    display: none !important; 
}

/* Reset welcome body styles and default cursor */
body#welcome { 
    padding: 0 !important; 
    background: transparent !important; 
    cursor: none !important; 
}

/* Smooth page scrolling */
html { 
    scroll-behavior: smooth; 
}

/* Scrollbar customization */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}
html.dark ::-webkit-scrollbar-track { 
    background: #0a0a0a; 
}
::-webkit-scrollbar-thumb { 
    background: #ccc; 
    border-radius: 4px; 
}
html.dark ::-webkit-scrollbar-thumb { 
    background: #333; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #ff9800; 
}

/* Scroll margin correction for fixed navbar */
section { 
    scroll-margin-top: 80px; 
}

/* Custom cursor styling (outer ring) */
#custom-cursor { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    background-color: rgba(255, 152, 0, 0.15); 
    border: 1px solid rgba(255, 152, 0, 0.5); 
    pointer-events: none; 
    z-index: 99999; 
    transform: translate(-50%, -50%); 
    transition: width 0.3s, height 0.3s, background-color 0.3s; 
    backdrop-filter: blur(2px); 
}

/* Custom cursor dot (inner point) */
#custom-cursor-dot { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 6px; 
    height: 6px; 
    border-radius: 50%; 
    background-color: #ff9800; 
    pointer-events: none; 
    z-index: 100000; 
    transform: translate(-50%, -50%); 
}

/* Large cursor state on element hover */
.cursor-hover { 
    width: 60px !important; 
    height: 60px !important; 
    background-color: rgba(255, 152, 0, 0.05) !important; 
    border-color: rgba(255, 152, 0, 0.8) !important; 
}

/* Responsive and Touch/Tablet cursor behaviors: Automatically disable on mobile screens and touch devices */
@media (max-width: 1024px), (pointer: coarse) { 
    body#welcome { 
        cursor: auto !important; 
    } 
    #custom-cursor, #custom-cursor-dot { 
        display: none !important; 
    } 
    .hover-trigger {
        cursor: auto !important;
    }
}

/* Reduced motion preference: Disable scrolling behaviors and flote animations safely */
@media (prefers-reduced-motion: reduce) {
    html { 
        scroll-behavior: auto !important; 
    }
    .animate-float, .animate-float-delayed, .animate-float-icon { 
        animation: none !important; 
    }
    * { 
        transition: none !important; 
        animation: none !important; 
    }
}

/* Glassmorphism theme containers */
.glass { 
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    border: 1px solid rgba(255, 255, 255, 0.4); 
}
.dark .glass { 
    background: rgba(30, 30, 30, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
}

/* Animated gradient text */
.text-gradient { 
    background: linear-gradient(to right, #ff9800, #ff5e00, #ff007f); 
    background-size: 200% auto; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    animation: textShine 4s linear infinite; 
}
@keyframes textShine { 
    to { background-position: 200% center; } 
}

/* Cursor typewriter blinker */
.cursor-blink { 
    color: #ff9800; 
    animation: blink 1s step-end infinite; 
}

/* Subtle flote animations for dashboard and welcome icons */
.animate-float { 
    animation: float 6s ease-in-out infinite; 
}
.animate-float-delayed { 
    animation: float 6s ease-in-out infinite 1.5s; 
}
@keyframes float { 
    0%, 100% { transform: translateY(0px); } 
    50% { transform: translateY(-15px); } 
}
.animate-float-icon { 
    animation: floatIcon 3.5s ease-in-out infinite; 
}
@keyframes floatIcon { 
    0%, 100% { transform: translateY(0px) rotate(0deg); } 
    50% { transform: translateY(-8px) rotate(4deg); } 
}

/* Responsive mobile navigation transition */
#mobile-menu { 
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
}
#mobile-menu.open { 
    max-height: 400px; 
    opacity: 1; 
}

/* Theme switch custom toggle layout */
.theme-switch-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.theme-switch { 
    position: relative; 
    width: 56px; 
    height: 28px; 
    background-color: #e5e7eb; 
    border-radius: 30px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
    transition: background-color 0.3s; 
}
html.dark .theme-switch { 
    background-color: #374151; 
}
.theme-switch-circle { 
    position: absolute; 
    left: 2px; 
    width: 24px; 
    height: 24px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
}
html.dark .theme-switch-circle { 
    transform: translateX(28px); 
    background-color: #1a1a1a; 
}
html.dark .theme-switch-circle .fa-moon { 
    display: block; 
    color: white; 
}
html.dark .theme-switch-circle .fa-sun { 
    display: none; 
}
.theme-switch-circle .fa-moon { 
    display: none; 
}
.theme-switch-circle .fa-sun { 
    display: block; 
    color: #ff9800; 
}

/* Desktop navigation active link indicators */
.desktop-nav-link { 
    position: relative; 
    padding-bottom: 4px; 
    transition: color 0.3s ease; 
}
.desktop-nav-link.active { 
    color: #ff9800 !important; 
    font-weight: 800; 
}
.desktop-nav-link.active::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background-color: #ff9800; 
    border-radius: 4px; 
    animation: fadeIn 0.3s ease forwards; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(2px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Constellation background canvas styling */
#interactive-canvas { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    pointer-events: none; 
}

/* Swiper Pagination Bullets visible in dark & light themes */
.swiper-pagination-bullet { 
    background-color: #9ca3af !important; 
    opacity: 0.5 !important; 
}
.dark .swiper-pagination-bullet { 
    background-color: #6b7280 !important; 
}
.swiper-pagination-bullet-active { 
    background-color: #ff9800 !important; 
    opacity: 1 !important; 
}

/* Floating contact buttons icon override */
.btn-flotante i { 
    color: #ffffff !important; 
}
a.btn-flotante:visited i { 
    color: #ffffff !important; 
}