/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Navbar ── */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}
#navbar.scrolled {
    background: rgba(58, 10, 24, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}

/* ── Hero Blobs ── */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    animation: blobFloat 8s ease-in-out infinite;
}
.blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #fbbf24, transparent 70%);
    top: -10%; left: -8%;
    animation-delay: 0s;
}
.blob-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #ec6c8e, transparent 70%);
    top: 20%; right: -5%;
    animation-delay: -2s;
}
.blob-3 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #fde68a, transparent 70%);
    bottom: 5%; left: 15%;
    animation-delay: -4s;
}
.blob-4 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #fad0db, transparent 70%);
    bottom: 25%; right: 10%;
    animation-delay: -6s;
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -25px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── Visit Blobs ── */
.visit-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
}
.visit-blob.blob-1 {
    width: 600px; height: 600px;
    background: #fbbf24;
    top: -20%; right: -10%;
}
.visit-blob.blob-2 {
    width: 400px; height: 400px;
    background: #ec6c8e;
    bottom: -15%; left: -5%;
}

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

/* ── Reveal Animations ── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
}
@media (prefers-reduced-motion: no-preference) {
    .reveal[data-reveal] {
        opacity: 0;
        transform: translateY(30px);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* ── Card Hover ── */
.card-card:hover { transform: translateY(-4px); }

/* ── Glass Card ── */
.card-flip {
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.card-flip:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-3px);
}

/* ── Mobile Menu ── */
#mobile-menu {
    animation: menuSlide 0.3s ease;
}
@keyframes menuSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Utility ── */
.backdrop-border { border: 1px solid rgba(255,255,255,0.08); }

/* ── Focus ── */
a:focus-visible, button:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
    border-radius: 4px;
}