/* ══ PRIME STEEL — PREMIUM ANIMATIONS ══ */

/* Progress bar shimmer */
.progress-bar {
    background-size: 200% 100%;
    animation: shimmer-bar 2.5s ease infinite
}

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

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

/* Ripple */
.ripple-btn {
    position: relative;
    overflow: hidden
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    transform: scale(0);
    animation: ripple-x .55s linear;
    pointer-events: none
}

@keyframes ripple-x {
    to {
        transform: scale(4.5);
        opacity: 0
    }
}

/* Particles */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(232, 84, 26, .35);
    animation: p-rise linear infinite
}

@keyframes p-rise {
    0% {
        transform: translateY(110vh);
        opacity: 0
    }

    6% {
        opacity: 1
    }

    94% {
        opacity: .55
    }

    100% {
        transform: translateY(-12vh);
        opacity: 0
    }
}

/* Aurora orbs */
@keyframes orb-move {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    25% {
        transform: translate(-44px, 28px) scale(1.06)
    }

    50% {
        transform: translate(20px, 48px) scale(.95)
    }

    75% {
        transform: translate(40px, -22px) scale(1.03)
    }
}

/* Floating */
@keyframes float {

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

    50% {
        transform: translateY(-18px)
    }
}

@keyframes float-alt {

    0%,
    100% {
        transform: translateY(-8px)
    }

    50% {
        transform: translateY(8px)
    }
}

/* Fade entries */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(28px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(.9)
    }

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

/* Pulse dot */
@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .45;
        transform: scale(.75)
    }
}

/* Count ticker */
@keyframes count-pop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.12)
    }

    100% {
        transform: scale(1)
    }
}

.count-pop {
    animation: count-pop .3s var(--ease-spring)
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, var(--border) 0%, var(--brand-sub) 50%, var(--border) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s ease-in-out infinite
}

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

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

/* Gradient border on focus / hover */
.grd-border {
    position: relative
}

.grd-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--brand), var(--brand-mid), var(--brand-light));
    z-index: -1;
    opacity: 0;
    transition: opacity .3s
}

.grd-border:hover::before,
.grd-border:focus-within::before {
    opacity: 1
}

/* Underline link */
.u-link {
    position: relative;
    display: inline-block
}

.u-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--brand), var(--brand-mid));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease-smooth)
}

.u-link:hover::after {
    transform: scaleX(1)
}

/* Stagger helpers */
.stagger>:nth-child(1) {
    transition-delay: .06s
}

.stagger>:nth-child(2) {
    transition-delay: .12s
}

.stagger>:nth-child(3) {
    transition-delay: .18s
}

.stagger>:nth-child(4) {
    transition-delay: .24s
}

.stagger>:nth-child(5) {
    transition-delay: .30s
}

.stagger>:nth-child(6) {
    transition-delay: .36s
}

/* Page enter */
.page-enter {
    animation: fade-in .35s var(--ease-smooth) both
}

/* FAQ accordion */
details summary {
    list-style: none
}

details summary::-webkit-details-marker {
    display: none
}

details[open] .faq-ico {
    transform: rotate(45deg)
}

.faq-ico {
    transition: transform .3s var(--ease)
}

/* Form success check */
@keyframes check-pop {
    0% {
        transform: scale(0);
        opacity: 0
    }

    60% {
        transform: scale(1.18)
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.form-success.visible .form-success__ico {
    animation: check-pop .45s var(--ease-spring) .1s both
}

/* Marquee Scroll */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.clients__logo-track {
    animation: marquee-scroll 40s linear infinite;
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}