/* Sakura Petals Animation */
.sakura-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.sakura {
    position: absolute;
    background-color: var(--sakura-pink);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

/* Ripple Effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

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

/* Neon Flicker */
.neon-flicker {
    animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
            0 0 5px var(--electric-blue),
            0 0 10px var(--electric-blue),
            0 0 15px var(--electric-blue),
            0 0 20px var(--neon-violet),
            0 0 35px var(--neon-violet),
            0 0 40px var(--neon-violet);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Katana Slice Animation */
.katana-slice {
    position: relative;
    overflow: hidden;
}

.katana-slice::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-25deg);
    animation: katanaSlice 2s infinite;
}

@keyframes katanaSlice {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Floating Animation */
.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Particle Effect */
.particle {
    position: absolute;
    background: radial-gradient(circle, var(--sakura-pink), transparent);
    border-radius: 50%;
    opacity: 0;
    animation: particleFade 1s ease-out;
}

@keyframes particleFade {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Fade In On Scroll */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Carousel Animation */
.carousel-slide {
    transform: translateX(0);
    transition: transform 0.5s ease;
}

/* Pixel Glow Hover */
.pixel-glow {
    transition: all 0.3s ease;
}

.pixel-glow:hover {
    box-shadow: 
        0 0 5px var(--neon-violet),
        0 0 10px var(--neon-violet),
        0 0 15px var(--electric-blue);
    transform: translateY(-5px);
}

/* Cherry Blossom Background Animation */
@keyframes blossomDrift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

.blossom-bg {
    background-image: url('https://images.pexels.com/photos/5388156/pexels-photo-5388156.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
    background-size: 200px;
    background-repeat: repeat;
    opacity: 0.05;
    animation: blossomDrift 60s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Sparkle Effect */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--electric-blue);
    opacity: 0;
    animation: sparkle 1s linear forwards;
    pointer-events: none;
}

@keyframes sparkle {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Parallax Scroll Effect */
.parallax {
    transform: translateY(0);
    transition: transform 0.5s ease;
}