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

.service-card:hover .firework span {
    animation: firework-burst 0.9s ease-out forwards;
}

.service-card .firework span:nth-child(1)  { --angle: 0deg;   animation-delay: 0s;   }
.service-card .firework span:nth-child(2)  { --angle: 22.5deg; animation-delay: 0.02s; }
.service-card .firework span:nth-child(3)  { --angle: 45deg;  animation-delay: 0.04s; }
.service-card .firework span:nth-child(4)  { --angle: 67.5deg; animation-delay: 0.06s; }
.service-card .firework span:nth-child(5)  { --angle: 90deg;  animation-delay: 0.08s; }
.service-card .firework span:nth-child(6)  { --angle: 112.5deg;animation-delay: 0.1s;  }
.service-card .firework span:nth-child(7)  { --angle: 135deg; animation-delay: 0.12s; }
.service-card .firework span:nth-child(8)  { --angle: 157.5deg;animation-delay: 0.14s; }
.service-card .firework span:nth-child(9)  { --angle: 180deg; animation-delay: 0.16s; }
.service-card .firework span:nth-child(10) { --angle: 202.5deg;animation-delay: 0.18s; }
.service-card .firework span:nth-child(11) { --angle: 225deg; animation-delay: 0.2s;  }
.service-card .firework span:nth-child(12) { --angle: 247.5deg;animation-delay: 0.22s; }
.service-card .firework span:nth-child(13) { --angle: 270deg; animation-delay: 0.24s; }
.service-card .firework span:nth-child(14) { --angle: 292.5deg;animation-delay: 0.26s; }
.service-card .firework span:nth-child(15) { --angle: 315deg; animation-delay: 0.28s; }
.service-card .firework span:nth-child(16) { --angle: 337.5deg;animation-delay: 0.3s;  }

@keyframes firework-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scaleY(0.3);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(20px) scaleY(1);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(140px) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(220px) scaleY(0.2);
    }
}

.service-card--chart:hover .chart-bar--h1 { animation: chart-h 0.55s cubic-bezier(.2,.8,.2,1) 0.05s forwards; }
.service-card--chart:hover .chart-bar--v1 { animation: chart-v 0.55s cubic-bezier(.2,.8,.2,1) 0.2s  forwards; }
.service-card--chart:hover .chart-dot--1  { animation: chart-pop 0.65s cubic-bezier(.34,1.56,.64,1) 0.35s forwards; }
.service-card--chart:hover .chart-bar--h2 { animation: chart-h 0.55s cubic-bezier(.2,.8,.2,1) 0.5s forwards; }
.service-card--chart:hover .chart-bar--v2 { animation: chart-v 0.55s cubic-bezier(.2,.8,.2,1) 0.65s forwards; }
.service-card--chart:hover .chart-dot--2  { animation: chart-pop 0.65s cubic-bezier(.34,1.56,.64,1) 0.8s  forwards; }
.service-card--chart:hover .chart-bar--h3 { animation: chart-h 0.55s cubic-bezier(.2,.8,.2,1) 0.95s forwards; }
.service-card--chart:hover .chart-bar--v3 { animation: chart-v 0.55s cubic-bezier(.2,.8,.2,1) 1.1s  forwards; }
.service-card--chart:hover .chart-dot--3  { animation: chart-pop 0.65s cubic-bezier(.34,1.56,.64,1) 1.25s forwards; }
.service-card--chart:hover .chart-bar--h4 { animation: chart-h 0.55s cubic-bezier(.2,.8,.2,1) 1.4s  forwards; }
.service-card--chart:hover .chart-bar--v4 { animation: chart-v 0.55s cubic-bezier(.2,.8,.2,1) 1.55s forwards; }
.service-card--chart:hover .chart-dot--4  { animation: chart-pop 0.65s cubic-bezier(.34,1.56,.64,1) 1.7s  forwards; }
.service-card--chart:hover .chart-arrow {
    animation: chart-arrow-rise 1.15s cubic-bezier(.2,.8,.2,1) 1.85s forwards;
}

@keyframes chart-h {
    0%   { opacity: 0; transform: scaleX(0); }
    30%  { opacity: 1; transform: scaleX(1); }
    80%  { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(0.2); transform-origin: right center; }
}

@keyframes chart-v {
    0%   { opacity: 0; transform: scaleY(0); }
    30%  { opacity: 1; transform: scaleY(1); }
    80%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0.2); transform-origin: center top; }
}

@keyframes chart-pop {
    0%   { opacity: 0; transform: translate(-50%, 50%) scale(0); }
    35%  { opacity: 1; transform: translate(-50%, 50%) scale(1.4); }
    50%  { opacity: 1; transform: translate(-50%, 50%) scale(1); }
    90%  { opacity: 1; transform: translate(-50%, 50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 50%) scale(0) translateY(-10px); }
}

@keyframes chart-arrow-rise {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateY(-340px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-520px) scale(0.6);
        filter: blur(4px);
    }
}

.service-card--firework-out:hover .firework span {
    animation: firework-burst-out 1s ease-out forwards;
}

.service-card--firework-out .firework span:nth-child(1)  { --angle: 0deg;   --dist: 380px; animation-delay: 0s;    }
.service-card--firework-out .firework span:nth-child(2)  { --angle: 22.5deg; --dist: 360px; animation-delay: 0.02s; }
.service-card--firework-out .firework span:nth-child(3)  { --angle: 45deg;  --dist: 400px; animation-delay: 0.04s; }
.service-card--firework-out .firework span:nth-child(4)  { --angle: 67.5deg; --dist: 370px; animation-delay: 0.06s; }
.service-card--firework-out .firework span:nth-child(5)  { --angle: 90deg;  --dist: 420px; animation-delay: 0.08s; }
.service-card--firework-out .firework span:nth-child(6)  { --angle: 112.5deg;--dist: 390px; animation-delay: 0.1s;  }
.service-card--firework-out .firework span:nth-child(7)  { --angle: 135deg; --dist: 410px; animation-delay: 0.12s; }
.service-card--firework-out .firework span:nth-child(8)  { --angle: 157.5deg;--dist: 365px; animation-delay: 0.14s; }
.service-card--firework-out .firework span:nth-child(9)  { --angle: 180deg; --dist: 430px; animation-delay: 0.16s; }
.service-card--firework-out .firework span:nth-child(10) { --angle: 202.5deg;--dist: 375px; animation-delay: 0.18s; }
.service-card--firework-out .firework span:nth-child(11) { --angle: 225deg; --dist: 395px; animation-delay: 0.2s;  }
.service-card--firework-out .firework span:nth-child(12) { --angle: 247.5deg;--dist: 415px; animation-delay: 0.22s; }
.service-card--firework-out .firework span:nth-child(13) { --angle: 270deg; --dist: 425px; animation-delay: 0.24s; }
.service-card--firework-out .firework span:nth-child(14) { --angle: 292.5deg;--dist: 385px; animation-delay: 0.26s; }
.service-card--firework-out .firework span:nth-child(15) { --angle: 315deg; --dist: 405px; animation-delay: 0.28s; }
.service-card--firework-out .firework span:nth-child(16) { --angle: 337.5deg;--dist: 395px; animation-delay: 0.3s;  }

@keyframes firework-burst-out {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scaleY(0.2) scaleX(0.5);
        filter: blur(2px);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(30px) scaleY(1.2) scaleX(1.2);
        filter: blur(0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--dist) * 0.6)) scaleY(1) scaleX(1);
        filter: blur(0);
    }
    85% {
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(var(--dist)) scaleY(0.6) scaleX(0.9);
        filter: blur(0.5px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--dist) + 60px)) scaleY(0.1) scaleX(0.5);
        filter: blur(3px);
    }
}

.service-card--rocket .rocket-firework--1 .rocket-dot,
.service-card--rocket .rocket-firework--1 .rocket-trail {
    animation-delay: 0s;
}
.service-card--rocket .rocket-firework--1 .burst {
    animation-delay: 0.85s;
}
.service-card--rocket .rocket-firework--2 .rocket-dot,
.service-card--rocket .rocket-firework--2 .rocket-trail {
    animation-delay: 0.45s;
}
.service-card--rocket .rocket-firework--2 .burst {
    animation-delay: 1.3s;
}
.service-card--rocket .rocket-firework--3 .rocket-dot,
.service-card--rocket .rocket-firework--3 .rocket-trail {
    animation-delay: 0.95s;
}
.service-card--rocket .rocket-firework--3 .burst {
    animation-delay: 1.8s;
}

.service-card--rocket:hover .rocket-dot {
    animation-name: rocket-up;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(.5,.2,.4,1);
    animation-fill-mode: forwards;
}
.service-card--rocket:hover .rocket-trail {
    animation-name: rocket-trail;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(.5,.2,.4,1);
    animation-fill-mode: forwards;
}
.service-card--rocket:hover .burst {
    animation-name: rocket-burst;
    animation-duration: 1.1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes rocket-up {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.4);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -25px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translate(-50%, -380px) scale(1.2);
    }
    95% {
        opacity: 1;
        transform: translate(-50%, -400px) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -420px) scale(2.5);
    }
}

@keyframes rocket-trail {
    0% {
        opacity: 0;
        height: 0;
        transform: translate(-50%, 0);
    }
    10% {
        opacity: 0.95;
        height: 10px;
        transform: translate(-50%, -15px);
    }
    30% {
        opacity: 1;
        height: 90px;
    }
    60% {
        opacity: 1;
        height: 70px;
    }
    90% {
        opacity: 0.7;
        height: 30px;
    }
    100% {
        opacity: 0;
        height: 0;
        transform: translate(-50%, -400px);
    }
}

@keyframes rocket-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -400px) scale(0);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -400px) scale(1);
    }
    60% {
        opacity: 1;
        transform: translate(calc(-50% + var(--x-end, -100px)), calc(-400px + var(--y-end, -100px))) scale(1);
    }
    85% {
        opacity: 0.6;
        transform: translate(calc(-50% + var(--x-end, -100px)), calc(-400px + var(--y-end, -100px))) scale(0.7);
        filter: blur(0.5px);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x-end, -100px) * 1.2), calc(-400px + var(--y-end, -100px) * 1.2 - 60px)) scale(0.1);
        filter: blur(3px);
    }
}

.service-card--hud .hud-frame--1  { --fx:  320px; --fy: -260px; --rot:   15deg; --shx:  380px; --shy: -310px; --srot:   45deg; }
.service-card--hud .hud-frame--2  { --fx: -300px; --fy: -240px; --rot:  -20deg; --shx: -360px; --shy: -290px; --srot:  -50deg; }
.service-card--hud .hud-frame--3  { --fx:  280px; --fy:  230px; --rot:   25deg; --shx:  340px; --shy:  280px; --srot:   60deg; }
.service-card--hud .hud-frame--4  { --fx: -270px; --fy:  220px; --rot:  -10deg; --shx: -330px; --shy:  270px; --srot:  -40deg; }
.service-card--hud .hud-frame--5  { --fx:  350px; --fy:    0px; --rot:   40deg; --shx:  420px; --shy:    0px; --srot:   80deg; }
.service-card--hud .hud-frame--6  { --fx: -340px; --fy:  -10px; --rot:  -35deg; --shx: -410px; --shy:  -10px; --srot:  -75deg; }
.service-card--hud .hud-frame--7  { --fx:  -10px; --fy: -320px; --rot:   12deg; --shx:  -10px; --shy: -380px; --srot:   30deg; }
.service-card--hud .hud-frame--8  { --fx:   10px; --fy:  310px; --rot:  -15deg; --shx:   10px; --shy:  370px; --srot:  -35deg; }
.service-card--hud .hud-frame--9  { --fx: -290px; --fy: -190px; --rot:   55deg; --shx: -350px; --shy: -230px; --srot:  100deg; }
.service-card--hud .hud-frame--10 { --fx:  300px; --fy:  200px; --rot:  -50deg; --shx:  360px; --shy:  240px; --srot: -105deg; }
.service-card--hud .hud-frame--11 { --fx: -260px; --fy:  270px; --rot:   70deg; --shx: -310px; --shy:  320px; --srot:  120deg; }
.service-card--hud .hud-frame--12 { --fx:  330px; --fy: -210px; --rot:  -60deg; --shx:  390px; --shy: -250px; --srot: -125deg; }
.service-card--hud .hud-frame--13 { --fx:  -50px; --fy:  330px; --rot:   30deg; --shx:  -60px; --shy:  390px; --srot:   70deg; }
.service-card--hud .hud-frame--14 { --fx:   40px; --fy: -340px; --rot:  -25deg; --shx:   50px; --shy: -400px; --srot:  -65deg; }
.service-card--hud .hud-frame--15 { --fx: -380px; --fy:   50px; --rot:   80deg; --shx: -450px; --shy:   60px; --srot:  140deg; }
.service-card--hud .hud-frame--16 { --fx:  370px; --fy:  -40px; --rot:  -75deg; --shx:  440px; --shy:  -50px; --srot: -145deg; }

.service-card--hud:hover .hud-frame {
    animation: hud-gather 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
.service-card--hud:hover .hud-frame--1  { animation-delay: 0s;    }
.service-card--hud:hover .hud-frame--2  { animation-delay: 0.06s; }
.service-card--hud:hover .hud-frame--3  { animation-delay: 0.12s; }
.service-card--hud:hover .hud-frame--4  { animation-delay: 0.18s; }
.service-card--hud:hover .hud-frame--5  { animation-delay: 0.24s; }
.service-card--hud:hover .hud-frame--6  { animation-delay: 0.3s;  }
.service-card--hud:hover .hud-frame--7  { animation-delay: 0.36s; }
.service-card--hud:hover .hud-frame--8  { animation-delay: 0.42s; }
.service-card--hud:hover .hud-frame--9  { animation-delay: 0.09s; }
.service-card--hud:hover .hud-frame--10 { animation-delay: 0.15s; }
.service-card--hud:hover .hud-frame--11 { animation-delay: 0.21s; }
.service-card--hud:hover .hud-frame--12 { animation-delay: 0.27s; }
.service-card--hud:hover .hud-frame--13 { animation-delay: 0.07s; }
.service-card--hud:hover .hud-frame--14 { animation-delay: 0.13s; }
.service-card--hud:hover .hud-frame--15 { animation-delay: 0.19s; }
.service-card--hud:hover .hud-frame--16 { animation-delay: 0.25s; }
.service-card--hud:hover .hud-scan--h {
    animation: hud-scan-h 1.4s linear 0.2s forwards;
}
.service-card--hud:hover .hud-scan--v {
    animation: hud-scan-v 1.4s linear 0.2s forwards;
}
.service-card--hud:hover .hud-core {
    animation: hud-core-flash 0.9s cubic-bezier(.2,.8,.2,1) 1.4s forwards;
}
.service-card--hud:hover .hud-shard {
    animation: hud-shard-burst 1.6s cubic-bezier(.2,.8,.2,1) 1.5s forwards;
}

@keyframes hud-gather {
    0% {
        opacity: 0;
        border-color: transparent;
        box-shadow: 0 0 0 transparent;
        transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(0.2) rotate(var(--rot));
    }
    25% {
        opacity: 0.6;
        border-color: #ff5252;
        box-shadow: 0 0 10px rgba(255,50,50,0.6), inset 0 0 10px rgba(255,50,50,0.15);
    }
    55% {
        opacity: 1;
        border-color: #ff3333;
        box-shadow: 0 0 16px #ff2222, inset 0 0 16px rgba(255,50,50,0.25);
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    85% {
        opacity: 1;
        border-color: #ff3333;
        box-shadow: 0 0 22px #ff2222, inset 0 0 22px rgba(255,50,50,0.3);
        transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
    }
    100% {
        opacity: 0;
        border-color: #ff8080;
        box-shadow: 0 0 0 transparent;
        transform: translate(calc(-50% + var(--shx)), calc(-50% + var(--shy))) scale(1.4) rotate(var(--srot));
    }
}

@keyframes hud-scan-h {
    0%   { opacity: 0; transform: translate(-230px, -50%); }
    20%  { opacity: 1; }
    50%  { opacity: 1; transform: translate(230px, -50%); }
    80%  { opacity: 1; transform: translate(-230px, -50%); }
    100% { opacity: 0; transform: translate(230px, -50%); }
}

@keyframes hud-scan-v {
    0%   { opacity: 0; transform: translate(-50%, -170px); }
    20%  { opacity: 1; }
    50%  { opacity: 1; transform: translate(-50%, 170px); }
    80%  { opacity: 1; transform: translate(-50%, -170px); }
    100% { opacity: 0; transform: translate(-50%, 170px); }
}

@keyframes hud-core-flash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0);   box-shadow: 0 0 0 transparent; }
    30%  { opacity: 1; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 20px #ff3333, 0 0 40px #cc0000, 0 0 60px #990000; }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 45px #ff2222, 0 0 90px #cc0000, 0 0 135px #990000; }
    70%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3.5); box-shadow: 0 0 0 transparent; filter: blur(6px); }
}

@keyframes hud-shard-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    }
    60% {
        opacity: 1;
        transform: translate(calc(-50% + var(--sx) * 0.9), calc(-50% + var(--sy) * 0.9)) scale(1) rotate(calc(var(--sr) * 0.7));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy) - 40px)) scale(0.3) rotate(var(--sr));
        filter: blur(2px);
    }
}

@keyframes seo-arrow-pulse {
    from { transform: translateX(-50%) translateY(0); filter: drop-shadow(0 0 6px #ff2222); }
    to   { transform: translateX(-50%) translateY(-6px); filter: drop-shadow(0 0 14px #ff0000) drop-shadow(0 0 24px #ff3300); }
}

.service-card--seo:hover .seo-shard { animation: none; }

.service-card--seo:hover .seo-bar {
    opacity: 1;
    transform: scaleX(1);
}
.service-card--seo:hover .seo-chaser {
    animation: seo-chaser-rise 2.8s cubic-bezier(.3,.7,.2,1) 0.6s forwards;
}
.service-card--seo:hover .seo-flash--1 { animation: seo-rank-flash 0.9s ease-out 0.68s forwards; }
.service-card--seo:hover .seo-flash--2 { animation: seo-rank-flash 0.9s ease-out 0.96s forwards; }
.service-card--seo:hover .seo-flash--3 { animation: seo-rank-flash 0.9s ease-out 1.24s forwards; }
.service-card--seo:hover .seo-flash--4 { animation: seo-rank-flash 0.9s ease-out 1.52s forwards; }
.service-card--seo:hover .seo-flash--5 { animation: seo-rank-flash 0.9s ease-out 1.8s forwards;  }
.service-card--seo:hover .seo-flash--6 { animation: seo-rank-flash 0.9s ease-out 2.08s forwards; }

.service-card--seo:hover .seo-bar--6 { animation: seo-bar-takeover 1.3s ease 0.66s forwards, seo-bar-fadeout 1.1s ease-out 2.4s forwards; }
.service-card--seo:hover .seo-bar--5 { animation: seo-bar-takeover 1.3s ease 0.94s forwards, seo-bar-fadeout 1.1s ease-out 2.5s forwards; }
.service-card--seo:hover .seo-bar--4 { animation: seo-bar-takeover 1.3s ease 1.22s forwards, seo-bar-fadeout 1.1s ease-out 2.6s forwards; }
.service-card--seo:hover .seo-bar--3 { animation: seo-bar-takeover 1.3s ease 1.5s forwards, seo-bar-fadeout 1.1s ease-out 2.7s forwards; }
.service-card--seo:hover .seo-bar--2 { animation: seo-bar-takeover 1.3s ease 1.78s forwards, seo-bar-fadeout 1.1s ease-out 2.8s forwards; }
.service-card--seo:hover .seo-bar--1 { animation: seo-bar-takeover-final 1.5s ease 2.06s forwards; }

.service-card--seo:hover .seo-win--top {
    animation: seo-win-burst 1.2s cubic-bezier(.34,1.56,.64,1) 2.2s forwards;
}
.service-card--seo:hover .seo-win--crown {
    animation: seo-crown-drop 0.9s cubic-bezier(.34,1.56,.64,1) 2.6s forwards;
}

@keyframes seo-bar-in {
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}

@keyframes seo-bar-stay {
    from { opacity: 1; transform: scaleX(1); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes seo-bar-fadeout {
    0%   { opacity: 1; transform: scale(1); background: rgba(255,240,240,0.35); border-color: rgba(255,140,140,0.78); filter: blur(0); box-shadow: inset 0 0 0 1px rgba(255,180,180,0.4); }
    30%  { opacity: 1; transform: scale(1.01); background: rgba(255,232,232,0.48); border-color: rgba(255,125,125,0.88); box-shadow: inset 0 0 0 1px rgba(255,160,160,0.55); }
    70%  { opacity: 0.5; transform: scale(1.03); background: rgba(255,242,242,0.2); filter: blur(0.4px); }
    100% { opacity: 0; transform: scale(1.05); background: rgba(255,248,248,0.03); border-color: transparent; filter: blur(2px); box-shadow: none; }
}

@keyframes seo-chaser-rise {
    0% {
        opacity: 0;
        transform: translateY(70px);
    }
    6% {
        opacity: 1;
        transform: translateY(54px);
    }
    12% { transform: translateY(54px);   }
    22% { transform: translateY(54px);   }
    24% { transform: translateY(0px);    }
    34% { transform: translateY(0px);    }
    36% { transform: translateY(-54px);  }
    46% { transform: translateY(-54px);  }
    48% { transform: translateY(-108px); }
    58% { transform: translateY(-108px); }
    60% { transform: translateY(-162px); }
    70% { transform: translateY(-162px); }
    72% { transform: translateY(-216px); }
    82% { transform: translateY(-216px); }
    84% { transform: translateY(-242px); }
    88% { transform: translateY(-268px); }
    100% {
        opacity: 0;
        transform: translateY(-680px) scale(1.8);
        filter: blur(3px);
    }
}

@keyframes seo-rank-flash {
    0% {
        opacity: 0;
        transform: scaleX(0.3);
        border-color: transparent;
        background: transparent;
        box-shadow: 0 0 0 transparent;
    }
    25% {
        opacity: 1;
        transform: scaleX(1);
        border-color: #ff3333;
        background: rgba(255, 200, 200, 0.5);
        box-shadow: 0 0 18px #ff2222, inset 0 0 14px rgba(255,80,80,0.5);
    }
    60% {
        opacity: 1;
        transform: scaleX(1.08);
        border-color: #cc0000;
        background: rgba(255, 160, 160, 0.45);
        box-shadow: 0 0 30px #ff1111, inset 0 0 22px rgba(255,80,80,0.6);
    }
    100% {
        opacity: 0;
        transform: scaleX(1.35) translateX(60px);
        border-color: transparent;
        background: transparent;
        box-shadow: 0 0 0 transparent;
    }
}

@keyframes seo-bar-takeover {
    0% {
        background: rgba(255, 240, 240, 0.35);
        border-color: rgba(255, 140, 140, 0.78);
        transform: scale(1);
        box-shadow: inset 0 0 0 1px rgba(255, 180, 180, 0.4), 0 0 2px rgba(255, 160, 160, 0.35);
    }
    18% {
        background: rgba(255, 225, 225, 0.55);
        border-color: rgba(255, 100, 100, 0.92);
        transform: scale(1.06);
        box-shadow: 0 0 12px rgba(255, 140, 140, 0.75), inset 0 0 0 1px rgba(255, 150, 150, 0.65), inset 0 0 10px rgba(255, 180, 180, 0.5), 0 0 3px rgba(255, 120, 120, 0.55);
    }
    55% {
        background: rgba(255, 232, 232, 0.48);
        border-color: rgba(255, 80, 80, 0.9);
        transform: scale(1.03);
        box-shadow: 0 0 18px rgba(255, 120, 120, 0.78), inset 0 0 0 1px rgba(255, 130, 130, 0.7), inset 0 0 14px rgba(255, 170, 170, 0.55), 0 0 4px rgba(255, 100, 100, 0.6);
    }
    100% {
        background: rgba(255, 240, 240, 0.35);
        border-color: rgba(255, 140, 140, 0.78);
        transform: scale(1);
        box-shadow: inset 0 0 0 1px rgba(255, 180, 180, 0.4), 0 0 2px rgba(255, 160, 160, 0.35);
    }
}

@keyframes seo-bar-takeover-final {
    0% {
        background: rgba(255, 240, 240, 0.35);
        border-color: rgba(255, 140, 140, 0.78);
        transform: scale(1);
        opacity: 1;
    }
    25% {
        background: rgba(255, 225, 225, 0.58);
        border-color: rgba(255, 95, 95, 0.92);
        transform: scale(1.025);
        box-shadow: 0 0 15px rgba(255, 140, 140, 0.78), inset 0 0 0 1px rgba(255, 145, 145, 0.7), 0 0 4px rgba(255, 115, 115, 0.58);
        opacity: 1;
    }
    55% {
        background: rgba(255, 230, 230, 0.52);
        border-color: rgba(255, 70, 70, 0.9);
        transform: scale(1.06);
        box-shadow: 0 0 24px rgba(255, 120, 120, 0.82), inset 0 0 0 1px rgba(255, 120, 120, 0.78), inset 0 0 12px rgba(255, 170, 170, 0.58), 0 0 5px rgba(255, 85, 85, 0.65);
        opacity: 1;
    }
    70% {
        background: rgba(255, 235, 235, 0.42);
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        background: rgba(255, 245, 245, 0.08);
        opacity: 0;
        border-color: rgba(255, 200, 200, 0.4);
        transform: scale(1.12);
        filter: blur(1px);
    }
}

@keyframes seo-win-burst {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    40% {
        opacity: 1;
        transform: scale(1.3);
    }
    65% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 30px #ff2222, 0 0 60px rgba(204,0,0,0.65), inset 0 0 14px rgba(255,255,255,0.6);
    }
    85% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(3.2) translateY(-120px);
        filter: blur(5px);
    }
}

@keyframes seo-crown-drop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0) translateY(-80px) rotate(-30deg);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.6) translateY(14px) rotate(12deg);
    }
    70% {
        transform: translateX(-50%) scale(1.1) translateY(-10px) rotate(-6deg);
    }
    85% {
        transform: translateX(-50%) scale(1.2) translateY(4px) rotate(3deg);
    }
    95% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15) translateY(-2px);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.8) translateY(-160px);
    }
}

@keyframes seo-shard-explode {
    0% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(0) rotate(0deg);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, 50%) scale(1.4) rotate(0deg);
    }
    60% {
        opacity: 1;
        transform: translate(calc(-50% + var(--sx) * 0.7), calc(50% + var(--sy) * 0.7)) scale(1) rotate(calc(var(--sr) * 0.6));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(50% + var(--sy) - 80px)) scale(0.2) rotate(var(--sr));
        filter: blur(3px);
    }
}

.service-card--ai:hover .ai-node--core {
    animation: ai-core-pop 4.8s ease-out 0s forwards;
}
@keyframes ai-core-pop {
    0%   { opacity: 0; transform: scale(0); }
    25%  { opacity: 1; transform: scale(1.12); }
    40%  { opacity: 1; transform: scale(1.0); }
    88%  { opacity: 1; transform: scale(1.0); }
    95%  { opacity: 1; transform: scale(1.35) translateY(-20px); }
    100% { opacity: 0; transform: scale(2.2) translateY(-540px); filter: blur(3px); }
}

.service-card--ai:hover .ai-link--1a > span { animation: ai-line-grow-h 4.6s cubic-bezier(.5,.8,.3,1) 0.22s forwards; }
.service-card--ai:hover .ai-link--1b > span { animation: ai-line-grow-v 4.4s cubic-bezier(.5,.8,.3,1) 0.48s forwards; }
.service-card--ai:hover .ai-link--2a > span { animation: ai-line-grow-h 4.1s cubic-bezier(.5,.8,.3,1) 0.74s forwards; }
.service-card--ai:hover .ai-link--2b > span { animation: ai-line-grow-v 3.9s cubic-bezier(.5,.8,.3,1) 1.00s forwards; }
.service-card--ai:hover .ai-link--3a > span { animation: ai-line-grow-h 3.6s cubic-bezier(.5,.8,.3,1) 1.26s forwards; }
.service-card--ai:hover .ai-link--3b > span { animation: ai-line-grow-v 3.4s cubic-bezier(.5,.8,.3,1) 1.52s forwards; }
.service-card--ai:hover .ai-link--4a > span { animation: ai-line-grow-h 3.1s cubic-bezier(.5,.8,.3,1) 1.78s forwards; }
.service-card--ai:hover .ai-link--4b > span { animation: ai-line-grow-v 2.9s cubic-bezier(.5,.8,.3,1) 2.04s forwards; }
.service-card--ai:hover .ai-link--5a > span { animation: ai-line-grow-h 2.6s cubic-bezier(.5,.8,.3,1) 2.30s forwards; }
.service-card--ai:hover .ai-link--5b > span { animation: ai-line-grow-v 2.4s cubic-bezier(.5,.8,.3,1) 2.50s forwards; }
.service-card--ai:hover .ai-link--6a > span { animation: ai-line-grow-h 2.3s cubic-bezier(.5,.8,.3,1) 2.68s forwards; }
.service-card--ai:hover .ai-link--6b > span { animation: ai-line-grow-v 2.1s cubic-bezier(.5,.8,.3,1) 2.88s forwards; }
.service-card--ai:hover .ai-link--7a > span { animation: ai-line-grow-h 2.0s cubic-bezier(.5,.8,.3,1) 3.06s forwards; }
.service-card--ai:hover .ai-link--7b > span { animation: ai-line-grow-v 1.85s cubic-bezier(.5,.8,.3,1) 3.22s forwards; }
.service-card--ai:hover .ai-link--8a > span { animation: ai-line-grow-h 1.75s cubic-bezier(.5,.8,.3,1) 3.38s forwards; }
.service-card--ai:hover .ai-link--8b > span { animation: ai-line-grow-v 1.6s cubic-bezier(.5,.8,.3,1) 3.52s forwards; }

@keyframes ai-line-grow-h {
    0%   { opacity: 0; transform: scaleX(0); }
    7%   { opacity: 1; }
    18%  { opacity: 1; transform: scaleX(1.02); }
    88%  { opacity: 1; transform: scaleX(1.0); }
    95%  { opacity: 1; transform: scaleX(1.5) translateY(-6px); }
    100% { opacity: 0; transform: scaleX(2.0) translateY(-240px); filter: blur(2px); }
}
@keyframes ai-line-grow-v {
    0%   { opacity: 0; transform: scaleY(0); }
    7%   { opacity: 1; }
    18%  { opacity: 1; transform: scaleY(1.02); }
    88%  { opacity: 1; transform: scaleY(1.0); }
    95%  { opacity: 1; transform: scaleY(1.5) translateX(-6px); }
    100% { opacity: 0; transform: scaleY(2.0) translateX(-240px); filter: blur(2px); }
}

.service-card--ai:hover .ai-node--a { animation: ai-node-on 4.1s ease-out 0.74s forwards; --tx: 420px; --ty: 380px; }
.service-card--ai:hover .ai-node--b { animation: ai-node-on 3.9s ease-out 1.26s forwards; --tx: 500px; --ty: -460px; }
.service-card--ai:hover .ai-node--c { animation: ai-node-on 3.6s ease-out 1.78s forwards; --tx: -560px; --ty: -500px; }
.service-card--ai:hover .ai-node--d { animation: ai-node-on 3.3s ease-out 2.30s forwards; --tx: -520px; --ty: 420px; }
.service-card--ai:hover .ai-node--e { animation: ai-node-on 2.5s ease-out 2.70s forwards; --tx: 620px; --ty: 560px; }
.service-card--ai:hover .ai-node--f { animation: ai-node-on 2.2s ease-out 3.08s forwards; --tx: -640px; --ty: -560px; }
.service-card--ai:hover .ai-node--g { animation: ai-node-on 2.0s ease-out 3.44s forwards; --tx: 660px; --ty: -520px; }
.service-card--ai:hover .ai-node--h { animation: ai-node-on 1.85s ease-out 3.74s forwards; --tx: -620px; --ty: 580px; }

@keyframes ai-node-on {
    0%   { opacity: 0; transform: scale(0); }
    28%  { opacity: 1; transform: scale(1.15); box-shadow: 0 0 40px #ff2222, 0 0 80px rgba(255,60,60,0.7); }
    50%  { opacity: 1; transform: scale(1.0); }
    88%  { opacity: 1; transform: scale(1.0); }
    95%  { opacity: 1; transform: scale(1.25) translate(calc(var(--tx) * 0.08), calc(var(--ty) * 0.08)); }
    100% { opacity: 0; transform: scale(0.4) translate(var(--tx), var(--ty)) rotate(360deg); filter: blur(3px); }
}

/* =========================================================
   輪播圖：紅色顆粒鋪滿(高性能版) → 白色海浪 → 下一張
   關鍵優化：704顆顆粒（原4056顆）、只用 transform + opacity 雙屬性變化、
            去掉 radial-gradient / filter:blur / mask-image
   ========================================================= */

.carousel-wave {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

/* ===== 實體色塊遮罩（用 transform:translateX 大尺寸漸層，GPU加速） ===== */
.wave-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.wave-mask-inner {
    position: absolute;
    top: 0;
    height: 100%;
    width: 260%;
    will-change: transform, opacity;
    pointer-events: none;
    opacity: 0;
}

/* ===== 第一幕：紅幕（已停用！改用紅色顆粒直接鋪滿）===== */
.wave-mask-red-inner {
    left: -160%;
    background: transparent;
    display: none !important;
}
.carousel.wave-switching .wave-mask-red-inner {
    animation: none;
    opacity: 0;
    display: none !important;
}

/* ===== 第二幕：白幕海浪（永久停用） ===== */
.wave-mask-white-inner {
    left: -160%;
    background: transparent;
    display: none !important;
}
.carousel.wave-switching .wave-mask-white-inner {
    animation: none;
    opacity: 0;
    display: none !important;
}

/* ===== 顆粒層（704 顆：海浪顯現鋪 → 直接漸變消散，全程不出現實體紅幕） ===== */
.wave-particle {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #cc0000;
    border: 1.5px solid #ff4646;
    opacity: 0;
    transform: scale(0.1) translateZ(0);
    will-change: transform, opacity;
    z-index: 3;
}

.carousel.wave-switching .wave-particle {
    animation: wp-flow 3.2s cubic-bezier(.22,.92,.28,1) calc(var(--d) * 1s) forwards;
}

@keyframes wp-flow {
    /* ① 0%~22%：原地顯現 → 穩定紅色（先出現紅色顆粒海浪） */
    0%   { opacity: 0; transform: scale(0.1) translateZ(0); background: #cc0000; border-color: #ff4646; display: block; }
    14%  { opacity: 1; transform: scale(1.35) translateZ(0); background: #ff1f1f; border-color: #ff7a7a; box-shadow: 0 0 10px rgba(255,40,40,0.75); }
    22%  { opacity: 1; transform: scale(1.0)  translateZ(0); background: #cc0000; border-color: #ff4646; box-shadow: 0 0 0 transparent; }

    /* ② 22%~42%：短暫停留紅色顆粒，馬上開始退場 → 不形成整片紅幕 */
    40%  { opacity: 0.96; transform: scale(1.02) translateZ(0); background: #d80000; border-color: #ff5e5e; }

    /* ③ 42% 之後：紅 → 粉紅 → blur → 透明漸散 → 同時下一張輪播圖淡入浮現 */
    56%  { opacity: 0.85; transform: scale(1.1) translateZ(0); background: #ff7e7e; border-color: #ffc0c0; box-shadow: 0 0 7px rgba(255,140,140,0.5); }
    72%  { opacity: 0.45; transform: scale(0.96) translate(6%,9%)  rotate(10deg) translateZ(0); background: #ffb0b0; border-color: #ffdede; filter: blur(0.8px); }
    95%  { opacity: 0;    transform: scale(0.38) translate(45%,55%) rotate(48deg) translateZ(0); filter: blur(2.5px); display: block; }
    100% { opacity: 0;    transform: scale(0.38) translate(45%,55%) rotate(48deg) translateZ(0); display: none; }
}

/* ====== 切圖：全程不使用紅/白幕；舊圖延遲淡出，完全覆蓋底層，杜絕任何白背景露出 ====== */
/* ① wave-switching 期間整個輪播容器背景強制透明，避免 style.css 的 background:#fff 從縫隙露出 */
.carousel.wave-switching {
    background: transparent !important;
}
.carousel.wave-switching .carousel-slide {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
}
/* ② 舊圖：先保持可見，2.0s 後才快速淡出（確保新圖淡入期間，永遠有圖在上層蓋住容器背景） */
.carousel.wave-switching .carousel-slide:not(.active) {
    z-index: 2;
    visibility: visible !important;
    transition: opacity 0.35s ease 2.0s !important;
    /* 注意：opacity 不寫 !important，因為切圖瞬間 inline opacity:1 會覆蓋，然後靠 transition 2.0s 後變 0 */
}
/* ③ 新圖：0.85s 開始用 1.1s 淡入，正好與紅粒消散重疊；與舊圖完全重疊顯示，不露任何背景 */
.carousel.wave-switching .carousel-slide.active {
    visibility: visible !important;
    z-index: 3;
    transition: opacity 1.1s ease 0.85s !important;
}

/* === 整體過渡：完全移除紅幕！safe-mask 永久透明不啟動 === */
.carousel-wave-safe {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    display: none !important;
}
.carousel.wave-switching .carousel-wave-safe {
    animation: none;
    opacity: 0;
    display: none !important;
}