/* DigitalSME home hero: the "AI Core" animation (driven by assets/js/ai-core.js).
   Fonts are untouched: only position, opacity and blur are animated. */

.ai-core {
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    will-change: transform;
}
.ai-core-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 991px) {
    .ai-core { max-width: 440px; margin-top: 10px; }
}

/* Product pages (invoice, payroll): the core becomes a dark glass disc, so it reads on the bright gradient hero */
.ai-core[data-face="dark"] {
    border-radius: 50%;
    box-shadow: 0 40px 90px -24px rgba(18, 8, 60, 0.6), 0 0 0 1px rgba(232, 209, 255, 0.12);
}

/* Business Automation page banner: the automation engine sits beside the title */
.ai-core[data-mode="engine"] { max-width: 560px; }
@media only screen and (max-width: 991px) {
    .ai-core[data-mode="engine"] { max-width: 460px; }
}

/* Headline letters while the headline builds (the script restores plain text when it finishes) */
.aic-w { display: inline-block; white-space: nowrap; }
.aic-c { display: inline-block; }

/* Until the script starts, the hero text waits hidden. If the script never runs, a failsafe shows it after 4s. */
.aic-js:not(.aic-run) .hero-area-two .hero-content h1,
.aic-js:not(.aic-run) .hero-area-two .hero-content > p,
.aic-js:not(.aic-run) .hero-area-two .hero-btns .theme-btn,
.aic-js:not(.aic-run) .hero-area .hero-content > .subtitle,
.aic-js:not(.aic-run) .hero-area .hero-content h1,
.aic-js:not(.aic-run) .hero-area .hero-content > p,
.aic-js:not(.aic-run) .hero-area .hero-content > .theme-btn,
.aic-js:not(.aic-run) .page-banner-area .banner-inner h1,
.aic-js:not(.aic-run) .page-banner-area .banner-inner .breadcrumb {
    opacity: 0;
    animation: aic-failsafe 0.01s linear 4s forwards;
}
@keyframes aic-failsafe { to { opacity: 1; } }