/* Degen Check: the running screen. Link after site.css; uses only its variables.
   Every animation here moves transform and opacity and nothing else, so it stays on the compositor.
   Achromatic: greys are white and the site grey at low alpha, never a hue. State is carried by text and
   shape. Under reduced motion the layout is static and only the stage text and the counter change. */

.dcm{--dcm-muted:var(--secondary);--dcm-drift:8px;--dcm-converge:34px;max-width:880px;padding-block:8px 24px}
@supports (color:color-mix(in srgb,#000,#000)){.dcm{--dcm-muted:color-mix(in srgb,var(--primary) 20%,var(--secondary))}}
.dcm-title{font-size:var(--fs-xl);font-weight:700;line-height:1.15;letter-spacing:var(--track-head)}

/* The chamber: pane, mark, pane. */
.dcm-chamber{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin-top:28px;padding-block:28px}
/* A soft light behind the glass, so the frosted panes have something to frost. */
.dcm-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,rgba(255,255,255,0));opacity:.7;animation:dcm-breathe 6.4s ease-in-out infinite}

.dcm-pane{position:relative;overflow:hidden;min-height:132px;padding:14px;border:1px solid var(--line);border-radius:var(--corner-lg);background:var(--ground);will-change:transform;transition:transform 1.6s cubic-bezier(.45,.05,.25,1),opacity 380ms ease-out}
@supports (color:color-mix(in srgb,#000,#000)){
 .dcm-pane{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 9%,transparent),color-mix(in srgb,var(--primary) 2%,transparent) 62%),color-mix(in srgb,var(--secondary) 7%,transparent)}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .dcm-pane{-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
}
/* The 1px glint along the top edge. */
.dcm-pane::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}
/* The shimmer: a pale band that sweeps across during the models stage. */
.dcm-pane::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.13) 50%,rgba(255,255,255,0) 68%);opacity:0;transform:translateX(-100%)}
.dcm-pane-label{position:relative;display:block;font-size:var(--fs-xs);font-weight:600;line-height:1.4;color:var(--primary)}
.dcm-rows{display:grid;gap:12px;margin-top:20px}
.dcm-row{display:block;height:10px;border-radius:0 5px 0 5px;background:rgba(255,255,255,.55);opacity:.2}
.dcm-row:nth-child(1){width:88%}
.dcm-row:nth-child(2){width:62%}
.dcm-row:nth-child(3){width:76%}

/* The mark between the panes: a slow breath and one ring that opens and fades. */
.dcm-core{position:relative;display:grid;place-items:center;width:64px;height:64px}
.dcm-core::before{content:"";position:absolute;inset:4px;border:1px solid var(--line);border-radius:50%;opacity:0;animation:dcm-ring 4.2s ease-out infinite}
.dcm-mark{position:relative;width:44px;height:44px;fill:var(--primary);transform-origin:center;animation:dcm-breathe 4.2s ease-in-out infinite}

/* Evidence: the three rows in each pane light up one after another. */
.dcm[data-stage="evidence"] .dcm-row{animation:dcm-light 3.6s ease-in-out infinite}
.dcm[data-stage="evidence"] .dcm-row:nth-child(2){animation-delay:1.2s}
.dcm[data-stage="evidence"] .dcm-row:nth-child(3){animation-delay:2.4s}
.dcm[data-stage="evidence"] .dcm-pane-b .dcm-row{animation-delay:.5s}
.dcm[data-stage="evidence"] .dcm-pane-b .dcm-row:nth-child(2){animation-delay:1.7s}
.dcm[data-stage="evidence"] .dcm-pane-b .dcm-row:nth-child(3){animation-delay:2.9s}
/* Models: the rows stay lit and a slow shimmer crosses each pane, the two out of step. */
.dcm[data-stage="models"] .dcm-row,.dcm[data-stage="compare"] .dcm-row{opacity:.6}
.dcm[data-stage="models"] .dcm-pane::after{animation:dcm-shimmer 3.6s ease-in-out infinite}
.dcm[data-stage="models"] .dcm-pane-b::after{animation-delay:1.3s}
/* Compare: the panes drift toward the mark and the shimmer slows. */
.dcm[data-stage="compare"] .dcm-pane::after{animation:dcm-shimmer 5.2s ease-in-out infinite}
.dcm[data-stage="compare"] .dcm-pane-a{transform:translateX(var(--dcm-drift))}
.dcm[data-stage="compare"] .dcm-pane-b{transform:translateX(calc(-1 * var(--dcm-drift)))}
/* Result: the panes close on the mark and fade while the verdict card is made. */
.dcm[data-stage="converge"] .dcm-pane{opacity:0;transition-duration:.38s,.38s}
.dcm[data-stage="converge"] .dcm-pane-a{transform:translateX(var(--dcm-converge))}
.dcm[data-stage="converge"] .dcm-pane-b{transform:translateX(calc(-1 * var(--dcm-converge)))}
.dcm[data-stage="converge"] .dcm-stages,.dcm[data-stage="converge"] .dcm-meta,.dcm[data-stage="converge"] .dcm-note,.dcm[data-stage="converge"] .dcm-slow{opacity:0;transition:opacity .3s ease-out}

@keyframes dcm-breathe{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes dcm-ring{0%{opacity:0;transform:scale(.8)}18%{opacity:.7}100%{opacity:0;transform:scale(1.55)}}
@keyframes dcm-light{0%,100%{opacity:.2}14%,34%{opacity:1}52%{opacity:.5}}
@keyframes dcm-shimmer{0%{opacity:0;transform:translateX(-100%)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes dcm-travel{from{transform:translateX(0)}to{transform:translateX(14px)}}

/* The stage list: three honest, generic stages. The active one has a moving dot and heavier text. */
.dcm-stages{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.dcm-stage{display:flex;align-items:center;gap:14px;min-height:52px;padding-block:10px;border-bottom:1px solid var(--line);font-size:var(--fs-base);line-height:1.4;color:var(--dcm-muted)}
.dcm-stage[data-state="active"]{color:var(--primary);font-weight:700}
.dcm-stage[data-state="done"]{color:var(--primary);font-weight:400}
.dcm-track{position:relative;flex:none;width:24px;height:10px;border:1px dashed var(--secondary);border-radius:5px}
.dcm-stage[data-state="done"] .dcm-track{border:1px solid var(--primary);background:var(--primary)}
.dcm-stage[data-state="active"] .dcm-track{border:1px solid var(--primary)}
.dcm-dot{position:absolute;left:2px;top:2px;width:4px;height:4px;border-radius:50%;background:var(--primary);display:none}
.dcm-stage[data-state="active"] .dcm-dot{display:block;animation:dcm-travel 1.5s ease-in-out infinite alternate}

.dcm-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:16px;font-size:var(--fs-sm);color:var(--dcm-muted)}
.dcm-elapsed{font-size:var(--fs-lg);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--primary)}
.dcm-note{margin-top:14px;max-width:62ch;font-size:var(--fs-base);line-height:1.6;color:var(--dcm-muted)}
.dcm-slow{margin-top:12px;max-width:62ch;font-size:var(--fs-base);line-height:1.6;font-weight:600;color:var(--primary)}
.dcm-slow:empty{display:none}

/* A hidden tab pauses everything. */
.dcm[data-paused] *,.dcm[data-paused] *::before,.dcm[data-paused] *::after{animation-play-state:paused!important}

@media(min-width:760px){
 .dcm{--dcm-drift:22px;--dcm-converge:90px}
 .dcm-chamber{gap:28px;padding-block:40px}
 .dcm-pane{min-height:156px;padding:18px}
 .dcm-core{width:96px;height:96px}
 .dcm-mark{width:64px;height:64px}
 .dcm-title{font-size:var(--fs-2xl)}
}

/* Reduced motion: a static layout. Rows sit at one calm level; no sweep, drift or pulse. */
@media(prefers-reduced-motion:reduce){
 .dcm *,.dcm *::before,.dcm *::after{animation:none!important;transition:none!important}
 .dcm-row,.dcm[data-stage] .dcm-row{opacity:.5}
 .dcm-pane,.dcm[data-stage] .dcm-pane{transform:none;opacity:1}
 .dcm-mark,.dcm-glow{opacity:1;transform:none}
 .dcm-dot{left:7px}
}
@media(forced-colors:active){
 .dcm-mark{fill:CanvasText}
 .dcm-pane,.dcm-track,.dcm-stage{border-color:CanvasText}
 .dcm-row,.dcm-dot{background:CanvasText}
 .dcm-stage[data-state="done"] .dcm-track{background:CanvasText}
}