/**
 * Universal Scroll Animations CSS
 *
 * Comprehensive set of CSS animation classes for the scroll animation system.
 * All animations follow a consistent pattern for easy maintenance and extension.
 *
 * @package HopeInFocus2025
 */

/* ==========================================================================
   Animation Base Classes
   ========================================================================== */

/**
 * Base animation properties shared across all animations.
 */
[class*="anim-"] {
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-property: opacity, transform;
}

/**
 * Reduced motion support - respect user preferences.
 */
@media (prefers-reduced-motion: reduce) {
    [class*="anim-"] {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Fade Animations
   ========================================================================== */

/**
 * Simple fade-in animation.
 */
.anim-fade-in {
    opacity: 0;
}

.anim-fade-in.animate {
    opacity: 1;
}

/**
 * Fade-in with upward movement.
 */
.anim-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
}

@media (min-width: 768px) {
    .anim-fade-in-up {
        transform: translateY(100px);
    }
}

.anim-fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

/**
 * Fade-in with downward movement.
 */
.anim-fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
}

.anim-fade-in-down.animate {
    opacity: 1;
    transform: translateY(0);
}

/**
 * Fade-in with leftward movement.
 */
.anim-fade-in-left {
    opacity: 0;
    transform: translateX(30px);
}

.anim-fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

/**
 * Fade-in with rightward movement.
 */
.anim-fade-in-right {
    opacity: 0;
    transform: translateX(-30px);
}

.anim-fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Slide Animations
   ========================================================================== */

/**
 * Slide-up animation (no fade).
 */
.anim-slide-up {
    transform: translateY(50px);
}

.anim-slide-up.animate {
    transform: translateY(0);
}

/**
 * Slide-down animation (no fade).
 */
.anim-slide-down {
    transform: translateY(-50px);
}

.anim-slide-down.animate {
    transform: translateY(0);
}

/**
 * Slide-left animation (no fade).
 */
.anim-slide-left {
    transform: translateX(50px);
}

.anim-slide-left.animate {
    transform: translateX(0);
}

/**
 * Slide-right animation (no fade).
 */
.anim-slide-right {
    transform: translateX(-50px);
}

.anim-slide-right.animate {
    transform: translateX(0);
}

/* ==========================================================================
   Zoom Animations
   ========================================================================== */

/**
 * Zoom-in animation with fade.
 */
.anim-zoom-in {
    opacity: 0;
    transform: scale(0.8);
}

.anim-zoom-in.animate {
    opacity: 1;
    transform: scale(1);
}

/**
 * Zoom-out animation with fade.
 */
.anim-zoom-out {
    opacity: 0;
    transform: scale(1.2);
}

.anim-zoom-out.animate {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   Flip Animations
   ========================================================================== */

/**
 * Flip-X animation (horizontal flip).
 */
.anim-flip-x {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: center center;
}

.anim-flip-x.animate {
    opacity: 1;
    transform: rotateX(0);
}

/**
 * Flip-Y animation (vertical flip).
 */
.anim-flip-y {
    opacity: 0;
    transform: rotateY(-90deg);
    transform-origin: center center;
}

.anim-flip-y.animate {
    opacity: 1;
    transform: rotateY(0);
}

/* ==========================================================================
   Advanced Animations
   ========================================================================== */

/**
 * Bounce-in animation.
 */
.anim-bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.anim-bounce-in.animate {
    opacity: 1;
    transform: scale(1);
}

/**
 * Elastic-in animation.
 */
.anim-elastic-in {
    opacity: 0;
    transform: scale(0) rotate(180deg);
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.anim-elastic-in.animate {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/**
 * Slide-rotate animation.
 */
.anim-slide-rotate {
    opacity: 0;
    transform: translateY(30px) rotate(-10deg);
}

.anim-slide-rotate.animate {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* ==========================================================================
   Animation Variations - Different Timing
   ========================================================================== */

/**
 * Fast animations (0.3s).
 */
.anim-fast {
    transition-duration: 0.3s !important;
}

/**
 * Slow animations (1s).
 */
.anim-slow {
    transition-duration: 1s !important;
}

/**
 * Very slow animations (1.5s).
 */
.anim-very-slow {
    transition-duration: 1.5s !important;
}

/* ==========================================================================
   Animation Variations - Different Easing
   ========================================================================== */

/**
 * Ease-in timing.
 */
.anim-ease-in {
    transition-timing-function: ease-in !important;
}

/**
 * Ease-in-out timing.
 */
.anim-ease-in-out {
    transition-timing-function: ease-in-out !important;
}

/**
 * Linear timing.
 */
.anim-linear {
    transition-timing-function: linear !important;
}

/**
 * Bounce timing.
 */
.anim-bounce {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ==========================================================================
   Animation Variations - Different Distances
   ========================================================================== */

/**
 * Small movement animations (15px).
 */
.anim-small .anim-fade-in-up:not(.animate),
.anim-fade-in-up.anim-small:not(.animate) {
    transform: translateY(15px);
}

.anim-small .anim-fade-in-down:not(.animate),
.anim-fade-in-down.anim-small:not(.animate) {
    transform: translateY(-15px);
}

.anim-small .anim-fade-in-left:not(.animate),
.anim-fade-in-left.anim-small:not(.animate) {
    transform: translateX(15px);
}

.anim-small .anim-fade-in-right:not(.animate),
.anim-fade-in-right.anim-small:not(.animate) {
    transform: translateX(-15px);
}

/**
 * Large movement animations (60px).
 */
.anim-large .anim-fade-in-up:not(.animate),
.anim-fade-in-up.anim-large:not(.animate) {
    transform: translateY(60px);
}

.anim-large .anim-fade-in-down:not(.animate),
.anim-fade-in-down.anim-large:not(.animate) {
    transform: translateY(-60px);
}

.anim-large .anim-fade-in-left:not(.animate),
.anim-fade-in-left.anim-large:not(.animate) {
    transform: translateX(60px);
}

.anim-large .anim-fade-in-right:not(.animate),
.anim-fade-in-right.anim-large:not(.animate) {
    transform: translateX(-60px);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/**
 * Disable animation (useful for debugging or user preferences).
 */
.anim-disabled,
.anim-disabled [class*="anim-"] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/**
 * Force animation to completed state.
 */
.anim-force-complete [class*="anim-"] {
    opacity: 1 !important;
    transform: none !important;
}