/* ===== LOADING ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

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

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

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

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

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes borderFlow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(90deg);
    }
    50% {
        transform: translateY(-40px) rotate(180deg);
    }
    75% {
        transform: translateY(-20px) rotate(270deg);
    }
}

@keyframes kenburns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    0%, 100% { opacity: 1 }
    50% { opacity: 0 }
}

/* ===== LOADING ANIMATIONS ===== */
.loading-logo {
    animation: fadeIn 1s ease forwards 0.5s;
}

.loading-logo::after {
    animation: typing 2s steps(20) forwards;
}

.loading-progress {
    animation: loadingProgress 2s ease-in-out forwards;
}

@keyframes loadingProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ===== HERO ANIMATIONS ===== */
.hero-title .title-line {
    opacity: 0;
    animation: slideInUp 1s ease forwards;
}

.hero-title .title-line:nth-child(1) {
    animation-delay: 0.3s;
}

.hero-title .title-line:nth-child(2) {
    animation-delay: 0.6s;
}

.hero-title .title-line:nth-child(3) {
    animation-delay: 0.9s;
}

.hero-title .title-line.highlight {
    position: relative;
    overflow: hidden;
}

.hero-title .title-line.highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gold);
    transform: translateX(-100%);
    animation: textReveal 1.5s ease forwards 1.2s;
}

.hero-description {
    opacity: 0;
    animation: fadeIn 1s ease forwards 1.5s;
}

.hero-buttons {
    opacity: 0;
    animation: fadeIn 1s ease forwards 1.8s;
}

.hero-scroll {
    opacity: 0;
    animation: fadeIn 1s ease forwards 2.1s;
}

.scroll-line {
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% {
        height: 40px;
        opacity: 1;
    }
    50% {
        height: 60px;
        opacity: 0.5;
    }
}

/* ===== STATS ANIMATIONS ===== */
.stat-card {
    opacity: 0;
    transform: translateY(30px);
}

.stat-card.animated {
    animation: slideInUp 0.8s ease forwards;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

.stat-number {
    position: relative;
}

.stat-number::after {
    content: attr(data-count);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    color: var(--color-gold);
    animation: countUp 2s ease-in-out forwards;
}

@keyframes countUp {
    to {
        width: 100%;
    }
}

/* ===== SERVICE CARD ANIMATIONS ===== */
.service-card {
    opacity: 0;
    transform: translateY(50px) rotateX(10deg);
}

.service-card.animated {
    animation: cardReveal 0.8s ease forwards;
}

@keyframes cardReveal {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

.service-card:nth-child(1) { animation-delay: 0.2s; }
.service-card:nth-child(2) { animation-delay: 0.4s; }
.service-card:nth-child(3) { animation-delay: 0.6s; }

.service-icon {
    animation: float 3s ease-in-out infinite;
}

.service-badge {
    animation: pulse 2s infinite;
}

.service-image img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-features li {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.service-card:hover .service-features li {
    opacity: 1;
    transform: translateX(0);
}

.service-card:hover .service-features li:nth-child(1) { transition-delay: 0.1s; }
.service-card:hover .service-features li:nth-child(2) { transition-delay: 0.2s; }
.service-card:hover .service-features li:nth-child(3) { transition-delay: 0.3s; }
.service-card:hover .service-features li:nth-child(4) { transition-delay: 0.4s; }

/* ===== BENEFIT CARD ANIMATIONS ===== */
.benefit-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

.benefit-card.animated {
    animation: benefitReveal 0.8s ease forwards;
}

@keyframes benefitReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.benefit-card:nth-child(1) { animation-delay: 0.1s; }
.benefit-card:nth-child(2) { animation-delay: 0.2s; }
.benefit-card:nth-child(3) { animation-delay: 0.3s; }
.benefit-card:nth-child(4) { animation-delay: 0.4s; }
.benefit-card:nth-child(5) { animation-delay: 0.5s; }
.benefit-card:nth-child(6) { animation-delay: 0.6s; }

.benefit-icon {
    animation: float 4s ease-in-out infinite;
}

.benefit-icon-bg {
    animation: pulse 3s infinite;
}

.benefit-hover {
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== GALLERY ANIMATIONS ===== */
.gallery-item {
    opacity: 0;
    transform: scale(0.8) rotate(5deg);
}

.gallery-item.animated {
    animation: galleryReveal 0.8s ease forwards;
}

@keyframes galleryReveal {
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }

.gallery-overlay {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay-content {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-view-image {
    animation: pulse 2s infinite;
}

/* ===== BUTTON ANIMATIONS ===== */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-whatsapp {
    animation: glow 2s infinite;
}

.btn-shine {
    animation: shimmer 3s infinite linear;
}

.btn-hero {
    animation: float 3s ease-in-out infinite;
}

.btn-hero:nth-child(1) { animation-delay: 0s; }
.btn-hero:nth-child(2) { animation-delay: 0.5s; }

/* ===== WHATSAPP FLOAT ANIMATIONS ===== */
.whatsapp-float {
    animation: floatWhatsApp 3s ease-in-out infinite;
}

@keyframes floatWhatsApp {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(-5px) rotate(2deg);
    }
    50% {
        transform: translateY(-10px) rotate(0);
    }
    75% {
        transform: translateY(-5px) rotate(-2deg);
    }
}

.float-notification {
    animation: notificationPulse 2s infinite;
}

@keyframes notificationPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

/* ===== BACKGROUND ELEMENT ANIMATIONS ===== */
.bg-element {
    animation: bgElementFloat 20s infinite linear;
}

#bg-element-1 {
    animation-duration: 25s;
    animation-delay: 0s;
}

#bg-element-2 {
    animation-duration: 30s;
    animation-delay: -10s;
}

#bg-element-3 {
    animation-duration: 20s;
    animation-delay: -5s;
}

@keyframes bgElementFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, 50px) rotate(90deg);
    }
    50% {
        transform: translate(50px, 100px) rotate(180deg);
    }
    75% {
        transform: translate(-50px, 50px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.bg-particle {
    animation: particleFloat 10s infinite linear;
}

#particle-1 {
    animation-duration: 12s;
    animation-delay: 0s;
    top: 20%;
    left: 10%;
}

#particle-2 {
    animation-duration: 15s;
    animation-delay: -3s;
    top: 60%;
    left: 80%;
}

#particle-3 {
    animation-duration: 10s;
    animation-delay: -5s;
    top: 80%;
    left: 20%;
}

#particle-4 {
    animation-duration: 18s;
    animation-delay: -7s;
    top: 40%;
    left: 90%;
}

#particle-5 {
    animation-duration: 13s;
    animation-delay: -2s;
    top: 10%;
    left: 70%;
}

/* ===== HERO BACKGROUND ANIMATIONS ===== */
.hero-bg {
    animation: kenburns 30s infinite alternate;
}

.shape {
    animation: shapeFloat 15s infinite ease-in-out;
}

.shape-1 {
    animation-delay: 0s;
}

.shape-2 {
    animation-delay: -5s;
}

.shape-3 {
    animation-delay: -10s;
}

@keyframes shapeFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, 20px);
    }
    50% {
        transform: translate(-20px, 10px);
    }
    75% {
        transform: translate(10px, -20px);
    }
}

/* ===== TEXT ANIMATIONS ===== */
.title-tag {
    animation: slideInDown 0.8s ease forwards;
}

.section-title h2 {
    opacity: 0;
    animation: slideInUp 0.8s ease forwards 0.2s;
}

.section-subtitle {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 0.4s;
}

/* ===== HOVER EFFECTS ===== */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-scale {
    transition: transform 0.3s ease;
}

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

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

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

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* ===== SCROLL ANIMATIONS ===== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RIPPLE EFFECT ===== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.ripple:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

/* ===== TYPING EFFECT ===== */
.typing-text {
    overflow: hidden;
    border-right: 2px solid var(--color-gold);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

/* ===== GRADIENT ANIMATIONS ===== */
.gradient-animate {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
    animation: scrollIndicator 2s infinite;
}

@keyframes scrollIndicator {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* ===== LOADING BAR ANIMATION ===== */
@keyframes loadingBar {
    0% {
        width: 0%;
        opacity: 1;
    }
    70% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

/* ===== FADE IN ON SCROLL ===== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== STAGGERED ANIMATIONS ===== */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
}

.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-item:nth-child(6) { transition-delay: 0.6s; }

.stagger-item.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== BOUNCE ANIMATION ===== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}

/* ===== SHAKE ANIMATION ===== */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s;
}

/* ===== FLIP ANIMATION ===== */
@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}

.flip {
    backface-visibility: visible !important;
    animation: flip 1s;
}

/* ===== ZOOM ENTRANCE ===== */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation: zoomIn 0.5s;
}

/* ===== LIGHTSPEED ENTRANCE ===== */
@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        transform: skewX(-5deg);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.lightSpeedIn {
    animation: lightSpeedIn 1s ease-out;
}

/* ===== ROLL IN ANIMATION ===== */
@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.rollIn {
    animation: rollIn 1s;
}

/* ===== ROTATE IN ANIMATION ===== */
@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateIn {
    animation: rotateIn 1s;
}

/* ===== SLIDE IN ANIMATIONS ===== */
.slideInLeft {
    animation: slideInLeft 1s;
}

.slideInRight {
    animation: slideInRight 1s;
}

.slideInUp {
    animation: slideInUp 1s;
}

.slideInDown {
    animation: slideInDown 1s;
}

/* ===== FADE IN ANIMATIONS ===== */
.fadeIn {
    animation: fadeIn 1s;
}

.fadeInUp {
    animation: fadeInUp 1s;
}

.fadeInDown {
    animation: fadeInDown 1s;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ===== BOUNCE IN ANIMATION ===== */
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation: bounceIn 0.75s;
}

/* ===== FLASH ANIMATION ===== */
@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.flash {
    animation: flash 1s;
}

/* ===== PULSE ANIMATION ===== */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    animation: pulse 1s;
}

/* ===== RUBBER BAND ANIMATION ===== */
@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    animation: rubberBand 1s;
}

/* ===== SHAKE ANIMATION ===== */
@keyframes shake {
    from, to {
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation: shake 1s;
}

/* ===== SWING ANIMATION ===== */
@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    transform-origin: top center;
    animation: swing 1s;
}

/* ===== TADA ANIMATION ===== */
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation: tada 1s;
}

/* ===== WOBBLE ANIMATION ===== */
@keyframes wobble {
    from {
        transform: translate3d(0, 0, 0);
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.wobble {
    animation: wobble 1s;
}

/* ===== JELLO ANIMATION ===== */
@keyframes jello {
    from, 11.1%, to {
        transform: translate3d(0, 0, 0);
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

.jello {
    animation: jello 1s;
}

/* ===== HEARTBEAT ANIMATION ===== */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

.heartbeat {
    animation: heartbeat 1.3s ease-in-out infinite;
}

/* ===== FADE OUT ANIMATIONS ===== */
.fadeOut {
    animation: fadeOut 1s;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    animation: fadeOutUp 1s;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    animation: fadeOutDown 1s;
}

/* ===== FLIP OUT ANIMATIONS ===== */
@keyframes flipOutX {
    from {
        transform: perspective(400px);
    }
    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    animation: flipOutX 0.75s;
}

@keyframes flipOutY {
    from {
        transform: perspective(400px);
    }
    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    animation: flipOutY 0.75s;
}

/* ===== SLIDE OUT ANIMATIONS ===== */
@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    animation: slideOutLeft 0.5s;
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    animation: slideOutRight 0.5s;
}

@keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    animation: slideOutUp 0.5s;
}

@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    animation: slideOutDown 0.5s;
}

/* ===== ZOOM OUT ANIMATIONS ===== */
@keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}

.zoomOut {
    animation: zoomOut 1s;
}

/* ===== ROLL OUT ANIMATION ===== */
@keyframes rollOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg);
    }
}

.rollOut {
    animation: rollOut 1s;
}

/* ===== ROTATE OUT ANIMATION ===== */
@keyframes rotateOut {
    from {
        transform-origin: center;
        opacity: 1;
    }
    to {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    animation: rotateOut 1s;
}

/* ===== ANIMATION CLASSES FOR JAVASCRIPT ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== ANIMATION DELAYS ===== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ===== ANIMATION DURATIONS ===== */
.duration-100 { animation-duration: 0.1s; }
.duration-200 { animation-duration: 0.2s; }
.duration-300 { animation-duration: 0.3s; }
.duration-400 { animation-duration: 0.4s; }
.duration-500 { animation-duration: 0.5s; }
.duration-600 { animation-duration: 0.6s; }
.duration-700 { animation-duration: 0.7s; }
.duration-800 { animation-duration: 0.8s; }
.duration-900 { animation-duration: 0.9s; }
.duration-1000 { animation-duration: 1s; }