/* ===== Base & Utilities ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }

/* ===== Header ===== */
#header { transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; }
#header.scrolled {
    background: rgba(254, 253, 248, 0.92);
    backdrop-blur: 16px;
    box-shadow: 0 1px 20px rgba(111, 50, 33, 0.08);
}
.nav-link { position: relative; }

/* ===== Hero ===== */
#hero { position: relative; }
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--sand-50, #fefdf8), transparent);
    pointer-events: none;
}

/* ===== Feature Cards ===== */
.feature-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.5s ease;
}
.feature-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Room Cards ===== */
.room-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.room-card.visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* ===== Attraction Cards ===== */
.attraction-card {
    opacity: 0;
    transform: translateY(25px) scale(0.97);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.attraction-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ===== Review Cards ===== */
.review-card {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease, background 0.4s ease;
}
.review-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Mobile Menu ===== */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
#mobileMenu.open {
    max-height: 400px;
    padding: 0.5rem 0;
}
.mobile-link { transition: all 0.2s ease; }

/* ===== Button Ripple ===== */
button, a { cursor: pointer; }

/* ===== Focus Styles ===== */
input:focus, textarea:focus { outline: none; }

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fdf8e8; }
::-webkit-scrollbar-thumb { background: #d4bea4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c0603a; }

/* ===== Selection ===== */
::selection { background: #f7c4b0; color: #5a2b1f; }

/* ===== Responsive adjustments ===== */
@media (max-width: 640px) {
    .font-serif { line-height: 1.15; }
}

/* ===== Print ===== */
@media print {
    #header, #mobileMenu { display: none !important; }
    body { color: #000; background: #fff; }
}