/* Niriv Heart Animation - Instagram Style Like Animation */

/* Main heart animation container */
.niriv-heart-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.niriv-heart-animation.active {
    opacity: 1;
}

/* Main heart icon */
.niriv-heart-main {
    font-size: 80px;
    color: #ff3040;
    text-shadow: 0 0 20px rgba(255, 48, 64, 0.5);
    animation: heartPulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Heart pulse animation */
@keyframes heartPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    15% {
        transform: scale(1.2);
        opacity: 1;
    }
    30% {
        transform: scale(0.95);
    }
    45% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Particle container */
.niriv-heart-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
}

/* Individual particle */
.niriv-heart-particle {
    position: absolute;
    font-size: 16px;
    color: #ff3040;
    opacity: 0;
    animation: particleFloat 1.5s ease-out forwards;
}

/* Particle floating animation */
@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: translate(var(--particle-x), var(--particle-y)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--particle-x) * 1.5), calc(var(--particle-y) * 1.5)) scale(0.3);
    }
}

/* Sparkle effects */
.niriv-heart-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #ff3040, #ff6b7a);
    border-radius: 50%;
    opacity: 0;
    animation: sparkleFloat 1.2s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0);
    }
    30% {
        opacity: 1;
        transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--sparkle-x) * 2), calc(var(--sparkle-y) * 2)) scale(0);
    }
}

/* Heart icon variations for particles */
.niriv-heart-particle.small {
    font-size: 12px;
    animation-duration: 1.2s;
}

.niriv-heart-particle.medium {
    font-size: 18px;
    animation-duration: 1.4s;
}

.niriv-heart-particle.large {
    font-size: 22px;
    animation-duration: 1.6s;
}

/* Glow effect for main heart */
.niriv-heart-main::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 48, 64, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 0.8s ease-out;
    z-index: -1;
}

@keyframes glowPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .niriv-heart-main {
        font-size: 60px;
    }
    
    .niriv-heart-particles {
        width: 150px;
        height: 150px;
    }
    
    .niriv-heart-particle {
        font-size: 14px;
    }
    
    .niriv-heart-particle.small {
        font-size: 10px;
    }
    
    .niriv-heart-particle.medium {
        font-size: 16px;
    }
    
    .niriv-heart-particle.large {
        font-size: 18px;
    }
}

/* Accessibility - Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .niriv-heart-animation,
    .niriv-heart-particle,
    .niriv-heart-sparkle {
        animation-duration: 0.3s;
    }
    
    .niriv-heart-main::before {
        animation: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .niriv-heart-main {
        text-shadow: 0 0 25px rgba(255, 48, 64, 0.7);
    }
    
    .niriv-heart-sparkle {
        background: linear-gradient(45deg, #ff4757, #ff6b7a);
    }
}