/* BajuGali hero, "live on ground" (assets/js/ground-core.js). Same pattern as the AdCrest hero. */
.ground-core {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    will-change: transform;
}
.ground-core-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 991px) {
    .ground-core { max-width: 440px; margin-bottom: 40px; }
}
@media (min-width: 992px) {
    .hero-area .ground-col { -ms-flex-item-align: start; align-self: flex-start; margin-top: -40px; }
}

/* the heading sized for the two-column hero, so it keeps the same number of lines while it builds letter by letter */
@media (min-width: 992px) {
    .hero-area .ground-hero h1 { font-size: 64px; letter-spacing: -2px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-area .ground-hero h1 { font-size: 52px; }
}

/* The hero text waits hidden until it builds. Only when the script runs (html.gc-js, never with reduced motion),
   with a 4 s failsafe so the text always appears. */
.gc-js:not(.gc-run) .ground-hero h1,
.gc-js:not(.gc-run) .ground-hero > .subtitle,
.gc-js:not(.gc-run) .ground-hero > p,
.gc-js:not(.gc-run) .ground-hero > .theme-btn {
    opacity: 0;
    -webkit-animation: gc-failsafe 0.01s 4s forwards;
    animation: gc-failsafe 0.01s 4s forwards;
}
@-webkit-keyframes gc-failsafe { to { opacity: 1; } }
@keyframes gc-failsafe { to { opacity: 1; } }
.gc-w { display: inline-block; white-space: nowrap; }
.gc-c { display: inline-block; }