/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; }

/* Navbar */
.nav-logo-text { transition: color 0.3s; }
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #C0603A;
    transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

#navbar.scrolled {
    background: rgba(253, 248, 240, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0,0,0,0.08);
}
#navbar.scrolled .nav-logo-text { color: #8B3D24; }

/* Mobile menu */
.mobile-nav-link {
    position: relative;
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #F2DDB3;
}
.mobile-nav-link:last-of-type { border-bottom: none; }

/* Hero floating cards */
.floating-card {
    animation: float 6s ease-in-out infinite;
}
.card-1 { animation-delay: 0s; }
.card-2 { animation-delay: -1.5s; }
.card-3 { animation-delay: -3s; }
.card-4 { animation-delay: -4.5s; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* Hero geometric shapes */
.hero-shape {
    animation: drift 8s ease-in-out infinite;
}
.shape-circle-1 { animation-delay: 0s; }
.shape-circle-2 { animation-delay: -2s; }
.shape-rect-1 { animation-delay: -4s; animation-name: stretch; animation-duration: 6s; }
.shape-square-1 { animation-delay: -1s; animation-name: spin-slow; animation-duration: 20s; }
.shape-dot-1 { animation-delay: -3s; animation-name: pulse-dot; animation-duration: 3s; }
.shape-dot-2 { animation-delay: -1.5s; animation-name: pulse-dot; animation-duration: 4s; }
.shape-triangle-1 { animation-delay: -2.5s; animation-name: drift-tri; animation-duration: 7s; }

@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(15px, -20px) rotate(2deg); }
    66% { transform: translate(-10px, 10px) rotate(-1deg); }
}
@keyframes stretch {
    0%, 100% { transform: rotate(12deg) scaleY(1); }
    50% { transform: rotate(12deg) scaleY(1.3); }
}
@keyframes spin-slow {
    from { transform: rotate(45deg); }
    to { transform: rotate(405deg); }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}
@keyframes drift-tri {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.2; }
    50% { transform: translate(-20px, -15px) rotate(10deg); opacity: 0.35; }
}

/* Service cards */
.service-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gallery */
.gallery-item {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.gallery-item.visible {
    opacity: 1;
    transform: scale(1);
}

/* Amenities */
.amenity-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.amenity-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section reveal */
.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 767px) {
    .floating-card { display: none; }
    #hero { min-height: auto; padding-top: 100px; padding-bottom: 60px; }
    .hero-shape { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .floating-card { display: none; }
}