/* Custom styles for 5L Landing RV Park */

/* Particle effects */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #d4a017, transparent);
    border-radius: 50%;
    pointer-events: none;
    animation: float-particle 8s ease-in-out infinite;
}

.particle.gold {
    box-shadow: 0 0 10px #d4a017, 0 0 20px #d4a017;
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) translateX(-10px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-40px) translateX(20px) scale(1.1);
        opacity: 0.9;
    }
}

/* Scroll reveal base states - content always visible */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
}

/* Reveal animations only when JS is active and prefers-reduced-motion is off */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal-right {
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed {
        opacity: 1;
        transform: none;
    }
}

/* Navbar styles */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #d4a017, #f5c842);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Gold gradient text utility */
.text-gold-gradient {
    background: linear-gradient(135deg, #f5c842, #d4a017, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0608;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4a017, #662a48);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f5c842, #83355b);
}

/* Selection color */
::selection {
    background: rgba(212, 160, 23, 0.3);
    color: #f761a7;
}

/* Smooth focus styles */
input:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* Mobile menu animation */
#mobile-menu {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile link styles */
.mobile-link {
    position: relative;
    padding-left: 0;
}

.mobile-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #d4a017;
    transition: width 0.3s ease;
}

.mobile-link:hover::before {
    width: 20px;
}

/* Image hover overlay */
.group:hover .absolute.inset-0 {
    opacity: 1;
}

/* Back to top button */
#back-to-top.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* Shimmer effect for special elements */
.shimmer {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 160, 23, 0.1) 50%, 
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

/* Gold border gradient animation */
@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(212, 160, 23, 0.3);
    }
    50% {
        border-color: rgba(212, 160, 23, 0.6);
    }
}

.glow-border {
    animation: borderGlow 3s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .font-display {
        font-size: 2rem;
    }
}

/* Print styles */
@media print {
    nav, #back-to-top, .particle {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}