/**
 * Widget Animation Styles
 * Entrance animations and mouse effects for front-end editor widgets
 * Updated to match GSAP mockup behavior
 */

/* ═══════════════════════════════════════════════════════════════
   CSS EASING FUNCTION VARIABLES (GSAP Equivalents)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* GSAP power2.out - Natural deceleration */
    --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);

    /* GSAP power3.out - Stronger deceleration */
    --ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);

    /* GSAP back.out(1.7) - Overshoot bounce effect */
    --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* GSAP bounce.out - Bouncy effect */
    --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* GSAP elastic.out - Elastic spring effect */
    --ease-elastic-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* GSAP power1.inOut - Smooth in and out */
    --ease-power1-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);

    /* GSAP power2.inOut - Moderate in and out */
    --ease-power2-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* ═══════════════════════════════════════════════════════════════
   EDITOR MODE ANIMATION CONTROL
   In editor mode, animations are paused by default and only play
   when the user clicks the Preview button in the animation popup.
   ═══════════════════════════════════════════════════════════════ */

/*
 * Pause all widget animations in editor mode
 * The .fee-editor-active class is added to body when FEE is active
 * Widgets with .animation-preview class will play (set by preview button)
 */
.fee-editor-active .widget[class*="fee-animation-"]:not(.animation-preview) {
    animation-play-state: paused !important;
    /* Keep the initial state visible in editor - don't start from hidden */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* When preview is active, allow the animation to play */
.fee-editor-active .widget.animation-preview[class*="fee-animation-"] {
    animation-play-state: running !important;
}

/*
 * Disable mouse effects in editor mode
 * Mouse effects (hover animations) should only work on the published page,
 * not in the editor to avoid interference with editor interactions
 */
.fee-editor-active .widget[class*="fee-mouse-effect-"]:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Disable all transitions for mouse effects in editor mode */
.fee-editor-active .widget[class*="fee-mouse-effect-"] {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATION STATES
   ═══════════════════════════════════════════════════════════════ */
.scroll-animation-pending {
    opacity: 0;
    visibility: hidden;
}

.scroll-animation-playing {
    opacity: 1;
    visibility: visible;
}

/* Ensure animated widgets are visible after animation */
.widget[data-animation-entrance]:not(.scroll-animation-pending) {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   1. FADE ANIMATION
   Mockup: opacity 0→1, y: 30→0, duration: 1.5s, ease: power2.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-fade,
.fee-animation-fadeIn {
    animation-name: fadeIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Fade with directions */
.fee-animation-fade-left {
    animation-name: fadeInLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-fade-right {
    animation-name: fadeInRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-fade-top {
    animation-name: fadeInDown;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-fade-bottom {
    animation-name: fadeInUp;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   2. ZOOM ANIMATION
   Mockup: scale: 0→1, opacity: 0→1, duration: 1.5s, ease: back.out(1.7)
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-zoom,
.fee-animation-zoomIn {
    animation-name: zoomIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Zoom with directions */
.fee-animation-zoom-left {
    animation-name: zoomInLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-zoom-right {
    animation-name: zoomInRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-zoom-top {
    animation-name: zoomInTop;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-zoom-bottom {
    animation-name: zoomInBottom;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-zoom-center {
    animation-name: zoomIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   3. SLIDE ANIMATION
   Mockup: x: -200→0, opacity: 0→1, duration: 1.2s, ease: power2.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-slide {
    animation-name: slideInLeft;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Slide with directions */
.fee-animation-slide-left {
    animation-name: slideInLeft;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-slide-right {
    animation-name: slideInRight;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-slide-top {
    animation-name: slideInDown;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-slide-bottom {
    animation-name: slideInUp;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   4. ROTATING ANIMATION
   Mockup: rotation: -180→0, opacity: 0→1, duration: 1.5s, ease: power2.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-rotating {
    animation-name: rotatingIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Rotating with directions */
.fee-animation-rotating-left {
    animation-name: rotatingInLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-rotating-right {
    animation-name: rotatingInRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-rotating-center {
    animation-name: rotatingIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   5. BOUNCE ANIMATION
   Mockup: y: 150→0, scale: 0.8→1, opacity: 0→1, duration: 1.8s, ease: bounce.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-bounce {
    animation-name: bounceIn;
    animation-duration: var(--animation-duration, 1.8s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-bounce-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Bounce with directions */
.fee-animation-bounce-left {
    animation-name: bounceInLeft;
    animation-duration: var(--animation-duration, 1.8s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-bounce-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-bounce-right {
    animation-name: bounceInRight;
    animation-duration: var(--animation-duration, 1.8s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-bounce-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-bounce-top {
    animation-name: bounceInTop;
    animation-duration: var(--animation-duration, 1.8s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-bounce-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-bounce-bottom {
    animation-name: bounceIn;
    animation-duration: var(--animation-duration, 1.8s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-bounce-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-bounce-center {
    animation-name: bounceInCenter;
    animation-duration: var(--animation-duration, 1.8s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-bounce-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   6. BLUR ANIMATION
   Mockup: blur: 20px→0, scale: 1.2→1, opacity: 0→1, duration: 1.5s
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-blur {
    animation-name: blurIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   7. TADA ANIMATION
   Mockup: Complex timeline - scale wiggle with rotation ±3°
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-tada {
    animation-name: tadaIn;
    animation-duration: var(--animation-duration, 1.1s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   8. EXPAND ANIMATION
   Mockup: scale: 0→1, opacity: 0→1, duration: 1.5s, ease: power3.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-expand {
    animation-name: expandIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Expand with directions (9 directions per mockup) */
.fee-animation-expand-right {
    animation-name: expandFromRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-left {
    animation-name: expandFromLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-top {
    animation-name: expandFromTop;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-bottom {
    animation-name: expandFromBottom;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-center {
    animation-name: expandIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* 9-Direction Expand Support - Diagonal directions */
.fee-animation-expand-top-left {
    animation-name: expandFromTopLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-top-right {
    animation-name: expandFromTopRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-bottom-left {
    animation-name: expandFromBottomLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-expand-bottom-right {
    animation-name: expandFromBottomRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power3-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   9. FLIP ANIMATION
   Mockup: rotateY: -180→0, opacity: 0.3→1, duration: 1.2s, with perspective
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-flip {
    animation-name: flipInY;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    backface-visibility: visible;
}

/* Flip with directions */
.fee-animation-flip-left {
    animation-name: flipInYLeft;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-flip-right {
    animation-name: flipInYRight;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-flip-top {
    animation-name: flipInXTop;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-flip-bottom {
    animation-name: flipInXBottom;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   10. FLOAT ANIMATION
   Mockup: y: 0→-20 continuous loop, duration: 2s, ease: power1.inOut
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-float {
    animation-name: floatLoop;
    animation-duration: var(--animation-duration, 2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power1-inout);
    animation-fill-mode: both;
    animation-iteration-count: infinite; /* Always loops */
    animation-direction: alternate;
}

/* Float with directions */
.fee-animation-float-left {
    animation-name: floatLoopHorizontal;
    animation-duration: var(--animation-duration, 2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power1-inout);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.fee-animation-float-right {
    animation-name: floatLoopHorizontalRight;
    animation-duration: var(--animation-duration, 2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power1-inout);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.fee-animation-float-top,
.fee-animation-float-bottom {
    animation-name: floatLoop;
    animation-duration: var(--animation-duration, 2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power1-inout);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* ═══════════════════════════════════════════════════════════════
   11. FOLD ANIMATION
   Mockup: scaleY: 0→1, rotateX: -90→0, transform-origin: bottom, duration: 1.5s
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-fold {
    animation-name: foldInBottom;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: bottom center;
}

/* Fold with directions */
.fee-animation-fold-left {
    animation-name: foldInLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: left center;
}

.fee-animation-fold-right {
    animation-name: foldInRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: right center;
}

.fee-animation-fold-top {
    animation-name: foldInTop;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: top center;
}

.fee-animation-fold-bottom {
    animation-name: foldInBottom;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: bottom center;
}

/* ═══════════════════════════════════════════════════════════════
   12. GROW ANIMATION
   Mockup: scale: 0.1→1, opacity: 0→1, duration: 1.5s, ease: elastic.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-grow {
    animation-name: growIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-elastic-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   13. REVEAL ANIMATION
   Mockup: Mask moves x: 0→100%, duration: 1.5s, ease: power2.inOut
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-reveal {
    animation-name: revealRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Reveal with directions */
.fee-animation-reveal-left {
    animation-name: revealLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-reveal-right {
    animation-name: revealRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-reveal-top {
    animation-name: revealTop;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-reveal-bottom {
    animation-name: revealBottom;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   14. SHRINK ANIMATION
   Mockup: scale: 2→1, opacity: 0→1, duration: 1.5s, ease: power2.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-shrink {
    animation-name: shrinkIn;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   15. SHUTTERS ANIMATION
   Mockup: Two panels move apart (left: -100%, right: 100%), duration: 1.5s
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-shutters {
    animation-name: shuttersOpen;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* Shutters with directions */
.fee-animation-shutters-left,
.fee-animation-shutters-right {
    animation-name: shuttersHorizontal;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

.fee-animation-shutters-top,
.fee-animation-shutters-bottom {
    animation-name: shuttersVertical;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-inout);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
}

/* ═══════════════════════════════════════════════════════════════
   16. TILT ANIMATION
   Mockup: 3D rotateY: -25→5→0, rotateX: 10→-2→0, duration: 1.2s, ease: back.out
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-tilt {
    animation-name: tiltIn;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-style: preserve-3d;
}

/* Tilt with directions */
.fee-animation-tilt-left {
    animation-name: tiltInLeft;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-style: preserve-3d;
}

.fee-animation-tilt-right {
    animation-name: tiltInRight;
    animation-duration: var(--animation-duration, 1.2s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-back-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-style: preserve-3d;
}

/* ═══════════════════════════════════════════════════════════════
   17. TURN ANIMATION
   Mockup: rotateX: -90→0, opacity: 0→1, transform-origin: top, duration: 1.5s
   ═══════════════════════════════════════════════════════════════ */
.fee-animation-turn {
    animation-name: turnInTop;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: top center;
}

/* Turn with directions */
.fee-animation-turn-left {
    animation-name: turnInLeft;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: left center;
}

.fee-animation-turn-right {
    animation-name: turnInRight;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: right center;
}

.fee-animation-turn-top {
    animation-name: turnInTop;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: top center;
}

.fee-animation-turn-bottom {
    animation-name: turnInBottom;
    animation-duration: var(--animation-duration, 1.5s);
    animation-delay: var(--animation-delay, 0s);
    animation-timing-function: var(--ease-power2-out);
    animation-fill-mode: both;
    animation-iteration-count: var(--animation-iteration-count, 1);
    transform-origin: bottom center;
}

/* ═══════════════════════════════════════════════════════════════
   MOUSE EFFECT CLASSES
   ═══════════════════════════════════════════════════════════════ */
.fee-mouse-effect-scale {
    transition: transform 300ms ease-in-out;
}

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

.fee-mouse-effect-lift {
    transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

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

.fee-mouse-effect-glow {
    transition: box-shadow 300ms ease-in-out;
}

.fee-mouse-effect-glow:hover {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
}

.fee-mouse-effect-rotate {
    transition: transform 300ms ease-in-out;
}

.fee-mouse-effect-rotate:hover {
    transform: rotate(2deg);
}

.fee-mouse-effect-blur {
    transition: filter 300ms ease-in-out;
}

.fee-mouse-effect-blur:hover {
    filter: blur(2px);
}

.fee-mouse-effect-tilt-3d {
    transform-style: preserve-3d;
    transition: transform 300ms ease-out;
}

.fee-mouse-effect-tilt-3d:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
}

.fee-mouse-effect-track {
    transition: transform 200ms ease-out;
}

.fee-mouse-effect-resize {
    transition: transform 300ms ease-in-out;
}

.fee-mouse-effect-resize:hover {
    transform: scale(1.1);
}

.fee-mouse-effect-skew {
    transition: transform 300ms ease-in-out;
}

.fee-mouse-effect-skew:hover {
    transform: skew(-5deg, -2deg);
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - FADE ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - ZOOM ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale(0) translateX(-100px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale(0) translateX(100px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes zoomInTop {
    from {
        opacity: 0;
        transform: scale(0) translateY(-100px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes zoomInBottom {
    from {
        opacity: 0;
        transform: scale(0) translateY(100px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - SLIDE ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - ROTATING ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes rotatingIn {
    from {
        opacity: 0;
        transform: rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes rotatingInLeft {
    from {
        opacity: 0;
        transform: rotate(-180deg) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) translateX(0);
    }
}

@keyframes rotatingInRight {
    from {
        opacity: 0;
        transform: rotate(180deg) translateX(50px);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - BOUNCE ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes bounceIn {
    from {
        opacity: 0;
        transform: translateY(150px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounceInLeft {
    from {
        opacity: 0;
        transform: translateX(-150px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bounceInRight {
    from {
        opacity: 0;
        transform: translateX(150px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bounceInTop {
    from {
        opacity: 0;
        transform: translateY(-150px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounceInCenter {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - BLUR ANIMATION
   ═══════════════════════════════════════════════════════════════ */
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - TADA ANIMATION (Complex wiggle sequence)
   ═══════════════════════════════════════════════════════════════ */
@keyframes tadaIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    27% {
        opacity: 1;
        transform: scale(1);
    }
    36% {
        transform: scale(1.1) rotate(-3deg);
    }
    45% {
        transform: scale(1.1) rotate(3deg);
    }
    54% {
        transform: scale(1.1) rotate(-3deg);
    }
    63% {
        transform: scale(1.1) rotate(3deg);
    }
    72% {
        transform: scale(1.1) rotate(-3deg);
    }
    81% {
        transform: scale(1.1) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - EXPAND ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes expandIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes expandFromRight {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: right center;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: right center;
    }
}

@keyframes expandFromLeft {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: left center;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: left center;
    }
}

@keyframes expandFromTop {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: center top;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: center top;
    }
}

@keyframes expandFromBottom {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: center bottom;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: center bottom;
    }
}

/* 9-Direction Expand - Diagonal directions */
@keyframes expandFromTopLeft {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: top left;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: top left;
    }
}

@keyframes expandFromTopRight {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: top right;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: top right;
    }
}

@keyframes expandFromBottomLeft {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: bottom left;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: bottom left;
    }
}

@keyframes expandFromBottomRight {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: bottom right;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: bottom right;
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - FLIP ANIMATIONS (3D perspective)
   ═══════════════════════════════════════════════════════════════ */
@keyframes flipInY {
    0% {
        opacity: 0.3;
        transform: perspective(1200px) rotateY(-180deg);
    }
    50% {
        opacity: 0.7;
        transform: perspective(1200px) rotateY(-90deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg) scale(1);
    }
}

@keyframes flipInYLeft {
    0% {
        opacity: 0.3;
        transform: perspective(1200px) rotateY(-180deg);
        transform-origin: left center;
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg);
        transform-origin: left center;
    }
}

@keyframes flipInYRight {
    0% {
        opacity: 0.3;
        transform: perspective(1200px) rotateY(180deg);
        transform-origin: right center;
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg);
        transform-origin: right center;
    }
}

@keyframes flipInXTop {
    0% {
        opacity: 0.3;
        transform: perspective(1200px) rotateX(180deg);
        transform-origin: center top;
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg);
        transform-origin: center top;
    }
}

@keyframes flipInXBottom {
    0% {
        opacity: 0.3;
        transform: perspective(1200px) rotateX(-180deg);
        transform-origin: center bottom;
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg);
        transform-origin: center bottom;
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - FLOAT ANIMATIONS (Continuous loop)
   ═══════════════════════════════════════════════════════════════ */
@keyframes floatLoop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes floatLoopHorizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-20px);
    }
}

@keyframes floatLoopHorizontalRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(20px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - FOLD ANIMATIONS (3D perspective with scaleY)
   ═══════════════════════════════════════════════════════════════ */
@keyframes foldInBottom {
    from {
        opacity: 0;
        transform: perspective(1000px) scaleY(0) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) scaleY(1) rotateX(0deg);
    }
}

@keyframes foldInTop {
    from {
        opacity: 0;
        transform: perspective(1000px) scaleY(0) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) scaleY(1) rotateX(0deg);
    }
}

@keyframes foldInLeft {
    from {
        opacity: 0;
        transform: perspective(1000px) scaleX(0) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) scaleX(1) rotateY(0deg);
    }
}

@keyframes foldInRight {
    from {
        opacity: 0;
        transform: perspective(1000px) scaleX(0) rotateY(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) scaleX(1) rotateY(0deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - GROW ANIMATION (Elastic effect)
   ═══════════════════════════════════════════════════════════════ */
@keyframes growIn {
    from {
        opacity: 0;
        transform: scale(0.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - REVEAL ANIMATIONS (Clip-path mask)
   ═══════════════════════════════════════════════════════════════ */
@keyframes revealRight {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes revealLeft {
    from {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes revealTop {
    from {
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes revealBottom {
    from {
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - SHRINK ANIMATION
   ═══════════════════════════════════════════════════════════════ */
@keyframes shrinkIn {
    from {
        opacity: 0;
        transform: scale(2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - SHUTTERS ANIMATIONS (Split reveal)
   ═══════════════════════════════════════════════════════════════ */
@keyframes shuttersOpen {
    from {
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 1;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@keyframes shuttersHorizontal {
    from {
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 1;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@keyframes shuttersVertical {
    from {
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
        opacity: 1;
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - TILT ANIMATIONS (3D tilt with overshoot)
   ═══════════════════════════════════════════════════════════════ */
@keyframes tiltIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-25deg) rotateX(10deg);
    }
    70% {
        opacity: 1;
        transform: perspective(1000px) rotateY(5deg) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }
}

@keyframes tiltInLeft {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-35deg) rotateX(5deg);
    }
    70% {
        opacity: 1;
        transform: perspective(1000px) rotateY(5deg) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }
}

@keyframes tiltInRight {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(35deg) rotateX(5deg);
    }
    70% {
        opacity: 1;
        transform: perspective(1000px) rotateY(-5deg) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES - TURN ANIMATIONS (3D turn on X-axis)
   ═══════════════════════════════════════════════════════════════ */
@keyframes turnInTop {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg);
    }
}

@keyframes turnInBottom {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg);
    }
}

@keyframes turnInLeft {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}

@keyframes turnInRight {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}