/* Spa and Hair Therapy Visual Elements */

/* Organic shapes and patterns */
.organic-bg {
    background: 
        radial-gradient(circle at 20% 80%, rgba(143, 188, 143, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(45, 90, 39, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
}

/* Floating elements animation */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-leaf {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(143, 188, 143, 0.3);
    border-radius: 0 100% 0 100%;
    animation: float 6s ease-in-out infinite;
}

.floating-leaf:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-leaf:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.floating-leaf:nth-child(3) {
    top: 80%;
    left: 70%;
    animation-delay: 4s;
}

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

/* Essential oil bottle SVG backgrounds */
.bottle-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cpath d='M15 5h10v10h-10z' fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M12 15h16v40c0 2-2 4-4 4h-8c-2 0-4-2-4-4z' fill='none' stroke='%232d5a27' stroke-width='1' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 80px 120px;
}

/* Clay therapy textures */
.clay-texture {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
    position: relative;
}

.clay-texture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23a0522d' opacity='0.1'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%238b4513' opacity='0.1'/%3E%3Ccircle cx='45' cy='45' r='1.5' fill='%23a0522d' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Nature-inspired gradients */
.nature-gradient-1 {
    background: linear-gradient(135deg, #2d5a27 0%, #8fbc8f 50%, #98fb98 100%);
}

.nature-gradient-2 {
    background: linear-gradient(45deg, #228b22 0%, #32cd32 50%, #90ee90 100%);
}

.nature-gradient-3 {
    background: linear-gradient(180deg, #006400 0%, #228b22 50%, #32cd32 100%);
}

/* Zen circles */
.zen-circle {
    position: relative;
}

.zen-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: zen-pulse 4s ease-in-out infinite;
}

.zen-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(143, 188, 143, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: zen-pulse 4s ease-in-out infinite reverse;
}

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

/* Spa stone stack effect */
.stone-stack {
    position: relative;
    display: inline-block;
}

.stone-stack::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 60px;
    height: 8px;
    background: rgba(128, 128, 128, 0.2);
    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(2px);
}

/* Aromatherapy mist effect */
.mist-effect {
    position: relative;
    overflow: hidden;
}

.mist-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: mist-float 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mist-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-10px) scale(1.05); opacity: 0.1; }
}

/* Hair strand animation */
.hair-strand {
    position: absolute;
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.3), rgba(160, 82, 45, 0.1));
    border-radius: 1px;
    animation: hair-sway 3s ease-in-out infinite;
}

.hair-strand:nth-child(1) { left: 20%; animation-delay: 0s; }
.hair-strand:nth-child(2) { left: 40%; animation-delay: 1s; }
.hair-strand:nth-child(3) { left: 60%; animation-delay: 2s; }
.hair-strand:nth-child(4) { left: 80%; animation-delay: 0.5s; }

@keyframes hair-sway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

/* Wellness icons with glow effect */
.wellness-icon {
    position: relative;
    display: inline-block;
    padding: 10px;
}

.wellness-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s ease;
}

.wellness-icon:hover::before {
    transform: scale(1);
}

/* Organic border styles */
.organic-border {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #2d5a27, #8fbc8f, #d4af37) border-box;
    border-radius: 20px;
}

/* Spa treatment room ambiance */
.spa-ambiance {
    background: 
        linear-gradient(rgba(45, 90, 39, 0.02), rgba(143, 188, 143, 0.02)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 5c-5 0-10 5-10 10 0 10 10 20 10 30 0-10 10-20 10-30 0-5-5-10-10-10z' fill='%232d5a27' opacity='0.03'/%3E%3Cpath d='M20 70c-3 0-5 2-5 5 0 5 5 10 5 15 0-5 5-10 5-15 0-3-2-5-5-5z' fill='%238fbc8f' opacity='0.03'/%3E%3Cpath d='M80 75c-2 0-4 2-4 4 0 4 4 8 4 12 0-4 4-8 4-12 0-2-2-4-4-4z' fill='%23d4af37' opacity='0.03'/%3E%3C/svg%3E");
}

/* Responsive spa elements */
@media (max-width: 768px) {
    .floating-leaf {
        width: 15px;
        height: 15px;
    }
    
    .zen-circle::before {
        width: 150px;
        height: 150px;
    }
    
    .zen-circle::after {
        width: 100px;
        height: 100px;
    }
    
    .hair-strand {
        height: 40px;
    }
}