/**
 * Shared empty/loading/motion states.
 * Component surfaces and radii belong to style.css Layer 05.
 */

/* Legacy decorative loaders are intentionally retired. */
.ai-grid-bg,
.scan-line,
.ai-core,
.hex-ring,
.data-ring,
.energy-pulse,
.ai-icon,
.data-node,
.connection-lines,
.ai-title-area,
.minimal-core,
.minimal-text,
.breath-ring,
.orbit-track,
.orbit-dot,
.center-icon,
.pulse-loader,
.pulse-circle,
.loader-icon {
    display: none !important;
}

/* Canvas state positioning. */
.canvas-main {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.canvas-empty,
.canvas-loading-state,
.result-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.canvas-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-container {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.empty-content {
    text-align: center;
}

.empty-icon-wrapper,
.empty-icon,
.step-item,
.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon {
    animation: none;
}

.empty-steps {
    display: inline-flex;
    align-items: center;
}

.step-divider {
    flex: 0 0 auto;
}

/* Blocking generation feedback must stay above every creation workspace.
 * In particular, the refine editor uses z-index: 380 and remains mounted
 * while a request runs so a failed edit can be recovered. */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    background: rgba(20, 29, 46, 0.36);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        opacity var(--sys-motion-dialog),
        visibility var(--sys-motion-dialog);
}

.loading-overlay.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

.loading-overlay.fade-out {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
}

.loading-card {
    text-align: center;
    background: #fff;
}

.loading-overlay.active .loading-card {
    animation: loading-card-in 220ms var(--sys-ease-out);
}

@keyframes loading-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
}

.spinner-svg {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: spinner-rotate 1.4s linear infinite;
}

.spinner-track {
    stroke: var(--sys-color-border);
}

.spinner-progress {
    stroke: var(--sys-color-primary);
    stroke-linecap: round;
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    animation: spinner-dash 1.4s ease-in-out infinite;
}

@keyframes spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 80, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 80, 200;
        stroke-dashoffset: -125;
    }
}

/* In-canvas generation progress. */
.canvas-loading-state {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity var(--sys-motion-base),
        transform var(--sys-motion-dialog);
}

.canvas-loading-state.active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

.canvas-loading-state.active .loading-rings .ring-1 {
    animation: spin-ring 1.4s linear infinite;
}

.canvas-loading-state.active .loading-rings .ring-2 {
    animation: spin-ring 1.15s linear infinite reverse;
}

.canvas-loading-state.active .loading-rings .ring-3 {
    animation: spin-ring 0.9s linear infinite;
}

.loading-progress {
    display: block !important;
}

.canvas-loading-state.active .progress-bar {
    animation: progress-move 1.45s ease-in-out infinite;
}

.generate-btn.loading::after {
    animation: spin 0.9s linear infinite;
}

.generate-btn.loading {
    animation: none;
}

/* Results enter with a restrained six-pixel reveal. */
.result-item-hidden {
    opacity: 0;
    transform: translateY(6px);
}

.result-item {
    transition:
        opacity 220ms var(--sys-ease-out),
        transform 220ms var(--sys-ease-out),
        border-color var(--sys-motion-fast),
        box-shadow var(--sys-motion-base);
}

@media (max-width: 600px) {
    .empty-content {
        width: 100%;
    }

    .empty-steps {
        max-width: 100%;
        gap: 6px;
    }

    .step-item {
        flex: 0 0 auto;
        gap: 5px;
    }

    .step-text {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay.active .loading-card,
    .canvas-loading-state,
    .canvas-loading-state.active,
    .result-item-hidden,
    .result-item {
        animation: none;
        transform: none;
        transition-duration: 1ms;
    }

    .canvas-loading-state.active .loading-rings .ring-1,
    .canvas-loading-state.active .loading-rings .ring-2,
    .canvas-loading-state.active .loading-rings .ring-3,
    .canvas-loading-state.active .loading-pulse,
    .canvas-loading-state.active .progress-bar,
    .spinner-svg,
    .spinner-progress,
    .generate-btn.loading::after {
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Loading feedback is functional progress feedback. Keep it visibly alive
 * even when the operating system requests fewer decorative transitions. */
.loading-overlay.active .spinner-svg {
    animation: spinner-rotate 1.4s linear infinite !important;
}

.loading-overlay.active .spinner-progress {
    animation: spinner-dash 1.4s ease-in-out infinite !important;
}

.canvas-loading-state.active .loading-rings .ring-1 {
    animation: spin-ring 1.4s linear infinite !important;
}

.canvas-loading-state.active .loading-rings .ring-2 {
    animation: spin-ring 1.15s linear infinite reverse !important;
}

.canvas-loading-state.active .loading-rings .ring-3 {
    animation: spin-ring 0.9s linear infinite !important;
}

.canvas-loading-state.active .loading-pulse {
    animation: pulse-glow 1.8s ease-in-out infinite !important;
}

.canvas-loading-state.active .progress-bar {
    animation: progress-move 1.45s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay.active .spinner-svg,
    .loading-overlay.active .spinner-progress,
    .canvas-loading-state.active .loading-rings .ring-1,
    .canvas-loading-state.active .loading-rings .ring-2,
    .canvas-loading-state.active .loading-rings .ring-3,
    .canvas-loading-state.active .loading-pulse,
    .canvas-loading-state.active .progress-bar {
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
    }
}