/* Explain: CSS for continuously animated and futuristic service cards. */
/* ===== Services grid — continuously animated (2027 premium presentation) ===== */

@property --svc-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Ambient aura behind the grid */
.service-grid-future {
    position: relative;
    z-index: 0;
}
.service-grid-future::before {
    content: '';
    position: absolute;
    inset: -12% -6%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(200, 162, 74, .18), transparent 70%) 12% 18% / 42% 42% no-repeat,
        radial-gradient(closest-side, rgba(79, 208, 255, .14), transparent 70%) 88% 82% / 46% 46% no-repeat;
    animation: svcAura 10s ease-in-out infinite alternate;
}

/* Card: floating motion + continuously travelling gradient border */
.service-card-2027 {
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--background-color), var(--background-color)) padding-box,
        conic-gradient(from var(--svc-angle),
            rgba(200, 162, 74, .14) 0deg,
            rgba(200, 162, 74, .95) 45deg,
            rgba(79, 208, 255, .8) 95deg,
            rgba(200, 162, 74, .14) 155deg,
            rgba(200, 162, 74, .14) 360deg) border-box;
    box-shadow: 0 20px 45px -32px rgba(11, 33, 55, .55);
    animation: svcFloat 6.5s ease-in-out infinite, svcSpin 7s linear infinite;
    animation-delay: calc(var(--svc-i, 0) * 0.45s), calc(var(--svc-i, 0) * -1.4s);
}
.service-card-2027 > * {
    position: relative;
    z-index: 3;
}

/* Travelling light sweep across each card */
.service-card-2027::after {
    content: '';
    position: absolute;
    top: -20%;
    inset-inline-start: -70%;
    width: 55%;
    height: 140%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
    transform: skewX(-18deg);
    animation: svcSheen 5.5s ease-in-out infinite;
    animation-delay: calc(var(--svc-i, 0) * 0.6s);
}

/* Icon: soft continuous glow */
.service-card-2027 .service-icon {
    background: linear-gradient(135deg, rgba(200, 162, 74, .2), rgba(200, 162, 74, .06));
    color: var(--accent-hover);
    animation: svcIconGlow 3.2s ease-in-out infinite;
    animation-delay: calc(var(--svc-i, 0) * 0.35s);
}

@keyframes svcFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

@keyframes svcSpin {
    to { --svc-angle: 360deg; }
}

@keyframes svcSheen {
    0%        { inset-inline-start: -70%; }
    55%, 100% { inset-inline-start: 132%; }
}

@keyframes svcIconGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 162, 74, .45); }
    50%      { box-shadow: 0 0 22px 4px rgba(200, 162, 74, .32); }
}

@keyframes svcAura {
    from { translate: 0 0; opacity: .7; }
    to   { translate: 0 -18px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .service-card-2027,
    .service-card-2027::after,
    .service-card-2027 .service-icon,
    .service-grid-future::before {
        animation: none !important;
    }
    .service-card-2027 {
        translate: none;
    }
}