/* ── Reset & Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* ── Navbar ─────────────────────────────────────────── */
#navbar {
    background: transparent;
    transition: background 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
}
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}
#navbar.scrolled .nav-logo-text { color: #0f766e !important; }
#navbar.scrolled .nav-link { color: #334155 !important; }
#navbar.scrolled .nav-link:hover { color: #0d9488 !important; }

/* ── Hero ───────────────────────────────────────────── */
#hero { position: relative; }
.hero-bg { position: absolute; inset: 0; }
.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(15, 118, 110, 0.82) 0%,
        rgba(14, 86, 83, 0.75) 40%,
        rgba(15, 23, 42, 0.70) 100%
    );
}
.hero-title {
    animation: heroTitleIn 1s ease-out both;
}
.hero-subtitle {
    animation: heroSubtitleIn 1s 0.2s ease-out both;
}
.hero-buttons {
    animation: heroButtonsIn 1s 0.4s ease-out both;
}
.hero-badge {
    animation: heroBadgeIn 1s 0.1s ease-out both;
}
.hero-scroll-indicator {
    animation: heroScrollIn 1s 1s ease-out both;
}

@keyframes heroTitleIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSubtitleIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroButtonsIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroBadgeIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroScrollIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scroll dot animation */
.scroll-dot {
    animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* Floating particles */
.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    animation: floatParticle 8s ease-in-out infinite;
}
.particle:nth-child(2) { width: 12px; height: 12px; animation-duration: 10s; animation-delay: 2s; }
.particle:nth-child(3) { width: 6px; height: 6px; animation-duration: 7s; animation-delay: 4s; }
.particle:nth-child(4) { width: 10px; height: 10px; animation-duration: 9s; animation-delay: 1s; }
.particle:nth-child(5) { width: 14px; height: 14px; animation-duration: 11s; animation-delay: 3s; }
.particle:nth-child(6) { width: 5px; height: 5px; animation-duration: 6s; animation-delay: 5s; }

@keyframes floatParticle {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.15; }
    25% { transform: translateY(-30px) translateX(15px) rotate(90deg); opacity: 0.3; }
    50% { transform: translateY(-10px) translateX(-10px) rotate(180deg); opacity: 0.15; }
    75% { transform: translateY(-40px) translateX(20px) rotate(270deg); opacity: 0.25; }
}

/* ── Section Headers ────────────────────────────────── */
.section-header {
    opacity: 1;
}

/* ── Menu Cards ─────────────────────────────────────── */
.menu-card {
    position: relative;
    overflow: hidden;
}
.menu-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #14b8a6, #0d9488);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.menu-card:hover::after {
    transform: scaleX(1);
}

/* ── Info Cards ─────────────────────────────────────── */
.info-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ── Gallery ────────────────────────────────────────── */
.gallery-item {
    position: relative;
    height: 250px;
}
.gallery-item:nth-child(2) { height: 300px; }
.gallery-item:nth-child(5) { height: 200px; }
@media (min-width: 768px) {
    .gallery-item { height: 300px; }
    .gallery-item:nth-child(2) { height: 360px; }
    .gallery-item:nth-child(5) { height: 240px; }
}

/* ── Scroll Reveal (below fold only) ────────────────── */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.revealed {
    opacity: 0;
    transform: translateY(40px);
}
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal.revealed {
        opacity: 1;
        transform: none;
    }
}

/* ── Mobile Menu ────────────────────────────────────── */
#mobile-menu {
    animation: mobileMenuIn 0.3s ease-out;
}
@keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-link {
    border-bottom: 1px solid transparent;
    padding-bottom: 0.5rem;
}
.mobile-nav-link:hover {
    border-bottom-color: #14b8a6;
}

/* ── Utility ────────────────────────────────────────── */
@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; }
    .scroll-dot { animation: none; }
    .particle { animation: none; opacity: 0.1; }
}