/* Additional custom styles for The Hyatt Vacation Rental */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background: rgba(20, 184, 166, 0.3);
    color: #0a1628;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Image card hover effect */
.reveal > div[style*="position:relative"] {
    transition: transform 0.3s ease;
}

.reveal > div[style*="position:relative"]:hover img {
    transform: scale(1.05);
}

/* Subtle pattern overlay for sections */
.section-padding::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.03) 1px, transparent 0);
    background-size: 40px 40px;
    pointer-events: none;
}

#about::before,
#contact::before {
    display: none;
}

/* Animation for stat numbers */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-number {
    animation: countUp 0.6s ease forwards;
}

/* Geometric shape float animation */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
    50% { transform: translateY(-15px) rotate(var(--rotation, 0deg)); }
}

.hero-geometric-3 {
    animation: float 6s ease-in-out infinite;
    --rotation: 20deg;
}

.hero-geometric-4 {
    animation: float 8s ease-in-out infinite;
}

/* Pulse animation for CTA */
@keyframes pulse-mint {
    0%, 100% { box-shadow: 0 8px 30px rgba(20, 184, 166, 0.35); }
    50% { box-shadow: 0 8px 50px rgba(20, 184, 166, 0.55); }
}

.btn-primary:hover {
    animation: pulse-mint 2s ease-in-out infinite;
}

/* Hide scrollbar on mobile menu */
#mobile-menu {
    scrollbar-width: none;
}
#mobile-menu::-webkit-scrollbar {
    display: none;
}