/*
 * Visual enhancement khusus landing utama STEMA.
 * File ini sengaja terpisah agar app.css final tetap tidak berubah.
 */

.hero-title span {
    background-size: 180% 100%;
    animation: stemaHeadingShimmer 7s ease-in-out infinite alternate;
}

.section-heading h2,
.company-about-content h2 {
    color: transparent;
    background: linear-gradient(112deg, #101940 0%, #1269e7 52%, #7739ef 100%);
    background-size: 160% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: stemaHeadingShimmer 9s ease-in-out infinite alternate;
}

.foundation-heading h2,
.landing-contact-content h2 {
    color: transparent;
    background: linear-gradient(100deg, #ffffff 0%, #aadaff 50%, #e2c5ff 100%);
    background-size: 170% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: stemaHeadingShimmer 9s ease-in-out infinite alternate;
}

.unit-card,
.foundation-card,
.landing-contact-panel {
    transition:
        border-color 280ms ease,
        box-shadow 280ms ease,
        filter 280ms ease;
}

.unit-card:hover,
.unit-card:focus-within {
    filter: saturate(1.06);
}

.unit-card .unit-icon,
.foundation-card__icon {
    transform-origin: center;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.unit-card:hover .unit-icon,
.unit-card:focus-within .unit-icon,
.foundation-card:hover .foundation-card__icon {
    transform: scale(1.08) rotate(-3deg);
}

/* Orbit dan label S.T.E.M.A. dipertahankan statis sesuai layout final. */
.company-about-glow,
.company-about-logo-frame__shine {
    animation: stemaLogoGlow 5.5s ease-in-out infinite alternate;
}

.foundation-aurora--blue {
    animation: stemaAuroraBlue 11s ease-in-out infinite alternate;
}

.foundation-aurora--purple {
    animation: stemaAuroraPurple 13s ease-in-out infinite alternate;
}

.landing-contact-card__glow--blue {
    animation: stemaContactGlowBlue 10s ease-in-out infinite alternate;
}

.landing-contact-card__glow--purple {
    animation: stemaContactGlowPurple 12s ease-in-out infinite alternate;
}

.landing-contact-panel:hover,
.landing-contact-panel:focus-within {
    border-color: rgba(161, 213, 255, 0.34);
    box-shadow: 0 26px 55px rgba(1, 10, 50, 0.25);
}

@keyframes stemaHeadingShimmer {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

@keyframes stemaLogoGlow {
    from {
        opacity: 0.62;
        filter: saturate(0.95) brightness(0.98);
    }

    to {
        opacity: 1;
        filter: saturate(1.15) brightness(1.08);
    }
}

@keyframes stemaAuroraBlue {
    from {
        opacity: 0.14;
        transform: translate3d(-20px, -12px, 0) scale(0.94);
    }

    to {
        opacity: 0.28;
        transform: translate3d(40px, 24px, 0) scale(1.12);
    }
}

@keyframes stemaAuroraPurple {
    from {
        opacity: 0.15;
        transform: translate3d(28px, 20px, 0) scale(1);
    }

    to {
        opacity: 0.29;
        transform: translate3d(-34px, -24px, 0) scale(1.14);
    }
}

@keyframes stemaContactGlowBlue {
    from {
        transform: translate3d(-22px, 8px, 0) scale(0.94);
    }

    to {
        transform: translate3d(34px, 22px, 0) scale(1.1);
    }
}

@keyframes stemaContactGlowPurple {
    from {
        transform: translate3d(25px, 12px, 0) scale(1);
    }

    to {
        transform: translate3d(-32px, -20px, 0) scale(1.13);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title span,
    .section-heading h2,
    .company-about-content h2,
    .foundation-heading h2,
    .landing-contact-content h2,
    .company-about-glow,
    .company-about-logo-frame__shine,
    .foundation-aurora,
    .landing-contact-card__glow {
        animation: none !important;
    }
}