/*
 * DTI calculator — empty-state vertical gradient + demo animations (CSS keyframe loop).
 * The gradient strip is not shown in the calculated-results hero (only when #dtiResultsEmpty is visible).
 * Empty-state demo duration: --dti-demo-cycle on .dti-gradient-demo (default 8s).
 * Load after dti-calculator.css; uses the same --dti-* custom properties as the main sheet.
 */

/* Scale bar: top = insufficient (orange) → middle = borderline → bottom = good (green) */
.dti-gradient-bar-wrap {
    position: relative;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px var(--dti-shadow-xs);
}

.dti-gradient-bar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    /* Soft blend (fallback when color-mix unsupported) */
    background: linear-gradient(
        to bottom,
        var(--dti-orange) 0%,
        #fa923c 18%,
        #f0b020 36%,
        var(--dti-warning) 50%,
        #9ccc56 68%,
        #4caf50 86%,
        var(--dti-success) 100%
    );
}

@supports (color: color-mix(in srgb, white, black)) {
    .dti-gradient-bar {
        background: linear-gradient(
            to bottom,
            var(--dti-orange) 0%,
            color-mix(in srgb, var(--dti-orange) 58%, var(--dti-warning)) 26%,
            var(--dti-warning) 50%,
            color-mix(in srgb, var(--dti-warning) 58%, var(--dti-success)) 74%,
            var(--dti-success) 100%
        );
    }
}

/* Empty state: vertical bar + animated demo (CSS keyframes; no JS) */
.dti-gradient-block {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
    padding-top: 10px;
}

.dti-gradient-bar-wrap--empty {
    width: 10px;
    min-height: 100px;
    align-self: stretch;
    height: auto;
}

.dti-gradient-bar-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 42%;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition:
        top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.45s ease;
    top: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .dti-gradient-bar-indicator,
    .dti-max-highlight-icon-img,
    .dti-max-highlight-amount,
    .dti-max-highlight {
        transition: none;
    }
}

/* --- Empty-state demo: synchronized loop (pure CSS; duration --dti-demo-cycle) --- */

.dti-gradient-demo {
    --dti-demo-cycle: 12s;
}

.dti-gradient-demo .dti-gradient-bar-wrap--empty .dti-gradient-bar {
    animation: dti-demo-bar-gradient var(--dti-demo-cycle, 8s) linear infinite;
}

@keyframes dti-demo-bar-gradient {
    0%,
    24% {
        background: linear-gradient(
            to bottom,
            var(--dti-orange) 0%,
            #fa923c 11%,
            #f0b020 24%,
            #c8e070 38%,
            var(--dti-success) 50%,
            #5cb85c 76%,
            #7dd693 100%
        );
    }

    28%,
    52% {
        background: linear-gradient(
            to bottom,
            var(--dti-orange) 0%,
            #f59f0a 16%,
            var(--dti-warning) 32%,
            #e8c040 48%,
            #b6d060 64%,
            #66bb6a 86%,
            var(--dti-success) 100%
        );
    }

    56%,
    88% {
        background: linear-gradient(
            to bottom,
            var(--dti-orange) 0%,
            #ff9a3c 28%,
            #ffb347 44%,
            var(--dti-warning) 58%,
            #c5d84a 76%,
            var(--dti-success) 100%
        );
    }

    92%,
    100% {
        background: linear-gradient(
            to bottom,
            var(--dti-orange) 0%,
            #fa923c 11%,
            #f0b020 24%,
            #c8e070 38%,
            var(--dti-success) 50%,
            #5cb85c 76%,
            #7dd693 100%
        );
    }
}

.dti-gradient-bar-indicator--demo {
    left: 0;
    right: 0;
    height: 42%;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    animation: dti-demo-indicator var(--dti-demo-cycle, 8s) linear infinite;
}

@keyframes dti-demo-indicator {
    0%,
    24% {
        top: 58%;
        background: rgba(40, 167, 69, 0.42);
    }

    28%,
    52% {
        top: 29%;
        background: rgba(255, 193, 7, 0.48);
    }

    56%,
    88% {
        top: 0;
        background: rgba(253, 126, 20, 0.48);
    }

    92%,
    100% {
        top: 58%;
        background: rgba(40, 167, 69, 0.42);
    }
}

.dti-gradient-demo-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    min-height: min-content;
}

.dti-gradient-demo-main {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.dti-gradient-demo-main-text {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Stacked phases (same pattern as .dti-demo-body): each phase orders titles + subline so the subline sits under the active row. */
.dti-demo-titles-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    pointer-events: none;
}

.dti-demo-title-layout-phase {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    pointer-events: none;
}

.dti-demo-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.dti-demo-title-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    width: 100%;
    min-height: 2rem;
    height: 2rem;
    max-height: 2rem;
}

.dti-demo-title-item--bad {
    color: var(--dti-orange);
}

.dti-demo-title-item--warning {
    color: var(--dti-dark-gold);
}

.dti-demo-title-item--good {
    color: var(--dti-success);
}

.dti-gradient-demo .dti-demo-title-item--good {
    animation: dti-demo-title-emphasis-good var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-gradient-demo .dti-demo-title-item--warning {
    animation: dti-demo-title-emphasis-warning var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-gradient-demo .dti-demo-title-item--bad {
    animation: dti-demo-title-emphasis-bad var(--dti-demo-cycle, 8s) linear infinite;
}

@keyframes dti-demo-title-emphasis-good {
    0%,
    24% {
        font-size: 1.22rem;
        font-weight: 800;
    }

    28%,
    91% {
        font-size: 0.82rem;
        font-weight: 600;
    }

    92%,
    100% {
        font-size: 1.22rem;
        font-weight: 800;
    }
}

@keyframes dti-demo-title-emphasis-warning {
    0%,
    27% {
        font-size: 0.82rem;
        font-weight: 600;
    }

    28%,
    52% {
        font-size: 1.22rem;
        font-weight: 800;
    }

    53%,
    100% {
        font-size: 0.82rem;
        font-weight: 600;
    }
}

@keyframes dti-demo-title-emphasis-bad {
    0%,
    55% {
        font-size: 0.82rem;
        font-weight: 600;
    }

    56%,
    88% {
        font-size: 1.22rem;
        font-weight: 800;
    }

    89%,
    100% {
        font-size: 0.82rem;
        font-weight: 600;
    }
}

/* Icons: fixed column beside text (text column uses full remaining width) */
.dti-demo-body {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 56px;
    height: 52px;
    pointer-events: none;
    align-self: flex-end;
}

.dti-demo-phase {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    align-self: start;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dti-demo-phase--good {
    animation: dti-demo-phase-opacity-good var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-demo-phase--warning {
    animation: dti-demo-phase-opacity-warning var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-demo-phase--bad {
    animation: dti-demo-phase-opacity-bad var(--dti-demo-cycle, 8s) linear infinite;
}

@keyframes dti-demo-phase-opacity-good {
    0%,
    24% {
        opacity: 1;
    }

    28%,
    91% {
        opacity: 0;
    }

    92%,
    100% {
        opacity: 1;
    }
}

@keyframes dti-demo-phase-opacity-warning {
    0%,
    27% {
        opacity: 0;
    }

    28%,
    52% {
        opacity: 1;
    }

    53%,
    100% {
        opacity: 0;
    }
}

@keyframes dti-demo-phase-opacity-bad {
    0%,
    55% {
        opacity: 0;
    }

    56%,
    88% {
        opacity: 1;
    }

    89%,
    100% {
        opacity: 0;
    }
}

.dti-demo-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.dti-demo-icon img {
    width: 56px;
    height: auto;
    max-height: 52px;
    object-fit: contain;
    object-position: right bottom;
}

.dti-gradient-demo .dti-demo-title-layout-phase--good {
    animation: dti-demo-phase-opacity-good var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-gradient-demo .dti-demo-title-layout-phase--warning {
    animation: dti-demo-phase-opacity-warning var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-gradient-demo .dti-demo-title-layout-phase--bad {
    animation: dti-demo-phase-opacity-bad var(--dti-demo-cycle, 8s) linear infinite;
}

.dti-demo-subline {
    margin: 0;
    padding-top: 2px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--dti-text-muted);
    max-width: 100%;
}

.dti-demo-subline--bad {
    font-size: 0.76rem;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .dti-gradient-demo .dti-gradient-bar-wrap--empty .dti-gradient-bar,
    .dti-gradient-bar-indicator--demo,
    .dti-demo-title-item--good,
    .dti-demo-title-item--warning,
    .dti-demo-title-item--bad,
    .dti-gradient-demo .dti-demo-title-layout-phase--good,
    .dti-gradient-demo .dti-demo-title-layout-phase--warning,
    .dti-gradient-demo .dti-demo-title-layout-phase--bad,
    .dti-demo-phase--good,
    .dti-demo-phase--warning,
    .dti-demo-phase--bad {
        animation: none;
    }

    .dti-gradient-demo .dti-gradient-bar-wrap--empty .dti-gradient-bar {
        background: linear-gradient(
            to bottom,
            var(--dti-orange) 0%,
            #fa923c 11%,
            #f0b020 24%,
            #c8e070 38%,
            var(--dti-success) 50%,
            #5cb85c 76%,
            #7dd693 100%
        );
    }

    .dti-gradient-bar-indicator--demo {
        top: 58%;
        background: rgba(40, 167, 69, 0.42);
    }

    .dti-demo-title-item--good {
        font-size: 1.22rem;
        font-weight: 800;
    }

    .dti-demo-title-item--warning,
    .dti-demo-title-item--bad {
        font-size: 0.82rem;
        font-weight: 600;
    }

    .dti-gradient-demo .dti-demo-title-layout-phase--good {
        opacity: 1;
    }

    .dti-gradient-demo .dti-demo-title-layout-phase--warning,
    .dti-gradient-demo .dti-demo-title-layout-phase--bad {
        opacity: 0;
    }

    .dti-demo-phase--good {
        opacity: 1;
    }

    .dti-demo-phase--warning,
    .dti-demo-phase--bad {
        opacity: 0;
    }

    .dti-gradient-demo-content {
        min-height: 0;
    }
}