/* ==========================================================================
   GLOBAL ANIMATION STYLES
   This file contains animation-only CSS shared across pages.
   --------------------------------------------------------------------------
   1) SplitText line reveal helpers (.p-text -> .text-mask/.text-line)
   2) GSAP directional fade helpers (.bdFadeLeft/.bdFadeRight)
   3) Scroll image reveal helpers (.animate-image)
   4) Service project/tilt/magnetic performance hints
   ========================================================================== */

/* SplitText wrappers injected by animation.js for text reveal */
.text-mask {
    overflow: hidden;
    white-space: nowrap;
    transition: none !important;
}

.text-line {
    transform: translate(0%, 150%);
    transition: none !important;
}

/* Initial states for directional fade-in animations */
.bdFadeLeft,
.bdFadeRight {
    will-change: transform, opacity;
}

/* Scroll image reveal target elements */
.animate-image {
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Service project cards animated with ScrollTrigger */
.project__item {
    will-change: transform, opacity;
}

/* Magnetic button hover motion */
.btn_wrapper .btn-moving,
#btn_wrapper .btn-moving {
    will-change: transform;
}

/* Header sticky enter animation (used by .home-header.sticky in default.css) */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Footer heading accent shimmer (used by .site-footer-heading::before in default.css) */
@keyframes siteFooterHeadingAccentFlow {
    0% {
        background-position: 0% 30%;
    }
    100% {
        background-position: 0% 70%;
    }
}

/* Legacy animation keyframes moved from style.css */
@keyframes letsTalkDance {
    0% { transform: translateY(0) scaleY(1) scaleX(1); color: #ffffff; }
    8% { transform: translateY(12px) scaleY(0.72) scaleX(1.14); color: #ffffff; }
    16% { transform: translateY(14px) scaleY(0.68) scaleX(1.18); color: #3f6cff; }
    28% { transform: translateY(-55px) scaleY(1.16) scaleX(0.92); color: #3f6cff; }
    38% { transform: translateY(14px) scaleY(0.85) scaleX(1.08); color: #3f6cff; }
    46% { transform: translateY(-10px) scaleY(1.04) scaleX(0.97); color: #3f6cff; }
    52% { transform: translateY(4px) scaleY(0.97) scaleX(1.02); color: #8aabff; }
    57% { transform: translateY(-1px) scaleY(1.01) scaleX(1); color: #c0d4ff; }
    62% { transform: translateY(0) scaleY(1) scaleX(1); color: #ffffff; }
    100% { transform: translateY(0) scaleY(1) scaleX(1); color: #ffffff; }
}

@keyframes arrowSlide {
    0% { transform: translate(0, 0); opacity: 1; }
    35% { transform: translate(35px, -35px); opacity: 0; }
    50% { transform: translate(-35px, 35px); opacity: 0; }
    100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes contactSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bgDrift {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(2%, 1%); }
}

@keyframes bgDriftAlt {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-2%, -1%); }
}

@keyframes pricingSubHeadingSlideUp {
    0% { opacity: 0; transform: translateY(20px) scaleY(0.9); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes pricingSubHeadingSlideRight {
    0% { opacity: 0; transform: translate(56px, 0); }
    100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes pricingSubHeadingSlideLeft {
    0% { opacity: 0; transform: translate(-56px, 0); }
    100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes contactSubmitArrowSlide {
    0% { transform: translate(0, 0); opacity: 1; }
    35% { transform: translate(14px, -14px); opacity: 0; }
    50% { transform: translate(-14px, 14px); opacity: 0; }
    100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes aboutWelcomeAccentBlueStretch {
    from { width: 18%; }
    to { width: 88%; }
}