/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * DNA ladder loading indicator (Views/Shared/_DnaLadderSpinner.cshtml).
 * Flat colors, no rotation, glow or gradients. Rung color follows --loading-primary.
 */

.dna-ladder {
    --dna-ladder-color: var(--loading-primary, var(--apw-accent, #1a5a3a));
    --dna-ladder-height: 72px;
    position: relative;
    width: calc(var(--dna-ladder-height) * 0.75);
    height: var(--dna-ladder-height);
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 6px;
}

.dna-ladder-strand {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 1px;
}

.dna-ladder-strand-left { left: 0; }
.dna-ladder-strand-right { right: 0; }

.dna-ladder-rung {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--dna-ladder-color);
    transform-origin: left center;
    transform: scaleX(0.08);
    animation: dnaLadderFill 1.6s ease-in-out infinite;
}

.dna-ladder-rung:nth-of-type(2) { animation-delay: 0s; }
.dna-ladder-rung:nth-of-type(3) { animation-delay: 0.15s; }
.dna-ladder-rung:nth-of-type(4) { animation-delay: 0.3s; }
.dna-ladder-rung:nth-of-type(5) { animation-delay: 0.45s; }
.dna-ladder-rung:nth-of-type(6) { animation-delay: 0.6s; }
.dna-ladder-rung:nth-of-type(7) { animation-delay: 0.75s; }

@keyframes dnaLadderFill {
    0%, 15% { transform: scaleX(0.08); }
    45%, 65% { transform: scaleX(1); }
    100% { transform: scaleX(0.08); }
}

@media (max-width: 576px) {
    .dna-ladder {
        --dna-ladder-height: 48px;
        margin-bottom: 1.5rem;
    }

    .dna-ladder-rung { height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .dna-ladder-rung { animation: none; }
    .dna-ladder-rung:nth-of-type(2) { transform: scaleX(1); }
    .dna-ladder-rung:nth-of-type(3) { transform: scaleX(0.85); }
    .dna-ladder-rung:nth-of-type(4) { transform: scaleX(0.65); }
    .dna-ladder-rung:nth-of-type(5) { transform: scaleX(0.45); }
    .dna-ladder-rung:nth-of-type(6) { transform: scaleX(0.3); }
    .dna-ladder-rung:nth-of-type(7) { transform: scaleX(0.15); }
}