/* ============================================
   FLOATING DECORATIVE OBJECTS
   Theme: Islamic Feminine Medical / Haid Period
   ============================================ */

.floating-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.float-obj {
    position: absolute;
    opacity: 0.13;
    filter: blur(0.3px);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* ---------- Animation Keyframes ---------- */
@keyframes float-y {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-28px) rotate(5deg); }
}

@keyframes float-x {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(22px) rotate(-4deg); }
}

@keyframes float-xy {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(18px, -22px) rotate(3deg); }
    50% { transform: translate(0, -32px) rotate(0deg); }
    75% { transform: translate(-18px, -22px) rotate(-3deg); }
}

@keyframes float-orbit {
    0% { transform: rotate(0deg) translateX(35px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
}

@keyframes float-sway {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-18px) rotate(6deg); }
}

/* ---------- Position & Timing ---------- */
.float-baby       { top: 6%; left: 4%; animation: float-y 7s infinite; animation-delay: 0s; }
.float-drop      { top: 12%; right: 7%; animation: float-xy 9s infinite; animation-delay: 1.2s; }
.float-moon      { bottom: 22%; left: 6%; animation: float-y 8.5s infinite; animation-delay: 2.1s; }
.float-flower    { top: 38%; right: 10%; animation: float-orbit 22s linear infinite; animation-delay: 0s; }
.float-notebook  { bottom: 12%; right: 18%; animation: float-x 6.5s infinite; animation-delay: 3.2s; }
.float-ribbon    { top: 58%; left: 2%; animation: float-xy 10s infinite; animation-delay: 1.8s; }
.float-circle-lg { top: 18%; left: 32%; animation: pulse-soft 5.5s infinite; animation-delay: 0.4s; }
.float-circle-md { bottom: 32%; right: 4%; animation: pulse-soft 6.5s infinite; animation-delay: 2.8s; }
.float-plus      { top: 4%; right: 32%; animation: float-sway 8s infinite; animation-delay: 4.2s; }
.float-star      { bottom: 8%; left: 22%; animation: float-xy 13s infinite; animation-delay: 0.6s; }
.float-heart     { top: 68%; right: 28%; animation: float-y 7.5s infinite; animation-delay: 2.4s; }
.float-cal      { top: 45%; left: 15%; animation: float-sway 9s infinite; animation-delay: 3.5s; }
.float-drop-md      { bottom: 40%; left: 30%; animation: float-y 9s infinite; animation-delay: 1.2s; }
.float-ring      { bottom: 45%; right: 25%; animation: float-orbit 18s linear infinite reverse; animation-delay: 1s; }

/* ---------- Color Theming ---------- */
.float-tint-rose     { color: #FB7185; }
.float-tint-magenta  { color: #C026D3; }
.float-tint-burgundy { color: #881337; }
.float-tint-gold     { color: #F59E0B; }
.float-tint-emerald  { color: #10B981; }
.float-tint-fuchsia  { color: #E879F9; }

/* ---------- Size Variations ---------- */
.sz-xs { width: 22px; height: 22px; }
.sz-sm { width: 32px; height: 32px; }
.sz-md { width: 48px; height: 48px; }
.sz-lg { width: 72px; height: 72px; }
.sz-xl { width: 104px; height: 104px; }