/* Advanced Animation Presets */

/* Animation Preset Variables */
:root {
    --anim-duration-fast: 0.3s;
    --anim-duration-normal: 0.6s;
    --anim-duration-slow: 1.2s;
    --anim-duration-very-slow: 2.4s;
    --anim-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --anim-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --anim-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ANIMATION PRESET 1: SUBTLE & ELEGANT */
[data-animation="subtle"] * {
    animation-duration: var(--anim-duration-slow) !important;
    animation-timing-function: var(--anim-easing-smooth) !important;
}

[data-animation="subtle"] .hero-title {
    animation: subtle-fade-in 1.2s ease-out;
}

[data-animation="subtle"] .hero-subtitle {
    animation: subtle-slide-up 1.4s ease-out 0.2s both;
}

[data-animation="subtle"] .service-card {
    animation: subtle-scale-in 0.8s ease-out;
    animation-fill-mode: both;
}

[data-animation="subtle"] .service-card:nth-child(1) { animation-delay: 0.1s; }
[data-animation="subtle"] .service-card:nth-child(2) { animation-delay: 0.2s; }
[data-animation="subtle"] .service-card:nth-child(3) { animation-delay: 0.3s; }
[data-animation="subtle"] .service-card:nth-child(4) { animation-delay: 0.4s; }
[data-animation="subtle"] .service-card:nth-child(5) { animation-delay: 0.5s; }
[data-animation="subtle"] .service-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes subtle-fade-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes subtle-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtle-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-animation="subtle"] .float-card {
    animation: gentle-float 6s ease-in-out infinite;
}

[data-animation="subtle"] .float-card:nth-child(1) { animation-delay: 0s; }
[data-animation="subtle"] .float-card:nth-child(2) { animation-delay: 2s; }
[data-animation="subtle"] .float-card:nth-child(3) { animation-delay: 4s; }

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

/* ANIMATION PRESET 2: ENERGETIC & PLAYFUL */
[data-animation="energetic"] .hero-title {
    animation: bounce-in 1s var(--anim-easing-bounce);
}

[data-animation="energetic"] .hero-subtitle {
    animation: shake-in 0.8s ease-out 0.5s both;
}

[data-animation="energetic"] .service-card {
    animation: flip-in 0.6s ease-out;
    animation-fill-mode: both;
    transform-style: preserve-3d;
}

[data-animation="energetic"] .service-card:hover {
    animation: wiggle 0.5s ease-in-out;
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-100px);
    }
    50% {
        transform: scale(1.05) translateY(0);
    }
    70% {
        transform: scale(0.9) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes shake-in {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    60% {
        transform: translateX(20px) rotate(3deg);
    }
    80% {
        transform: translateX(-10px) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

@keyframes flip-in {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
}

[data-animation="energetic"] .float-card {
    animation: energetic-bounce 2s ease-in-out infinite;
}

@keyframes energetic-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

/* ANIMATION PRESET 3: SMOOTH & MODERN */
[data-animation="smooth"] .hero-title {
    animation: smooth-reveal 1.5s var(--anim-easing-smooth);
}

[data-animation="smooth"] .hero-subtitle {
    animation: smooth-fade-slide 1.8s var(--anim-easing-smooth) 0.3s both;
}

[data-animation="smooth"] .service-card {
    opacity: 0;
    animation: smooth-card-entry 1s var(--anim-easing-smooth) forwards;
}

[data-animation="smooth"] .service-card:nth-child(1) { animation-delay: 0.1s; }
[data-animation="smooth"] .service-card:nth-child(2) { animation-delay: 0.15s; }
[data-animation="smooth"] .service-card:nth-child(3) { animation-delay: 0.2s; }
[data-animation="smooth"] .service-card:nth-child(4) { animation-delay: 0.25s; }
[data-animation="smooth"] .service-card:nth-child(5) { animation-delay: 0.3s; }
[data-animation="smooth"] .service-card:nth-child(6) { animation-delay: 0.35s; }

@keyframes smooth-reveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        filter: blur(20px);
    }
    50% {
        opacity: 0.5;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes smooth-fade-slide {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes smooth-card-entry {
    0% {
        opacity: 0;
        transform: translateY(40px) rotateX(-10deg);
        transform-origin: top center;
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

[data-animation="smooth"] .float-card {
    animation: smooth-hover 4s ease-in-out infinite;
}

@keyframes smooth-hover {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }
    25% {
        transform: translateY(-5px) rotateZ(1deg);
    }
    75% {
        transform: translateY(5px) rotateZ(-1deg);
    }
}

/* ANIMATION PRESET 4: CINEMATIC */
[data-animation="cinematic"] .hero {
    animation: cinematic-zoom 3s ease-out;
}

[data-animation="cinematic"] .hero-title {
    animation: cinematic-text-reveal 2s ease-out 0.5s both;
}

[data-animation="cinematic"] .hero-subtitle {
    animation: cinematic-subtitle 2s ease-out 1s both;
}

@keyframes cinematic-zoom {
    from {
        transform: scale(1.2);
        filter: blur(20px);
    }
    to {
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes cinematic-text-reveal {
    0% {
        opacity: 0;
        transform: scale(0.8) translateZ(-100px);
        letter-spacing: 20px;
    }
    50% {
        opacity: 0.5;
        letter-spacing: 10px;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
        letter-spacing: normal;
    }
}

@keyframes cinematic-subtitle {
    0% {
        opacity: 0;
        transform: translateY(50px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

[data-animation="cinematic"] .service-card {
    animation: cinematic-card-reveal 1.5s ease-out both;
    animation-delay: calc(var(--card-index, 0) * 0.2s);
}

@keyframes cinematic-card-reveal {
    0% {
        opacity: 0;
        transform: translateZ(-200px) rotateY(90deg);
        filter: brightness(0);
    }
    50% {
        filter: brightness(1.5);
    }
    100% {
        opacity: 1;
        transform: translateZ(0) rotateY(0);
        filter: brightness(1);
    }
}

/* ANIMATION PRESET 5: FUTURISTIC */
[data-animation="futuristic"] .hero-title {
    animation: glitch-reveal 1.5s ease-out;
}

[data-animation="futuristic"] .hero-subtitle {
    animation: data-stream 2s ease-out 0.5s both;
}

@keyframes glitch-reveal {
    0% {
        opacity: 0;
        transform: skewX(70deg) scaleX(0.1);
        filter: hue-rotate(90deg);
    }
    30% {
        opacity: 1;
        transform: skewX(-20deg) scaleX(1.2);
        filter: hue-rotate(-90deg);
    }
    50% {
        transform: skewX(10deg) scaleX(0.9);
    }
    100% {
        opacity: 1;
        transform: skewX(0) scaleX(1);
        filter: hue-rotate(0);
    }
}

@keyframes data-stream {
    0% {
        opacity: 0;
        transform: translateY(-50px);
        mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        mask-image: linear-gradient(to bottom, black 0%, black 100%);
    }
}

[data-animation="futuristic"] .service-card {
    animation: hologram-appear 1s ease-out both;
    position: relative;
}

[data-animation="futuristic"] .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, var(--primary-color), transparent);
    animation: scan-line-vertical 2s ease-out;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes hologram-appear {
    0% {
        opacity: 0;
        transform: translateY(100px) scaleY(0.1);
        filter: brightness(2);
    }
    50% {
        transform: translateY(0) scaleY(1.1);
        filter: brightness(1.5) hue-rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: brightness(1) hue-rotate(0);
    }
}

@keyframes scan-line-vertical {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ANIMATION PRESET 6: MINIMAL */
[data-animation="minimal"] * {
    animation: none !important;
    transition: all 0.3s ease !important;
}

[data-animation="minimal"] .hero-title,
[data-animation="minimal"] .hero-subtitle,
[data-animation="minimal"] .service-card {
    opacity: 0;
    animation: minimal-fade 0.8s ease forwards !important;
}

[data-animation="minimal"] .hero-subtitle { animation-delay: 0.2s !important; }
[data-animation="minimal"] .service-card:nth-child(1) { animation-delay: 0.3s !important; }
[data-animation="minimal"] .service-card:nth-child(2) { animation-delay: 0.35s !important; }
[data-animation="minimal"] .service-card:nth-child(3) { animation-delay: 0.4s !important; }
[data-animation="minimal"] .service-card:nth-child(4) { animation-delay: 0.45s !important; }
[data-animation="minimal"] .service-card:nth-child(5) { animation-delay: 0.5s !important; }
[data-animation="minimal"] .service-card:nth-child(6) { animation-delay: 0.55s !important; }

@keyframes minimal-fade {
    to {
        opacity: 1;
    }
}

/* Hover Effects for Each Animation Preset */
[data-animation="subtle"] .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(91, 196, 200, 0.2);
}

[data-animation="energetic"] .portfolio-item:hover {
    animation: shake 0.3s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

[data-animation="smooth"] .portfolio-item:hover {
    transform: scale(1.02);
}

[data-animation="cinematic"] .portfolio-item:hover {
    animation: cinematic-pulse 1s ease-in-out;
}

@keyframes cinematic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

[data-animation="futuristic"] .portfolio-item:hover {
    animation: glitch-hover 0.3s;
}

@keyframes glitch-hover {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px) skewX(2deg); }
    40% { transform: translateX(2px) skewX(-2deg); }
    60% { transform: translateX(-1px) skewX(1deg); }
    80% { transform: translateX(1px) skewX(-1deg); }
}

/* Scroll-triggered animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animations for lists */
.stagger-animate {
    opacity: 0;
    transform: translateX(-30px);
}

.stagger-animate.in-view {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--stagger-index, 0) * 0.1s);
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Loading animations */
.loading-wave {
    display: inline-flex;
    gap: 4px;
}

.loading-wave span {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 2px;
    animation: wave 1.2s ease-in-out infinite;
}

.loading-wave span:nth-child(1) { animation-delay: 0s; }
.loading-wave span:nth-child(2) { animation-delay: 0.1s; }
.loading-wave span:nth-child(3) { animation-delay: 0.2s; }
.loading-wave span:nth-child(4) { animation-delay: 0.3s; }
.loading-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
    0%, 60%, 100% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }
    30% {
        transform: scaleY(1);
        opacity: 1;
    }
}