/* ========== BASE ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ========== NAV SCROLL ========== */
#nav.scrolled {
    background: rgba(253, 242, 246, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(139, 26, 74, 0.08);
}

/* ========== MOBILE MENU ========== */
#mobile-menu {
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== DECORATIVE BLOBS ========== */
.deco-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.blob-1 {
    width: 400px; height: 400px;
    background: rgba(251, 178, 212, 0.25);
    top: 10%; left: -100px;
    animation: float-blob 20s ease-in-out infinite;
}
.blob-2 {
    width: 300px; height: 300px;
    background: rgba(139, 26, 74, 0.08);
    top: 50%; right: -50px;
    animation: float-blob 15s ease-in-out infinite reverse;
}
.blob-3 {
    width: 250px; height: 250px;
    background: rgba(252, 231, 243, 0.3);
    bottom: 10%; left: 20%;
    animation: float-blob 18s ease-in-out infinite 3s;
}
@keyframes float-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ========== HERO GEOMETRIC SHAPES ========== */
.geo-shape {
    position: absolute;
    opacity: 0.12;
    pointer-events: none;
}
.geo-circle-1 {
    width: 500px; height: 500px;
    border: 3px solid rgba(251, 168, 212, 0.6);
    border-radius: 50%;
    top: -100px; right: -100px;
    animation: spin-slow 40s linear infinite;
}
.geo-circle-2 {
    width: 200px; height: 200px;
    background: rgba(255, 175, 189, 0.4);
    border-radius: 50%;
    bottom: 10%; left: 5%;
    animation: float-gentle 8s ease-in-out infinite;
}
.geo-square-1 {
    width: 120px; height: 120px;
    background: rgba(251, 178, 212, 0.3);
    top: 20%; left: 8%;
    transform: rotate(45deg);
    animation: float-gentle 6s ease-in-out infinite;
}
.geo-square-2 {
    width: 80px; height: 80px;
    border: 3px solid rgba(255, 143, 158, 0.5);
    top: 60%; right: 10%;
    transform: rotate(20deg);
    animation: spin-slow 25s linear infinite reverse;
}
.geo-triangle-1 {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(252, 231, 243, 0.2);
    top: 30%; right: 15%;
    animation: float-gentle 7s ease-in-out infinite 1s;
}
.geo-ring-1 {
    width: 160px; height: 160px;
    border: 3px solid rgba(255, 175, 189, 0.3);
    border-radius: 50%;
    bottom: 25%; left: 15%;
    animation: spin-slow 30s linear infinite;
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes float-gentle {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-20px) rotate(var(--rot, 0deg)); }
}
.geo-square-1 { --rot: 45deg; }
.geo-square-2 { --rot: 20deg; }

/* ========== HERO PHOTOS ========== */
.hero-photo {
    position: absolute;
    opacity: 0.18;
    pointer-events: none;
    filter: grayscale(30%);
}
.p-photo-1 {
    width: 320px; height: 420px;
    top: 10%; left: 3%;
    object-fit: cover;
    border-radius: 24px;
    transform: rotate(-6deg);
    animation: float-gentle 10s ease-in-out infinite;
}
.p-photo-2 {
    width: 280px; height: 360px;
    bottom: 5%; right: 5%;
    object-fit: cover;
    border-radius: 20px;
    transform: rotate(4deg);
    animation: float-gentle 8s ease-in-out infinite 2s;
}
.p-photo-3 {
    width: 220px; height: 280px;
    top: 15%; right: 12%;
    object-fit: cover;
    border-radius: 16px;
    transform: rotate(8deg);
    animation: float-gentle 9s ease-in-out infinite 1s;
}

/* ========== REVEAL ANIMATIONS ========== */
.reveal-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== REDUCED MOTION ========== */
@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; }
}