/* Custom Animations System for Handyman Bee using Motion */

/* Initial states for load animations to avoid content flash */
.motion-hero-img {
    opacity: 0;
    filter: blur(20px);
    transform: scale(1.08);
    will-change: opacity, filter, transform;
}

.motion-hero-title {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}

.motion-hero-text {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.motion-hero-cta {
    opacity: 0;
    transform: translateY(15px);
    will-change: opacity, transform;
}

/* Scroll reveal initial states */
.motion-reveal {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(30px);
    will-change: opacity, filter, transform;
}

/* Card hover animation enhancement */
.motion-card-hover {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.motion-card-hover:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px -15px rgba(22, 58, 95, 0.15) !important;
}

/* Image hover zoom effect */
.motion-img-hover {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.motion-img-hover:hover {
    transform: scale(1.04) !important;
    filter: brightness(1.04) !important;
}

/* Card child background image hover zoom effect */
.motion-card-bg-img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.motion-card-hover:hover .motion-card-bg-img {
    transform: scale(1.05) !important;
}

/* Typewriter cursor blinking animation */
.typewriter-cursor {
    animation: blink 0.75s step-end infinite;
    color: #F5A623;
    margin-left: 2px;
    font-weight: bold;
}

@keyframes blink {
    from, to { color: transparent }
    50% { color: #F5A623; }
}

/* Fade-up transition between typewriter heading slides */
@keyframes typewriterFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.typewriter-fade-up {
    animation: typewriterFadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth text transition for fixed heading prefix */
.typewriter-fixed {
    display: inline-block;
    transition: opacity 0.2s ease;
}