/* ── Base & Utilities ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; }

::selection { background: rgba(45,212,191,0.25); color: #0A2540; }

/* ── Navbar ── */
#navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.0);
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#navbar.nav-scrolled {
    background: rgba(255,255,255,0.97);
    border-bottom-color: rgba(10,37,64,0.08);
    box-shadow: 0 1px 20px rgba(10,37,64,0.06);
}
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: #2DD4BF; transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ── Hero ── */
.hero { position: relative; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg-gradient {
    background: linear-gradient(
        160deg,
        rgba(4,16,32,0.88) 0%,
        rgba(10,37,64,0.78) 40%,
        rgba(10,37,64,0.65) 100%
    );
}
.hero-bg-img { will-change: transform; }
.hero-content { max-width: 800px; }

.hero-title {
    opacity: 0;
    transform: translateY(30px);
    animation: heroReveal 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
.hero-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 0.9s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;
}
.hero-badge {
    opacity: 0;
    animation: heroReveal 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s forwards;
}
.hero-ctas {
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 0.9s cubic-bezier(0.16,1,0.3,1) 0.65s forwards;
}
.hero-scroll-indicator { opacity: 0; animation: heroReveal 0.7s cubic-bezier(0.16,1,0.3,1) 1s forwards; }

@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* Parallax on hero bg */
.hero-bg-img { transition: transform 0.1s linear; will-change: transform; }

/* ── CTA Buttons ── */
.cta-primary {
    box-shadow: 0 4px 24px rgba(45,212,191,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(45,212,191,0.3); }
.cta-secondary { transition: transform 0.2s ease, background 0.2s ease; }
.cta-secondary:hover { transform: translateY(-2px); }

/* ── Scroll indicator ── */
.hero-scroll-btn { opacity: 0.5; }
.hero-scroll-btn:hover { opacity: 1; }

/* ── Section labels & titles ── */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #14B8A6;
    margin-bottom: 0.5rem;
}
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #0A2540;
    letter-spacing: -0.02em;
}
.body-text { line-height: 1.75; font-size: 1.0625rem; }

/* ── Features strip ── */
.feature-item { transition: background 0.2s ease; }
.feature-item:hover .feature-icon { background: rgba(10,37,64,0.1) !important; transform: scale(1.05); }
.feature-icon { transition: all 0.25s ease; }

/* ── About ── */
.about-img-wrap { overflow: hidden; }
.about-img { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.about-img-wrap:hover .about-img { transform: scale(1.04); }

/* ── Rooms ── */
.room-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
    padding: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.room-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    border-color: rgba(45,212,191,0.2);
}
.room-img-wrap { border-radius: 1rem; overflow: hidden; }
.room-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0A2540;
    background: rgba(45,212,191,0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}
.room-cta { transition: gap 0.2s ease; }
.room-card:hover .room-cta { gap: 6px; }

/* ── Amenities ── */
.amenity-card {
    background: #fff;
    border: 1px solid rgba(10,37,64,0.06);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.amenity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(10,37,64,0.08);
    border-color: rgba(45,212,191,0.2);
}
.amenity-icon { transition: transform 0.25s ease; }
.amenity-card:hover .amenity-icon { transform: scale(1.1) rotate(-3deg); }

/* ── Location ── */
.location-card {
    background: #fff;
    border: 1px solid rgba(10,37,64,0.06);
    border-radius: 1rem;
    padding: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.location-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(10,37,64,0.06); }
.location-card-icon { transition: transform 0.25s ease; }
.location-card:hover .location-card-icon { transform: scale(1.1); }

/* ── Contact Form ── */
.contact-form-card {
    border: 1px solid rgba(10,37,64,0.06);
    box-shadow: 0 4px 40px rgba(10,37,64,0.05);
}
.contact-input { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.contact-input:focus { box-shadow: 0 0 0 3px rgba(45,212,191,0.15); }
.contact-input.error { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.contact-submit {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(10,37,64,0.2); }
.contact-submit:active { transform: translateY(0); }
.contact-submit.loading { pointer-events: none; opacity: 0.75; }
.contact-submit .spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none;
}
.contact-submit.loading .spinner { display: block; }
.contact-submit.loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Reveal animations ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Mobile menu ── */
#mobile-menu { max-height: 0; }
#mobile-menu.open { max-height: 400px; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .hero { min-height: 100vh; min-height: 100dvh; }
    .section-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
    .about-img-wrap { border-radius: 1rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .rooms .lg\:grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    .hero-bg-img { transition: none; }
}