/* ==========================================================================
   Luar City - Custom Stylesheet (Matte Royal Blue & Rajdhani Typography)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700;800;900&display=swap');

.font-display, h1, h2, h3, h4, .font-heading {
    font-family: 'Rajdhani', sans-serif !important;
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}

a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Lenis Recommended CSS */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Custom Scrollbar - Solid Matte Royal Blue */
::-webkit-scrollbar { 
    width: 7px; 
}
::-webkit-scrollbar-track { 
    background: #080808; 
}
::-webkit-scrollbar-thumb { 
    background: #141b3d; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #0055FF; 
}

/* Text Stroke for stylistic choices */
.text-stroke {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}

/* Image Zoom Animation */
.bg-zoom {
    animation: zoomEffect 20s infinite alternate;
}

@keyframes zoomEffect {
    0% { 
        transform: scale(1); 
    }
    100% { 
        transform: scale(1.1); 
    }
}

/* Utility for animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* Performance Mode Styles */
html.performance-mode * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Exclude performance button & toast from transition ban */
html.performance-mode #performance-btn,
html.performance-mode #performance-btn svg,
html.performance-mode #performance-status-dot,
html.performance-mode #performance-tooltip,
html.performance-mode #performance-toast,
html.performance-mode #performance-toast * {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Kill heavy animations and continuous pulse */
html.performance-mode .animate-pulse,
html.performance-mode .animate-ping,
html.performance-mode .animate-bounce,
html.performance-mode .animate-spin {
    animation: none !important;
}

/* Simplified background for performance mode */
html.performance-mode .fixed.inset-0.z-\[-1\] img,
html.performance-mode .fixed.inset-0.z-\[-1\] .bg-gradient-to-r,
html.performance-mode .fixed.inset-0.z-\[-1\] .bg-gradient-to-t,
html.performance-mode .fixed.inset-0.z-\[-1\] div[class*="bg-\[url"],
html.performance-mode canvas#particles-canvas {
    display: none !important;
}

html.performance-mode body {
    background-color: #080808 !important;
    background-image: none !important;
}

/* Make nav and card backgrounds solid in performance mode since backdrop-blur is gone */
html.performance-mode #navbar,
html.performance-mode header {
    background-color: rgba(10, 11, 16, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.performance-mode .backdrop-blur-md,
html.performance-mode .backdrop-blur-xl,
html.performance-mode .backdrop-blur-2xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(12, 14, 20, 0.98) !important;
}

/* Simplify cards in performance mode */
html.performance-mode .bg-white\/5,
html.performance-mode .bg-white\/10 {
    background-color: #11141c !important;
    border: 1px solid #1f2433 !important;
}

html.performance-mode .bg-brand-black\/80,
html.performance-mode .bg-brand-black\/90 {
    background-color: #080808 !important;
}

html.performance-mode .bg-zoom {
    animation: none !important;
    transform: scale(1) !important;
}

/* Mobile Touch Scrolling & No-Scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
html, body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Cut-Corner Button (Chamfered Top-Right - Image 1 Reference) */
.btn-chamfer-tr {
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

/* Cyberpunk Gaming Corner Brackets (Blue - Image 3 Reference) */
.cyber-modal-bracket-tl {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 16px;
    height: 16px;
    border-top: 2.5px solid #0055FF;
    border-left: 2.5px solid #0055FF;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0, 85, 255, 0.7));
}
.cyber-modal-bracket-tr {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-top: 2.5px solid #0055FF;
    border-right: 2.5px solid #0055FF;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0, 85, 255, 0.7));
}
.cyber-modal-bracket-bl {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 16px;
    height: 16px;
    border-bottom: 2.5px solid #0055FF;
    border-left: 2.5px solid #0055FF;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0, 85, 255, 0.7));
}
.cyber-modal-bracket-br {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-bottom: 2.5px solid #0055FF;
    border-right: 2.5px solid #0055FF;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0, 85, 255, 0.7));
}

/* Blue Glow Helpers - Strong Banner Royal Blue */
.blue-glow {
    box-shadow: 0 0 35px rgba(0, 85, 255, 0.65);
}
.blue-glow-sm {
    box-shadow: 0 0 20px rgba(0, 85, 255, 0.45);
}
.blue-text-glow {
    text-shadow: 0 0 18px rgba(0, 85, 255, 0.9);
}

/* Ensure Footer is always fully visible */
footer#contato,
footer#contato .grid,
footer#contato .grid > *,
footer#contato .border-t {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}