/**
 * KRISHTI Premium Design System - Custom Animations Suite
 * Prefix: .sd-anim-
 */

/* ==========================================================================
   1. Initial Observer States & Transition Configs
   ========================================================================== */

/* Apply default transitions and hide elements prior to JS observer triggering */
.sd-anim-init:not(.sd-active) {
    pointer-events: none;
    will-change: transform, opacity, filter, clip-path;
}

/* 1. SilkFlow: Smooth fade-in, upward drift, and soft blur reveal */
.sd-anim-silkflow {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(12px);
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-anim-silkflow.sd-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* 2. NovaMotion: Bouncy scale-up entry with rotation drift */
.sd-anim-novamotion {
    opacity: 0;
    transform: scale(0.8) rotate(-4deg);
    transition: transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-anim-novamotion.sd-active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* 3. GlideWave: Dynamic skew-slide entering from the left */
.sd-anim-glidewave {
    opacity: 0;
    transform: translateX(-80px) skewX(8deg);
    transition: transform 1.3s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.sd-anim-glidewave.sd-active {
    opacity: 1;
    transform: translateX(0) skewX(0);
}

/* 4. VelvetShift: Fine upward shift with border and shadow elevation */
.sd-anim-velvetshift {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease;
}
.sd-anim-velvetshift.sd-active {
    opacity: 1;
    transform: translateY(0);
}

/* 5. SmoothPulse: Continuous breathing/scale animation */
.sd-anim-smoothpulse {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.sd-anim-smoothpulse.sd-active {
    animation: sd-pulse 3s ease-in-out infinite;
}
@keyframes sd-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* 6. AuraSlide: Side slide-in that reveals a colorful radial blur backdrop glow */
.sd-anim-auraslide {
    opacity: 0;
    transform: translateX(60px);
    filter: drop-shadow(0 0 0px rgba(237, 28, 36, 0));
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 1.5s ease-out;
}
.sd-anim-auraslide.sd-active {
    opacity: 1;
    transform: translateX(0);
    filter: drop-shadow(0 15px 30px rgba(237, 28, 36, 0.25));
}

/* 7. ZenMotion: Minimalist, meditative ultra-slow fade-in */
.sd-anim-zenmotion {
    opacity: 0;
    transform: translateY(15px);
    transition: transform 2.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 2.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-anim-zenmotion.sd-active {
    opacity: 1;
    transform: translateY(0);
}

/* 8. FluidSync: Coordinated container staggering its child items */
.sd-anim-fluidsync .sd-sync-item {
    opacity: 0;
    transform: translateY(35px) scale(0.96);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--stagger-index, 0) * 0.14s);
}
.sd-anim-fluidsync .sd-sync-item.sd-active,
.sd-anim-fluidsync.sd-active .sd-sync-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 9. SoftMorph: Constant organic blob morphing */
.sd-anim-softmorph {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transition: border-radius 1s ease-out;
}
.sd-anim-softmorph.sd-active {
    animation: sd-morph 9s ease-in-out infinite;
}
@keyframes sd-morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 50% 60% 70% 30% / 50% 60% 40% 70%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* 10. LumaFlow: Ambient gradient sweep/reflection shine */
.sd-anim-lumaflow {
    position: relative;
    overflow: hidden;
}
.sd-anim-lumaflow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.25) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 5;
}
.sd-anim-lumaflow.sd-active::after {
    animation: sd-shimmer 4s ease-in-out infinite;
}
@keyframes sd-shimmer {
    0% { left: -150%; }
    40% { left: 150%; }
    100% { left: 150%; }
}

/* 11. CloudDrift: Infinite floating sway */
.sd-anim-clouddrift.sd-active {
    animation: sd-drift 7s ease-in-out infinite;
}
@keyframes sd-drift {
    0% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

/* 12. MotionEase: Overshooting physical spring reveal */
.sd-anim-motionease {
    opacity: 0;
    transform: scale(0.7) translateY(45px);
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}
.sd-anim-motionease.sd-active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 13. Infinity Glide: Endless translation sway loop */
.sd-anim-infinityglide.sd-active {
    animation: sd-glide-loop 9s ease-in-out infinite;
}
@keyframes sd-glide-loop {
    0% { transform: translateX(0); }
    50% { transform: translateX(18px); }
    100% { transform: translateX(0); }
}

/* 14. PixelWave: Modern geometric slide-clip reveal */
.sd-anim-pixelwave {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.04);
    transition: clip-path 1.4s cubic-bezier(0.76, 0, 0.24, 1), 
                transform 1.4s cubic-bezier(0.76, 0, 0.24, 1), 
                opacity 1s ease;
}
.sd-anim-pixelwave.sd-active {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* 15. DreamScroll: Parallax scrolling listener class */
.sd-anim-dreamscroll {
    transform: translateY(var(--scroll-translate-y, 0px));
    opacity: var(--scroll-opacity, 1);
    will-change: transform, opacity;
}