/* Release visual of Ultra Deep Data ("Deep lens", partials/changelog/deep-shareholders-visual): one card
   that loops from the regular shareholder data to Deep Shareholders and back. An amber lens line sweeps the
   card and reveals the deep layer beneath it: the stake bar resolves into the numbered shares 1 to 25.000,
   the percentages into each holder's exact range of numbers, and the holders get their since dates. The window, steps, control and caption are the changelog's demo
   shell (.cl-demo, changelog-demos.css).

   Two layers draw one content block (same markup, same pixels): .cl-dl-plain parts show only in the
   regular layer, .cl-dl-deep parts only in the deep one. The deep layer sits in a window that the lens
   opens from left to right (window and content translate against each other: transform only). The loop's
   timing is the partial's $timeline; the keyframes at the end are written for it.
   Without script, with reduced motion and in print, the deep layer stands complete. */
.cl-dl {
    --dl-a: #334155;
    --dl-b: #9fb0c6;
    --dl-a-ink: #ffffff;
    --dl-b-ink: #172033;
    --dl-amber: #ffb328;
    --dl-amber-strong: #f59e0b;
    --dl-amber-ink: #9a5b06;
    --dl-amber-soft: rgba(255, 179, 40, 0.13);
    --dl-amber-glow: rgba(255, 166, 26, 0.5);
    --dl-ink-on-amber: #2a1b05;
}
@media (prefers-color-scheme: dark) {
    .cl-dl {
        --dl-a: #bfcbdc;
        --dl-b: #5d7190;
        --dl-a-ink: #0d1626;
        --dl-b-ink: #ffffff;
        --dl-amber: #ffb84a;
        --dl-amber-strong: #ffa726;
        --dl-amber-ink: #ffcf7f;
        --dl-amber-soft: rgba(255, 184, 74, 0.14);
        --dl-amber-glow: rgba(255, 170, 40, 0.55);
    }
    .cl-dl .cl-dl-max { --dl-max-ink: var(--dl-amber-ink); }
}
.dark .cl-dl {
    --dl-a: #bfcbdc;
    --dl-b: #5d7190;
    --dl-a-ink: #0d1626;
    --dl-b-ink: #ffffff;
    --dl-amber: #ffb84a;
    --dl-amber-strong: #ffa726;
    --dl-amber-ink: #ffcf7f;
    --dl-amber-soft: rgba(255, 184, 74, 0.14);
    --dl-amber-glow: rgba(255, 170, 40, 0.55);
}
.dark .cl-dl-max { --dl-max-ink: var(--dl-amber-ink); }

/* Shell: the changelog's demo window, two steps, a Max chip, one control. */
.cl-dl .cl-demo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-dl-max {
    --dl-max-ink: #8a5100;
    margin-left: auto;
    padding: 0 0.42rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: color-mix(in srgb, var(--dl-max-ink) 12%, transparent);
    color: var(--dl-max-ink);
    font: 600 10px/1.6 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cl-dl-sr {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Stage */
.cl-dl-stage { position: relative; overflow: hidden; isolation: isolate; background: var(--demo-panel); }
.cl-dl-layer { background: var(--demo-panel); }
.cl-dl-window { position: absolute; inset: 0; overflow: hidden; }
.cl-dl-layer--plain .cl-dl-deep, .cl-dl-layer--deep .cl-dl-plain { visibility: hidden; }
.cl-dl:not([data-live]) .cl-dl-layer--plain, .cl-dl[data-view="plain"]:not([data-live]) .cl-dl-window { visibility: hidden; }
.cl-dl[data-view="plain"]:not([data-live]) .cl-dl-layer--plain { visibility: visible; }
.cl-dl[data-view="plain"]:not([data-live]) .cl-dl-max { opacity: 0; }

.cl-dl-content { padding: 18px 18px 20px; }
.cl-dl-capital { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; color: var(--demo-muted); font-size: 12.5px; line-height: 1.5; }
.cl-dl-capital b { color: var(--demo-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-dl-capital-shares { color: var(--dl-amber-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The track: each holder's range of share numbers above its group of blocks, the strip of all numbers. */
.cl-dl-track { position: relative; margin-top: 12px; }
.cl-dl-ranges { position: relative; height: 34px; }
.cl-dl-range { position: absolute; bottom: 3px; color: var(--dl-amber-ink); font-size: 10.5px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-dl-range--a { left: 0; }
.cl-dl-range--b { right: 0; }

.cl-dl-strip { position: relative; height: 16px; margin-top: 10px; }
/* The regular layer's stake bar (the hero) and the deep layer's blocks are laid on 25 slots of
   (width + 2px) / 25, a block being its slot less a 2px gap; both end flush right, and the bar's bottom
   edge is the strip's. Lena Musterfrau's seven blocks (Nr. 18.001-25.000) follow Muster Invest GmbH's
   eighteen after a 6px break, so each holder's numbers read as one group under its range. */
.cl-dl-blocks { position: absolute; left: 0; top: 0; bottom: 0; right: -2px; }
.cl-dl-hero { position: absolute; left: 0; right: -2px; top: 17px; height: 43px; }
.cl-dl-hero > i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
.cl-dl-hero-a { left: 0; width: calc(72% - 2px); padding-left: 14px; border-radius: 10px 3px 3px 10px; background: var(--dl-a); color: var(--dl-a-ink); }
.cl-dl-hero-b { left: 72%; right: 2px; padding-left: 12px; border-radius: 3px 10px 10px 3px; background: var(--dl-b); color: var(--dl-b-ink); }
.cl-dl-hero b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-dl-block { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 4%); width: calc(4% - 2px); border-radius: 2px; }
.cl-dl-block--b { left: calc(72% + 6px + (var(--i) - 18) * ((28% - 6px) / 7)); width: calc((28% - 6px) / 7 - 2px); }
.cl-dl-blocks > .cl-dl-block:nth-child(18) { border-radius: 2px 5px 5px 2px; }
.cl-dl-blocks > .cl-dl-block:nth-child(19) { border-radius: 5px 2px 2px 5px; }
.cl-dl-block--a { background: var(--dl-a); }
.cl-dl-block--b { background: var(--dl-b); }
.cl-dl-block::after { content: ''; position: absolute; inset: -1px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--dl-amber), 0 0 8px var(--dl-amber-glow); opacity: 0; }
.cl-dl-block:first-child::after { border-radius: 6px 3px 3px 6px; }
.cl-dl-block:first-child { border-radius: 5px 2px 2px 5px; }
.cl-dl-blocks > .cl-dl-block:nth-child(25) { border-radius: 2px 5px 5px 2px; }

/* The holders: what the regular data has, plus each holder's numbers and since when. */
.cl-dl .cl-dl-holders { margin: 30px 0 0; padding: 0; list-style: none; }
.cl-dl .cl-dl-holders > li { margin: 0; padding: 0; }
.cl-dl .cl-dl-holders > li::before { content: none; }
.cl-dl-holder + .cl-dl-holder { margin-top: 10px; }
.cl-dl-holder-top { display: flex; align-items: center; gap: 8px; }
.cl-dl-swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--dl-a); }
.cl-dl-holder--b .cl-dl-swatch { background: var(--dl-b); }
.cl-dl-holder-name { min-width: 0; overflow: hidden; color: var(--demo-text); font-size: 13px; font-weight: 600; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.cl-dl-holder-pct { margin-left: auto; color: var(--demo-text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-dl-holder-meta { display: flex; align-items: baseline; gap: 0 10px; padding-left: 18px; color: var(--demo-muted); font-size: 11.5px; line-height: 1.55; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-dl-holder-range { color: var(--dl-amber-ink); font-weight: 600; }
.cl-dl-dot { margin: 0 6px 0 -4px; color: var(--demo-muted); font-weight: 400; }
.cl-dl-holder-since { margin-left: auto; color: var(--dl-amber-ink); font-weight: 600; }

/* The lens: an amber line with an afterglow on the deep side and a share-number readout. */
.cl-dl-beam { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cl-dl-beam-line {
    position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
    background: var(--dl-amber);
    box-shadow: 0 0 12px 1px var(--dl-amber-glow);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.cl-dl-beam-line::before { content: ''; position: absolute; top: 0; bottom: 0; right: 1px; width: 84px; background: linear-gradient(90deg, transparent, var(--dl-amber-soft) 70%, color-mix(in srgb, var(--dl-amber) 30%, transparent)); }
.cl-dl-readout {
    position: absolute; left: 0; top: var(--dl-readout-y, 50%);
    display: flex; align-items: center; justify-content: center; gap: 3px;
    width: 86px; height: 21px;
    border-radius: 11px; background: var(--dl-amber); color: var(--dl-ink-on-amber);
    box-shadow: 0 2px 10px var(--dl-amber-glow);
    font-size: 10.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cl-dl-readout b { font-weight: 700; }

/* ---------------------------------------------------------------- the loop (script sets data-live) */
.cl-dl[data-live] .cl-dl-beam { display: block; }
.cl-dl[data-live] .cl-dl-window { animation: cl-dl-window var(--dl-loop) linear infinite both; }
.cl-dl[data-live] .cl-dl-layer--deep { animation: cl-dl-counter var(--dl-loop) linear infinite both; }
.cl-dl[data-live] .cl-dl-beam { animation: cl-dl-beam var(--dl-loop) linear infinite both; }
.cl-dl[data-live] .cl-dl-beam-line { animation: cl-dl-beam-fade var(--dl-loop) linear infinite both; }
.cl-dl[data-live] .cl-dl-readout { animation: cl-dl-readout var(--dl-loop) linear infinite both; }
.cl-dl[data-live] .cl-dl-max { animation: cl-dl-max var(--dl-loop) linear infinite both; }
.cl-dl[data-live] .cl-dl-block::after { animation: cl-dl-heat var(--dl-loop) linear infinite both; animation-delay: var(--t); }
.cl-dl[data-live] .cl-dl-block { animation: cl-dl-read var(--dl-loop) linear infinite both; animation-delay: var(--t); }
.cl-dl[data-live] .cl-dl-step-0 > i, .cl-dl[data-live] [data-dl-step="0"] > i { animation: cl-dl-step-0 var(--dl-loop) linear infinite both; }
.cl-dl[data-live] [data-dl-step="1"] > i { animation: cl-dl-step-1 var(--dl-loop) linear infinite both; }
.cl-dl[data-running="false"] *, .cl-dl[data-running="false"] *::before, .cl-dl[data-running="false"] *::after { animation-play-state: paused !important; }
/* the regular layer's copies of the deep parts never show: they need no animation */
.cl-dl[data-live] .cl-dl-layer--plain .cl-dl-deep, .cl-dl[data-live] .cl-dl-layer--plain .cl-dl-deep *,
.cl-dl[data-live] .cl-dl-layer--plain .cl-dl-deep *::before, .cl-dl[data-live] .cl-dl-layer--plain .cl-dl-deep *::after { animation: none !important; }

/* 13 s: 0–2.4 regular · 2.4–4.8 the lens sweeps right · to 11.6 deep · 11.6–12.6 the lens sweeps back. */
.cl-dl { --dl-loop: 8400ms; }
@keyframes cl-dl-window {
    0% { transform: translateX(-100%); }
    8.333% { transform: translateX(-100%); animation-timing-function: cubic-bezier(0.55, 0.05, 0.3, 1); }
    36.905% { transform: translateX(0); }
    82.143% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    94.048% { transform: translateX(-100%); }
    100% { transform: translateX(-100%); }
}
@keyframes cl-dl-counter {
    0% { transform: translateX(100%); }
    8.333% { transform: translateX(100%); animation-timing-function: cubic-bezier(0.55, 0.05, 0.3, 1); }
    36.905% { transform: translateX(0); }
    82.143% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    94.048% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
@keyframes cl-dl-beam {
    0% { transform: translateX(0); }
    8.333% { transform: translateX(0); animation-timing-function: cubic-bezier(0.55, 0.05, 0.3, 1); }
    36.905% { transform: translateX(100%); }
    82.143% { transform: translateX(100%); animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    94.048% { transform: translateX(0); }
    100% { transform: translateX(0); }
}
@keyframes cl-dl-beam-fade {
    0% { opacity: 0; }
    6.548% { opacity: 0; }
    8.929% { opacity: 1; }
    36.905% { opacity: 1; }
    40.476% { opacity: 0; }
    80.357% { opacity: 0; }
    82.738% { opacity: 0.85; }
    94.048% { opacity: 0.85; }
    95.833% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes cl-dl-readout {
    0% { transform: translateX(0); opacity: 0; }
    6.548% { transform: translateX(0); opacity: 0; }
    8.333% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.05, 0.3, 1); }
    36.905% { transform: translateX(-100%); opacity: 1; }
    38.571% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(-100%); opacity: 0; }
}
@keyframes cl-dl-max {
    0% { opacity: 0; transform: scale(0.85); }
    9.524% { opacity: 0; transform: scale(0.85); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2); }
    14.286% { opacity: 1; transform: none; }
    83.333% { opacity: 1; transform: none; }
    87.5% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(0.85); }
}
@keyframes cl-dl-heat {
    0% { opacity: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
    7.738% { opacity: 0; }
    92.857% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes cl-dl-read {
    0% { transform: translateY(-3px); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
    5.357% { transform: none; }
    92.857% { transform: none; }
    100% { transform: translateY(-3px); }
}
@keyframes cl-dl-step-0 {
    0% { transform: scaleX(0.682); }
    8.333% { transform: scaleX(1); }
    8.34% { transform: scaleX(0); }
    82.143% { transform: scaleX(0); }
    100% { transform: scaleX(0.682); }
}
@keyframes cl-dl-step-1 {
    0% { transform: scaleX(0); }
    8.34% { transform: scaleX(0); }
    82.143% { transform: scaleX(1); }
    82.15% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}


/* Wide: the two holders side by side */
@container (min-width: 560px) {
    .cl-dl-content { padding: 20px 22px 22px; }
    .cl-dl .cl-dl-holders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin-top: 30px; }
    .cl-dl-holder + .cl-dl-holder { margin-top: 0; }
}

/* Phones */
@container (max-width: 480px) {
    .cl-dl-content { padding: 14px 13px 16px; }
    .cl-dl-capital { font-size: 12px; }
    .cl-dl-holder-name, .cl-dl-holder-pct { font-size: 12.5px; }
    .cl-dl-holder-meta { font-size: 11px; padding-left: 18px; }
}
@container (max-width: 340px) {
    .cl-dl-content { padding: 13px 11px 15px; }
    .cl-dl-range { font-size: 9.5px; letter-spacing: -0.015em; }
    .cl-dl-holder-meta { font-size: 10.5px; gap: 0 6px; }
    .cl-dl-dot { margin: 0 4px 0 -2px; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-dl .cl-dl-beam { display: none !important; }
    .cl-dl *, .cl-dl *::before, .cl-dl *::after { animation: none !important; }
}
@media print {
    .cl-dl .cl-dl-beam { display: none !important; }
    .cl-dl .cl-dl-layer--plain { visibility: hidden !important; }
    .cl-dl .cl-dl-window, .cl-dl .cl-dl-layer--deep { transform: none !important; opacity: 1 !important; visibility: visible !important; animation: none !important; }
}