/* ═══════════════════════════════════════════
   Healthy Frenchy — Custom Styles
   ═══════════════════════════════════════════ */

/* ── Base ── */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

::selection {
    background: #b5263a;
    color: #FDF9F0;
}

/* ── Navigation scroll state ── */
#site-nav.scrolled {
    background: rgba(254, 253, 251, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 20px rgba(123, 45, 59, 0.08);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #7B2D3B;
    border-radius: 2px;
    transition: all 0.25s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
}

/* ── Hero blobs ── */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: blobFloat 12s ease-in-out infinite;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #b5263a 0%, transparent 70%);
    top: -10%;
    right: -5%;
    animation-delay: 0s;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #dc6b5c 0%, transparent 70%);
    bottom: -5%;
    left: -5%;
    animation-delay: -4s;
}

.blob-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #f497a3 0%, transparent 70%);
    top: 40%;
    left: 30%;
    animation-delay: -8s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ── Scroll reveal animations ── */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up {
    transform: translateY(0);
}

.reveal-left {
    transform: translateX(0);
}

.reveal-right {
    transform: translateX(0);
}

/* Progressive enhancement: only animate if user prefers motion */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 0;
        transform: translateY(32px);
    }

    .reveal-left {
        transform: translateX(-32px);
    }

    .reveal-right {
        transform: translateX(32px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }
}

/* ── Decorative divider ── */
.section-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #7B2D3B, #f497a3);
    border-radius: 4px;
    margin: 0 auto;
}

/* ── Image hover zoom container ── */
img {
    max-width: 100%;
    height: auto;
}

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

/* ── Mobile menu transition ── */
#mobile-menu {
    animation: menuSlide 0.25s ease-out;
}

@keyframes menuSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
    .blob {
        filter: blur(60px);
        opacity: 0.3;
    }
    .blob-1 { width: 300px; height: 300px; }
    .blob-2 { width: 250px; height: 250px; }
    .blob-3 { width: 180px; height: 180px; }
}