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

/* ── Hero gradient ── */
.hero-gradient {
    background: linear-gradient(135deg, #9d174d 0%, #be185d 30%, #db2777 50%, #d97706 80%, #f59e0b 100%);
}

/* ── Navbar transitions ── */
#navbar {
    background: transparent;
}
#navbar.scrolled {
    background: rgba(253, 244, 248, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(157, 23, 77, 0.08);
}
.nav-brand {
    color: #78350f;
    transition: color 0.3s;
}
#navbar.scrolled .nav-brand {
    color: #9d174d;
}

/* ── Hero orbs ── */
.hero-orb-1 { animation: float 8s ease-in-out infinite; }
.hero-orb-2 { animation: float 10s ease-in-out infinite reverse; }
.hero-orb-3 { animation: pulse-slow 12s ease-in-out infinite; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}
@keyframes pulse-slow {
    0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.18; transform: translate(-50%, -50%) scale(1.1); }
}

/* ── Hero badge ── */
.hero-badge {
    animation: fadeDown 0.8s ease-out both;
}
.hero-badge svg, .hero-badge span { vertical-align: middle; }

/* ── Hero text ── */
.hero-badge,
#hero h1,
#hero p,
#hero > div > div {
    animation: fadeUp 0.8s ease-out both;
}
#hero h1 { animation-delay: 0.15s; }
#hero p { animation-delay: 0.3s; }
#hero > div > div > div:last-child { animation-delay: 0.45s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 0; transform: translateY(0); }
}

/* ── Scroll reveal base (progressive enhancement) ── */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .reveal-up, .reveal-left, .reveal-right {
        opacity: 0;
        transform: translateY(30px);
    }
    .reveal-left { transform: translateX(-30px); }
    .reveal-right { transform: translateX(30px); }
    .reveal-up.visible,
    .reveal-left.visible,
    .reveal-right.visible {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* ── Mobile menu ── */
#mobile-menu {
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.mobile-link {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #fce7f3;
}
.mobile-link:last-child { border-bottom: none; }

/* ── Menu hover ── */
#menu ul li:hover { background: rgba(253, 244, 248, 0.5); }
#menu ul li { transition: background 0.2s; border-radius: 8px; padding: 4px -8px; margin: -4px -8px; }

/* ── Contact form focus ── */
input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.1);
}

/* ── Image hover ── */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* ── Smooth transitions on all interactive elements ── */
a, button {
    transition: all 0.25s ease;
}