/* ===================================
   ANIMATIONS.CSS - WD-006 Template
   Enhanced AOS Overrides, Premium Keyframes
   =================================== */

/* ===== Custom Easing Functions ===== */
:root {
    /* Smooth, natural easings */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);

    /* Elastic & bounce */
    --ease-out-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ===== Enhanced AOS Animation Overrides ===== */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: var(--ease-out-expo);
}

[data-aos].aos-animate {
    opacity: 1;
}

/* Fade Up - Enhanced with slight bounce */
[data-aos="fade-up"] {
    transform: translateY(60px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

/* Fade Down */
[data-aos="fade-down"] {
    transform: translateY(-60px);
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

/* Fade Left */
[data-aos="fade-left"] {
    transform: translateX(60px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

/* Fade Right */
[data-aos="fade-right"] {
    transform: translateX(-60px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

/* Zoom In - Premium scale effect */
[data-aos="zoom-in"] {
    transform: scale(0.85);
    transition-timing-function: var(--ease-out-back);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

/* Zoom In Up */
[data-aos="zoom-in-up"] {
    transform: scale(0.85) translateY(40px);
    transition-timing-function: var(--ease-out-back);
}

[data-aos="zoom-in-up"].aos-animate {
    transform: scale(1) translateY(0);
}

/* Flip Up - 3D perspective */
[data-aos="flip-up"] {
    transform: perspective(2500px) rotateX(-100deg);
    transform-origin: bottom;
    transition-timing-function: var(--ease-out-expo);
}

[data-aos="flip-up"].aos-animate {
    transform: perspective(2500px) rotateX(0);
}

/* NEW: Reveal - Elegant slide reveal */
[data-aos="reveal-up"] {
    clip-path: inset(100% 0 0 0);
    transform: translateY(20px);
}

[data-aos="reveal-up"].aos-animate {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

/* NEW: Blur In - Focus effect */
[data-aos="blur-in"] {
    filter: blur(10px);
    transform: scale(1.05);
}

[data-aos="blur-in"].aos-animate {
    filter: blur(0);
    transform: scale(1);
}

/* NEW: Slide Rotate - Dynamic entrance */
[data-aos="slide-rotate"] {
    transform: translateX(-100px) rotate(-10deg);
    opacity: 0;
}

[data-aos="slide-rotate"].aos-animate {
    transform: translateX(0) rotate(0);
    opacity: 1;
}

/* ===== Staggered Animation Delays ===== */
[data-aos-delay="100"] {
    transition-delay: 100ms;
}

[data-aos-delay="200"] {
    transition-delay: 200ms;
}

[data-aos-delay="300"] {
    transition-delay: 300ms;
}

[data-aos-delay="400"] {
    transition-delay: 400ms;
}

[data-aos-delay="500"] {
    transition-delay: 500ms;
}

[data-aos-delay="600"] {
    transition-delay: 600ms;
}

/* ===== Flower Backgrounds ===== */
.flower-top-left {
    background: url('/templates/wd-006/assets/img/flower-7.webp') no-repeat center center / contain;
}

.flower-top-right {
    background: url('/templates/wd-006/assets/img/flower-7.webp') no-repeat center center / contain;
}

.flower-bottom-left {
    background: url('/templates/wd-006/assets/img/flower-2.webp') no-repeat center center / contain;
}

.flower-bottom-right {
    background: url('/templates/wd-006/assets/img/flower-4.webp') no-repeat center center / contain;
}

.flower-divider {
    background: url('/templates/wd-006/assets/img/flower-2.webp') no-repeat center center / contain;
}

.photo-container .frame-flower {
    background: url('/templates/wd-006/assets/img/frame-flower-1.webp') no-repeat center center / contain;
}

.vintage-door-frame {
    background: url('/templates/wd-006/assets/img/frame-flower-1.webp') no-repeat center center / contain;
}

/* Adjust top-right flower position */
.flower-wrapper-right {
    right: -30px !important;
}

/* ===== Enhanced Flower Sway Animation ===== */
@keyframes sway {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    25% {
        transform: rotate(5deg) translateY(-3px);
    }

    75% {
        transform: rotate(-5deg) translateY(3px);
    }
}

/* ===== Premium Keyframe Animations ===== */

/* Gentle Float - For decorative elements */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

/* Pulse Glow - For highlights */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(50, 55, 140, 0.4);
    }

    50% {
        box-shadow: 0 0 20px 10px rgba(50, 55, 140, 0);
    }
}

/* Shimmer - For text/headings */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Breathe - Subtle scale pulse */
@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* Sparkle - For decorative stars */
@keyframes sparkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.8) rotate(180deg);
    }
}

/* Slide In Bounce */
@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    60% {
        opacity: 1;
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ===== Utility Animation Classes ===== */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-breathe {
    animation: breathe 4s ease-in-out infinite;
}

.animate-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

/* Hover micro-interactions */
.hover-lift {
    transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hover-scale {
    transition: transform 0.3s var(--ease-out-back);
}

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

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 25px rgba(50, 55, 140, 0.3);
}