/* =========================================================
   SVP Tech Solution — Animations & Motion Effects
   ========================================================= */

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: .8; }
}

@keyframes loaderMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

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

@keyframes floatX {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(14px); }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes spinSlow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinSlowReverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

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

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

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

/* Floating tech icons — individual offsets applied via nth-child for organic motion */
.floating-tech-icon { animation: floatY 4.5s ease-in-out infinite; }
.floating-tech-icon:nth-child(2) { animation-duration: 5.2s; animation-delay: .3s; }
.floating-tech-icon:nth-child(3) { animation-duration: 3.8s; animation-delay: .6s; }
.floating-tech-icon:nth-child(4) { animation-duration: 5.6s; animation-delay: .9s; }
.floating-tech-icon:nth-child(5) { animation-duration: 4.2s; animation-delay: 1.2s; }
.floating-tech-icon:nth-child(6) { animation-duration: 4.9s; animation-delay: .4s; }

.tech-orbit-ring.r1 { animation: spinSlow 18s linear infinite; }
.tech-orbit-ring.r2 { animation: spinSlowReverse 28s linear infinite; }

.hero-gradient-shape.one { animation: floatY 7s ease-in-out infinite; }
.hero-gradient-shape.two { animation: floatX 8s ease-in-out infinite; }

.pulse-dot-lg { position: relative; }
.pulse-dot-lg::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); animation: pulseRing 1.8s ease-out infinite;
}

.text-blink-cursor { animation: blink 1s step-start infinite; color: var(--accent); }

/* Reveal helper for elements animated purely by JS (GSAP) before AOS/GSAP init */
[data-gsap] { opacity: 0; }

/* Mouse parallax layers */
.parallax-layer { transition: transform .2s ease-out; will-change: transform; }

/* Hover lift utility */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-8px); }

/* Card gradient border on hover (uses ::after so it never collides with a
   component's own ::before overlay, e.g. .service-card) */
.gradient-border-hover { position: relative; z-index: 1; }
.gradient-border-hover::after {
    content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit;
    background: var(--gradient-primary); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: var(--transition); z-index: 2;
    pointer-events: none;
}
.gradient-border-hover:hover::after { opacity: 1; }

/* Animated gradient background utility (CTA / hero accents) */
.animated-gradient-bg {
    background: linear-gradient(-45deg, var(--primary), var(--secondary), var(--accent), var(--dark));
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
}

/* Animated text highlight marker — applied behind key words/phrases */
.highlight {
    position: relative;
    z-index: 1;
}
.highlight::after {
    content: "";
    position: absolute;
    left: -6px; right: -6px; bottom: 6%; height: 34%;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    z-index: -1;
    border-radius: 6px;
    opacity: .3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(.65, 0, .35, 1);
}
.highlight.in-view::after { transform: scaleX(1); }

/* Word-rotate for hero heading */
.word-rotate { display: inline-block; position: relative; height: 1.2em; overflow: hidden; vertical-align: bottom; }
.word-rotate span {
    position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(100%);
    transition: transform .6s cubic-bezier(.65,0,.35,1), opacity .6s ease;
}
.word-rotate span.is-active { opacity: 1; transform: translateY(0); position: relative; }
.word-rotate span.is-exit { opacity: 0; transform: translateY(-100%); }