/* ================================================================
   AMMAS GRAPHIC — Motion Library
   ================================================================ */

@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

@keyframes floatSlow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

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

    50% {
        transform: scale(1.05);
    }
}

@keyframes pulseGlow {
    0%,
    100% {
        box-shadow: 0 0 22px rgba(108, 60, 225, 0.35),
                    0 0 0 0 rgba(108, 60, 225, 0.25);
    }

    50% {
        box-shadow: 0 0 45px rgba(108, 60, 225, 0.65),
                    0 0 0 12px rgba(108, 60, 225, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    100% {
        background-position: 200% 0;
    }
}

@keyframes blobMorph {
    0%,
    100% {
        border-radius: 42% 58% 62% 38% / 44% 38% 62% 56%;
    }

    33% {
        border-radius: 58% 42% 38% 62% / 55% 62% 38% 45%;
    }

    66% {
        border-radius: 35% 65% 53% 47% / 65% 42% 58% 35%;
    }
}

/* ----------------------------------------------------------------
   Premium hero motion system
   ---------------------------------------------------------------- */
@keyframes heroHeadingFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroBrandReveal {
    from {
        opacity: 0;
        transform: scale(0.95);
        text-shadow: 0 0 0 rgba(255, 107, 53, 0);
    }

    to {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 18px rgba(255, 107, 53, 0.35),
                     0 0 55px rgba(255, 107, 53, 0.18);
    }
}

@keyframes heroSoftFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes heroLineExpand {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes heroTextReveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

@keyframes heroTaglineFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroActionsFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTeamReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }

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

@keyframes heroGridDrift {
    from {
        background-position: 0 0;
        transform: scale(1);
    }

    to {
        background-position: 9px 7px;
        transform: scale(1.01);
    }
}

@keyframes heroAmbientGlow {
    from {
        opacity: 0.72;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes heroDepthZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.025);
    }
}

@keyframes heroGeometryDriftOne {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(9px, -7px, 0);
    }
}

@keyframes heroGeometryDriftTwo {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-10px, 8px, 0);
    }
}

@keyframes heroGeometryDriftThree {
    from {
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    to {
        transform: translate3d(-7px, 9px, 0) rotate(45deg);
    }
}

@keyframes heroGeometryDriftFour {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(6px, -6px, 0);
    }
}

@keyframes heroParticlesOne {
    from {
        opacity: 0.08;
        transform: translate3d(0, 0, 0) rotate(12deg);
    }

    to {
        opacity: 0.15;
        transform: translate3d(-8px, 10px, 0) rotate(12deg);
    }
}

@keyframes heroParticlesTwo {
    from {
        opacity: 0.07;
        transform: translate3d(0, 0, 0) rotate(-12deg);
    }

    to {
        opacity: 0.13;
        transform: translate3d(10px, -8px, 0) rotate(-12deg);
    }
}

@keyframes heroIconFloat {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes whatsappPulse {
    0%,
    100% {
        box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35),
                    0 0 0 0 rgba(37, 211, 102, 0.3);
    }

    50% {
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4),
                    0 0 0 12px rgba(37, 211, 102, 0);
    }
}

@keyframes portfolioEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }

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

@keyframes lightboxZoom {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes statusIn {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typewriterCursor {
    0%,
    42% {
        opacity: 1;
    }

    58%,
    100% {
        opacity: 0.2;
    }
}

.form-status.is-visible {
    animation: statusIn 300ms ease both;
}

.lightbox.is-open .lightbox__preview {
    animation: lightboxZoom 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}