/* Text stays visible unless the running script prepares an entrance. */
.staport-brand .staport-text-motion {
    opacity: var(--staport-title-opacity, 1);
    filter: blur(var(--staport-title-blur, 0px));
    transform: scale(var(--staport-title-scale, 1));
    transform-origin: center;
}

.staport-brand .staport-reveal-word {
    display: inline-block;
}

.staport-brand .staport-text-pending .staport-reveal-word {
    opacity: 0;
}

.staport-brand .staport-text-revealing .staport-reveal-word {
    animation: staport-title-word-reveal .6s both;
    animation-delay: var(--staport-word-delay, 0ms);
}

/* Keep the existing silver lettering visible when words move independently. */
.staport-brand .staport-eyebrow .staport-reveal-word {
    background-image: var(--staport-metal-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes staport-title-word-reveal {
    from { opacity: .001; filter: blur(10px); transform: translateY(10px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Keep each photo's dimensions stable while its surface reveals with the text. */
.staport-brand .staport-photo-frame {
    overflow: hidden;
    opacity: var(--staport-photo-opacity, 1);
    filter: blur(var(--staport-photo-blur, 0px));
}

.staport-brand .staport-photo-pending {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(16px) scale(1.035);
}

.staport-brand .staport-photo-revealing {
    animation: staport-photo-reveal .8s cubic-bezier(.22, 1, .36, 1) both;
    will-change: opacity, filter, transform;
}

@keyframes staport-photo-reveal {
    from { opacity: .001; filter: blur(10px); transform: translateY(16px) scale(1.035); }
    to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* Card surfaces include their backgrounds, borders, icons and all editable widgets. */
.staport-brand .staport-card-surface {
    opacity: var(--staport-card-opacity, 1);
    filter: blur(var(--staport-card-blur, 0px));
    transform: scale(var(--staport-card-scale, 1));
    transform-origin: center;
    animation: none !important;
}

.staport-brand .staport-card-surface.elementor-invisible,
.staport-brand .staport-card-surface .elementor-invisible {
    visibility: visible;
}

/* A grouped card has one entrance, instead of separate widget/text entrances. */
.staport-brand .staport-card-surface .elementor-widget {
    animation: none !important;
}

.staport-brand .staport-card-pending {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(24px) scale(.97);
}

.staport-brand .staport-card-surface.staport-card-revealing {
    animation: staport-card-reveal .8s cubic-bezier(.22, 1, .36, 1) both !important;
    animation-delay: var(--staport-card-delay, 0ms) !important;
    will-change: opacity, filter, transform;
}

@keyframes staport-card-reveal {
    from { opacity: .001; filter: blur(8px); transform: translateY(24px) scale(.97); }
    to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* Match the partners' navy base, blue tint and original glow contours. */
body.staport-brand #qualifications.staport-regulatory-blue {
    isolation: isolate;
    background-image: none;
}

body.staport-brand #qualifications.staport-regulatory-blue::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--uicore-primary-color, #0b4e9c);
    -webkit-mask: url("../../uploads/2026/10/CyberGuard-Testimonial-BG.webp") left top / 100% auto no-repeat;
    mask: url("../../uploads/2026/10/CyberGuard-Testimonial-BG.webp") left top / 100% auto no-repeat;
    mask-mode: alpha;
}

@media (prefers-reduced-motion: reduce) {
    .staport-brand .staport-card-surface,
    .staport-brand .staport-card-pending,
    .staport-brand .staport-card-surface.staport-card-revealing {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
        will-change: auto;
    }
    .staport-brand .staport-photo-frame,
    .staport-brand .staport-photo-pending,
    .staport-brand .staport-photo-revealing {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
        will-change: auto;
    }
    .staport-brand .staport-text-motion {
        opacity: 1;
        filter: none;
        transform: none;
    }
    .staport-brand .staport-text-pending .staport-reveal-word {
        opacity: 1;
    }
    .staport-brand .staport-text-revealing .staport-reveal-word {
        animation: none;
    }
}