@keyframes float-1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) translateX(5px) rotate(2deg); }
    66% { transform: translateY(5px) translateX(-5px) rotate(-1deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-15px) rotate(-3deg) scale(1.02); }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
    25% { transform: translate(8px, -12px) rotate(4deg); }
    75% { transform: translate(-8px, -8px) rotate(-2deg); }
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4));
    }
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.85));
    }
}

.anim-float {
    animation: float-1 6s ease-in-out infinite;
}

.anim-float-2 {
    animation: float-2 5s ease-in-out infinite;
}

.anim-float-3 {
    animation: float-3 7s ease-in-out infinite;
}

.anim-glow {
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes spin3d {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

.sticker-3d {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(0 6px 12px rgba(212, 175, 55, 0.25));
}

@media (max-width: 400px) {
    .sticker-3d {
        transform: scale(0.8);
    }
}

.sticker-spin {
    animation: spin3d 8s linear infinite;
}

.sticker-wiggle {
    animation: wiggle 3s ease-in-out infinite;
}

.gunungan-ornament {
    width: 90px;
    height: auto;
    margin: 1.5rem auto;
    display: block;
    filter: drop-shadow(0 5px 15px rgba(144, 169, 85, 0.3));
    animation: float-3 8s ease-in-out infinite;
}

.flower-corner-tl {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 110px;
    pointer-events: none;
    z-index: 10;
    transform-origin: top left;
    animation: float-2 6.5s ease-in-out infinite;
}

.flower-corner-br {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 110px;
    pointer-events: none;
    z-index: 10;
    transform-origin: bottom right;
    animation: float-1 7.5s ease-in-out infinite reverse;
}

@keyframes scroll {
    0% {
        transform: translateY(1rem);
        opacity: 0%;
    }

    50% {
        opacity: 100%;
    }

    100% {
        transform: translateY(-1rem);
        opacity: 0%;
    }
}

.animate-love {
    animation: pulse 1s ease infinite;
}

.scroll-animation {
    animation: scroll 2s ease-out infinite;
    width: 0.125rem;
    height: 0.5rem;
}

.spin-button {
    animation: spin 6s linear infinite;
}

@keyframes cardSlideInLeft {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes cardSlideInRight {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

.anim-slide-left {
    animation: cardSlideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-slide-right {
    animation: cardSlideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll Reveal — IntersectionObserver driven */
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-up,
.scroll-reveal-fade {
    opacity: 0;
    transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0s);
    will-change: opacity, transform;
}

.scroll-reveal-left {
    transform: translateX(-30px);
}

.scroll-reveal-right {
    transform: translateX(30px);
}

.scroll-reveal-up {
    transform: translateY(24px);
}

.scroll-reveal-fade {
    transform: none;
}

.scroll-reveal-left.is-visible,
.scroll-reveal-right.is-visible,
.scroll-reveal-up.is-visible,
.scroll-reveal-fade.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}