/* ANEKOR – service pages animations. Load after layout.animations.css */

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

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes svBlob {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(34px, 22px);
    }
}

@keyframes svFloat {

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

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

/* ---------- Hero ---------- */
.sv-hero::before {
    animation: svBlob 14s ease-in-out infinite;
}

.sv-hero::after {
    animation: svBlob 17s ease-in-out infinite reverse;
}

.sv-hero .sv-eyebrow {
    animation: svUp .7s ease .1s backwards;
}

.sv-hero .sv-hero-title {
    animation: svUp .8s ease .25s backwards;
}

.sv-hero .sv-hero-tagline {
    animation: svUp .8s ease .45s backwards;
}

.sv-hero .sv-hero-lead {
    animation: svUp .8s ease .65s backwards;
}

.sv-hero .sv-btn {
    animation: svUp .8s ease .85s backwards;
}

/* ---------- Buttons ---------- */
.sv-btn {
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.sv-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}

.sv-btn i {
    transition: transform .3s ease;
}

.sv-btn:hover i {
    transform: translateX(6px);
}

/* ---------- What We Deliver cards ---------- */
.sv-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .3s ease;
}

.sv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(38, 94, 114, .18);
}

.sv-card-icon {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, color .3s ease;
}

.sv-card:hover .sv-card-icon {
    transform: rotate(360deg) scale(1.1);
    background: var(--c);
    color: #fff;
}

.sv-card h4 {
    transition: color .3s ease;
}

.sv-card:hover h4 {
    color: var(--c);
}

.sv-card-cta:hover h4 {
    color: #fff;
}

.sv-card-cta span i {
    display: inline-block;
    transition: transform .3s ease;
}

.sv-card-cta:hover span i {
    transform: translateX(6px);
}

.sv-card-cta:hover .sv-card-icon {
    background: rgba(255, 255, 255, .2);
}

/* ---------- Process image ---------- */
.sv-process-img {
    transition: transform .5s ease, box-shadow .5s ease;
}

.sv-process-img:hover {
    box-shadow: 0 18px 40px rgba(21, 36, 64, .2);
}

/* ---------- Benefits ---------- */
.sv-benefit {
    transition: transform .35s ease, box-shadow .35s ease;
}

.sv-benefit:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(38, 94, 114, .25);
}

.sv-benefit::after {
    transition: transform .6s ease;
}

.sv-benefit:hover::after {
    transform: scale(1.6);
}

.sv-benefit-icon {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
}

.sv-benefit:hover .sv-benefit-icon {
    transform: rotate(360deg) scale(1.1);
    background: rgba(255, 255, 255, .32);
}

/* ---------- Chips ---------- */
.sv-chips span {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.sv-chips span:hover {
    background: var(--logo-green);
    color: #fff;
    border-color: var(--logo-green);
    box-shadow: 0 8px 18px rgba(50, 159, 118, .3);
}

/* ---------- Quote + Insight ---------- */
.sv-quote,
.sv-insight {
    transition: transform .35s ease, box-shadow .35s ease;
}

.sv-quote:hover,
.sv-insight:hover {
    transform: translateY(-6px);
}

.sv-insight:hover {
    box-shadow: 0 18px 38px rgba(38, 94, 114, .18);
}

.sv-quote-mark {
    animation: svFloat 3.6s ease-in-out infinite;
}

.sv-insight-icon {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, color .3s ease;
}

.sv-insight:hover .sv-insight-icon {
    transform: rotate(360deg) scale(1.1);
    background: var(--logo-green);
    color: #fff;
}

/* ---------- CTA band ---------- */
.sv-cta::before {
    animation: svBlob 14s ease-in-out infinite;
}

.sv-cta::after {
    animation: svBlob 17s ease-in-out infinite reverse;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .sv-hero::before,
    .sv-hero::after,
    .sv-cta::before,
    .sv-cta::after,
    .sv-quote-mark,
    .sv-hero .sv-eyebrow,
    .sv-hero .sv-hero-title,
    .sv-hero .sv-hero-tagline,
    .sv-hero .sv-hero-lead,
    .sv-hero .sv-btn {
        animation: none;
    }
}