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

/* ── Navbar ──────────────────────────────────────── */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.scrolled {
    background: rgba(254, 252, 251, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.nav-logo { transition: color 0.3s ease; }
#navbar.scrolled .nav-logo { color: #2e2720; }

/* ── Hero Gradient ───────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #6c1d2b 0%, #9f2335 25%, #c22d42 45%, #C97B84 70%, #f7b5a5 100%);
}
.testimonial-gradient {
    background: linear-gradient(135deg, #822130 0%, #9f2335 50%, #C97B84 100%);
}

/* ── Hero Floats ─────────────────────────────────── */
@keyframes floatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(12px, -18px) scale(1.06); }
}
@keyframes floatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-14px, 14px) scale(1.04); }
}
@keyframes floatC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10px, 10px) scale(1.05); }
}
.hero-float-1 { animation: floatA 7s ease-in-out infinite; }
.hero-float-2 { animation: floatB 9s ease-in-out infinite; }
.hero-float-3 { animation: floatC 6s ease-in-out infinite; }

/* ── Hero Entrance ───────────────────────────────── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
#hero > .relative > div { animation: heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Scroll Reveal ───────────────────────────────── */
.reveal-up   { opacity: 1; transform: translateY(0); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal-left { opacity: 1; transform: translateX(0);    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal-right{ opacity: 1; transform: translateX(0);    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }

.reveal-up.revealed   { opacity: 1; transform: translateY(0); }
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right.revealed{ opacity: 1; transform: translateX(0); }

.reveal-up   { transform: translateY(28px); }
.reveal-left { transform: translateX(-28px); }
.reveal-right{ transform: translateX(28px); }

/* ── Mobile Menu ─────────────────────────────────── */
.mobile-menu-open { overflow: hidden; }
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.open .mobile-nav-link {
    animation: mobileLinkIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
#mobile-menu.open .mobile-nav-link:nth-child(1) { animation-delay: 0.05s; }
#mobile-menu.open .mobile-nav-link:nth-child(2) { animation-delay: 0.1s; }
#mobile-menu.open .mobile-nav-link:nth-child(3) { animation-delay: 0.15s; }
#mobile-menu.open .mobile-nav-link:nth-child(4) { animation-delay: 0.2s; }
#mobile-menu.open .mobile-nav-link:nth-child(5) { animation-delay: 0.25s; }

@keyframes mobileLinkIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Menu Line Animation ─────────────────────────── */
.menu-line { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, width 0.35s cubic-bezier(0.4,0,0.2,1); }
.menu-open .menu-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-open .menu-line:nth-child(2) { opacity: 0; }
.menu-open .menu-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); width: 24px; }

/* ── Accessibility ───────────────────────────────── */
@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-up, .reveal-left, .reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

/* ── Selection ───────────────────────────────────── */
::selection { background: rgba(194, 45, 66, 0.15); }
</style>