/* Logo Maker intro loader — markup: applications/dev/views/partials/intro-loader.php */

.lg-intro-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    font-family: "Open Sans", sans-serif;
}

.lg-intro-loader--overlay {
    height: 100%;
    padding: 24px 16px;
}

.lg-intro-loader--inline {
    min-height: 60vh;
    padding: 40px 16px;
}

.lg-intro-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Constant box (children stay centred) so status lines of different
       lengths don't resize it — avoids layout-shift entries. */
    width: 100%;
}

.lg-intro-loader__ellipse,
.lg-intro-loader__shape,
.lg-intro-loader__title {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Spacing per design spec — fade-ins at 2× previous speed */
.lg-intro-loader__ellipse {
    width: 32.7px;
    height: 32.7px;
    /* Left-aligned over the shape: 75px shape - 32.7px dot. */
    margin-right: 42.3px;
    margin-bottom: 21px;
    animation: lg-intro-fade-up 0.3s ease-out 0s both;
}

.lg-intro-loader__shape {
    width: 75px;
    height: 53.57px;
    margin-bottom: 28px;
    animation: lg-intro-fade-down 0.3s ease-out 0.05s both;
}

.lg-intro-loader__title {
    margin-bottom: 28px;
    animation: lg-intro-fade 0.3s ease-out 0.125s both;
}

.lg-intro-loader__bar {
    position: relative;
    width: 220px;
    max-width: 100%;
    height: 5px;
    margin-bottom: 32px;
    border-radius: 5px;
    background-color: #E5E5E5;
    overflow: hidden;
    animation: lg-intro-fade 0.3s ease-out 0.2s both;
}

.lg-intro-loader__progress {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background-color: #05A59B;
    transition: width 0.3s ease-out;
}

/* One status line at a time, driven by the progress bar (intro-loader.js):
   each message owns an equal share of the bar and is shown once. It fades in
   up (0.2s), stays at least 1s, and fades out up when the bar enters the next share. */
.lg-intro-loader__status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    opacity: 0;
}

.lg-intro-loader__status.is-in {
    animation: lg-intro-status-in 0.2s ease-out both;
}

.lg-intro-loader__status.is-in.is-first {
    animation-delay: 0.3s;
}

.lg-intro-loader__status.is-out {
    animation: lg-intro-status-out 0.2s ease-in both;
}

.lg-intro-loader__check {
    flex-shrink: 0;
    margin-right: 12px;
}

.lg-intro-loader__text {
    font-size: 16px;
    line-height: 24px;
    color: #343a55;
    white-space: nowrap;
}

@keyframes lg-intro-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lg-intro-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lg-intro-fade-down {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lg-intro-status-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lg-intro-status-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-12px); }
}

/* Overlay fade-out once the cover lifts (intro-loader.js). */
.industry-landing-cover-overlay {
    transition: opacity 0.4s ease;
}

.industry-landing-cover-overlay.lg-intro-loader--leaving {
    opacity: 0;
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .lg-intro-loader__ellipse,
    .lg-intro-loader__shape,
    .lg-intro-loader__title,
    .lg-intro-loader__bar {
        animation-name: lg-intro-fade;
    }
}