/* ==========================================
   HOVER EFFECTS & TRANSITIONS
   ========================================== */
.hover-lift {
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
}

.hover-zoom {
    overflow: hidden;
}
.hover-zoom img {
    transition: transform var(--transition-medium);
}
.hover-zoom:hover img {
    transform: scale(1.08);
}

.glow-pink:hover {
    box-shadow: 0 15px 30px rgba(255, 79, 139, 0.4);
}
.glow-blue:hover {
    box-shadow: 0 15px 30px rgba(26, 77, 255, 0.4);
}

/* Button ripple container helper */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple-effect {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================
   SCROLL REVEALS (INTERSECTION OBSERVER)
   ========================================== */
.reveal {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
                transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal-fade-up {
    transform: translateY(40px);
}

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

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

.reveal-scale {
    transform: scale(0.92);
}

/* Trigger Class */
.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Delay modifiers */
.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }
.reveal-delay-400 { transition-delay: 0.4s; }
.reveal-delay-500 { transition-delay: 0.5s; }

/* ==========================================
   KEYFRAME ANIMATIONS
   ========================================== */
/* Floating elements */
.anim-float {
    animation: floating 6s ease-in-out infinite;
}
.anim-float-reverse {
    animation: floating-reverse 7s ease-in-out infinite;
}
.anim-pulse {
    animation: pulsing 3s ease-in-out infinite;
}
.anim-spin-slow {
    animation: rotating 20s linear infinite;
}

@keyframes floating {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes floating-reverse {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(15px) rotate(-3deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulsing {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulse Glow */
.pulse-glow {
    position: relative;
}
.pulse-glow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: inherit;
    border: 2px solid var(--color-primary-pink);
    opacity: 0;
    animation: border-pulse 2s infinite;
}

@keyframes border-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Confetti Pieces */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--color-primary-pink);
    z-index: 1000;
    pointer-events: none;
    border-radius: 50%;
}