/*
 * Grafino Code — Setup Intro (Phase 35, revised by the pre-Phase-36
 * hotfix to use the real product logo instead of a text wordmark).
 * Isolated, namespaced (`.cms-setup-intro`), same-origin, no build step.
 *
 * Light background (matches the rest of the installer's `bg-slate-100`
 * shell, `resources/views/installer/layout.blade.php`) — the real
 * Grafino Code logo carries dark navy text, so a dark backdrop (the
 * original placeholder design) would render it almost invisible.
 */

.cms-setup-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #0f172a;
    opacity: 1;
    transition: opacity .45s ease;
}

.cms-setup-intro--hiding {
    opacity: 0;
    pointer-events: none;
}

.cms-setup-intro__panel {
    text-align: center;
    padding: 1.5rem;
    max-width: 26rem;
}

.cms-setup-intro__logo,
.cms-setup-intro__heading,
.cms-setup-intro__body {
    margin: 0;
    opacity: 0;
    transform: translateY(.5rem);
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

.cms-setup-intro__logo {
    display: inline-block;
    width: 14rem;
    height: auto;
    margin-inline: auto;
    animation: cms-setup-intro-in .55s .2s forwards;
}

.cms-setup-intro__heading {
    margin-top: 1.75rem;
    font: 600 1.15rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    animation: cms-setup-intro-in .5s .8s forwards;
}

.cms-setup-intro__body {
    margin-top: .5rem;
    font: 400 .95rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #64748b;
    animation: cms-setup-intro-in .5s 1.1s forwards;
}

.cms-setup-intro__bar {
    margin: 2rem auto 0;
    width: 8rem;
    height: 3px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.cms-setup-intro__bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: #4f46e5;
    border-radius: 999px;
    animation: cms-setup-intro-bar 1.6s 1.4s forwards ease-in-out;
}

@keyframes cms-setup-intro-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cms-setup-intro-bar {
    to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-setup-intro,
    .cms-setup-intro__logo,
    .cms-setup-intro__heading,
    .cms-setup-intro__body {
        animation-duration: .01s !important;
        animation-delay: 0s !important;
        transition-duration: .01s !important;
    }

    .cms-setup-intro__bar span {
        animation-duration: .01s !important;
        animation-delay: 0s !important;
        width: 100%;
    }
}