/* ================================================
   ANIMATIONS — Beauty Salon
   Keyframes, hover transitions, blobs, dark mode
   transitions, reduced-motion override
   ================================================ */

/* ------------------------------------------------
   1. @keyframes
   ------------------------------------------------ */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
    to { transform: scale(2.5); opacity: 0; }
}

/* ------------------------------------------------
   2. Hover transitions
   ------------------------------------------------ */

/* Service cards */
.service-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-card:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevated);
}

/* Primary button */
.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Ripple effect on primary button */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    opacity: 0;
}

.btn-primary:active::after {
    animation: ripple 0.6s ease-out;
}

/* Masonry gallery images */
.masonry-item img {
    transition: transform 0.4s ease;
}

.masonry-item:hover img {
    transform: scale(1.05);
}

/* Brand logos */
.brands-row span {
    filter: grayscale(1);
    opacity: 0.5;
    transition: all 0.3s;
}

.brands-row span:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Ghost button */
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Social links */
.social-link:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------
   3. Floating blobs & decorative animations
   ------------------------------------------------ */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

.blob-1 {
    width: 300px;
    height: 300px;
    background: var(--color-primary);
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

.blob-2 {
    width: 250px;
    height: 250px;
    background: var(--color-accent);
    bottom: 10%;
    right: -5%;
    animation-delay: -3s;
}

.hero-badge {
    animation: pulse 3s ease-in-out infinite;
}

/* ------------------------------------------------
   4. Dark mode color transitions
   ------------------------------------------------ */
*, *::before, *::after {
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

/* ------------------------------------------------
   5. Reduced-motion override
   ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .blob {
        display: none;
    }
}