.magnetic-btn {
    position: relative;
    overflow: hidden;
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.38) 45%, transparent 80%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.magnetic-btn:hover::before {
    transform: translateX(120%);
}

.magnetic-btn span,
.magnetic-btn i {
    position: relative;
    z-index: 1;
}

.blueprint-shape {
    animation: blueprintFloat 8s ease-in-out infinite alternate;
}

.gear-orbit {
    animation: gearRotate 20s linear infinite;
}

.hazard-stripe {
    animation: stripeSlide 9s linear infinite;
}

.parallax-img {
    will-change: transform;
}

.hover-lift {
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

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

.timeline-item {
    opacity: 1;
    transform: translateX(0);
}

@keyframes blueprintFloat {
    from {
        transform: rotate(18deg) translate3d(0, 0, 0);
    }

    to {
        transform: rotate(24deg) translate3d(18px, -26px, 0);
    }
}

@keyframes gearRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes stripeSlide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 180px 0;
    }
}