@view-transition { navigation: auto; }

:root { --case-progress: 0; --case-blue: #34d6ff; --case-oxide: #ff6b5e; }

.case-hero { min-height: 100svh; padding-top: clamp(8rem, 15vh, 11rem); isolation: isolate; }
.case-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(7 9 20 / .12) 0 46%, rgb(7 9 20 / .86) 73%); pointer-events: none; }
.case-hero h1 { max-width: 10ch; font-size: clamp(4rem, 8vw, 8rem); }
.case-hero .case-deck { max-width: 47rem; }

.case-v2-construct { position: absolute; z-index: -1; top: 15%; right: -2%; width: min(54vw, 53rem); aspect-ratio: 2 / .9; color: var(--case-blue); }
.case-v2-construct svg { width: 100%; height: 100%; overflow: visible; }
.case-v2-art { position:absolute;z-index:-1;inset:-18% -8%;overflow:hidden;opacity:.46;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000 22% 78%,transparent); }
.case-v2-art img { width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.68) contrast(1.12); }
.case-v2-orbit,.case-v2-line,.case-v2-boundary { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
.case-v2-orbit { opacity: .2; stroke-dasharray: 4 11; }
.case-v2-orbit--violet { color: var(--signal-violet); opacity: .3; }
.case-v2-line { stroke-width: 1.5; }
.case-v2-line--support { color: var(--signal-violet); opacity: .72; }
.case-v2-boundary { stroke: var(--case-oxide); stroke-dasharray: 3 7; }
.case-v2-construct circle { fill: var(--surface-base); stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 .35rem rgb(52 214 255 / .45)); }
.case-v2-signal,.case-v2-mark { position: absolute; font: 500 .57rem Mono, monospace; text-transform: uppercase; letter-spacing: .09em; }
.case-v2-signal--source { top: 66%; left: 1%; }
.case-v2-signal--local { top: 41%; left: 25%; }
.case-v2-signal--aws { top: 13%; left: 56%; }
.case-v2-signal--boundary { top: 72%; right: 0; color: var(--case-oxide); }
.case-v2-mark { right: 3%; bottom: -1rem; color: var(--text-secondary); }

.case-nav { isolation: isolate; }
.case-v2-progress { position: absolute; z-index: -1; inset: 0 auto 0 0; width: calc(var(--case-progress) * 100%); background: rgb(52 214 255 / .2); pointer-events: none; }
.case-nav a { position: relative; }
.case-nav a[aria-current="location"] { color: var(--case-blue); }
.case-nav a[aria-current="location"]::after { content: ""; position: absolute; right: .9rem; bottom: .35rem; left: .9rem; height: 1px; background: currentColor; }

.case-v2-lineage { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: clamp(3rem, 6vw, 6rem) 0 0; padding: 0; background: rgb(170 180 200 / .2); list-style: none; }
.case-v2-lineage li { position: relative; min-height: 15rem; padding: 1.4rem; background: var(--surface-base); }
.case-v2-lineage li::after { content: ""; position: absolute; top: 3.55rem; right: -1px; left: 1.4rem; height: 1px; background: var(--case-blue); }
.case-v2-lineage span,.case-v2-lineage strong,.case-v2-lineage small { display: block; }
.case-v2-lineage span { color: var(--case-blue); font: 400 .62rem Mono, monospace; text-transform: uppercase; letter-spacing: .1em; }
.case-v2-lineage strong { margin-top: 3.4rem; font: 500 clamp(1.1rem, 1.8vw, 1.5rem) Plex, sans-serif; }
.case-v2-lineage small { margin-top: .65rem; color: var(--text-secondary); font-size: .95rem; line-height: 1.5; }

.case-v2-pipeline { align-items: stretch; }
.case-v2-pipeline li { min-height: 0; padding: 0; }
.case-v2-pipeline details { height: 100%; }
.case-v2-pipeline summary { display: grid; align-content: space-between; min-height: 12rem; padding: 1.5rem; cursor: pointer; list-style: none; }
.case-v2-pipeline summary::-webkit-details-marker { display: none; }
.case-v2-pipeline summary::after { content: "+ Inspect"; align-self: end; margin-top: 2rem; color: var(--case-blue); font: 400 .58rem Mono, monospace; text-transform: uppercase; letter-spacing: .08em; }
.case-v2-pipeline details[open] summary::after { content: "− Close"; }
.case-v2-pipeline details > p { margin: 0; padding: 0 1.5rem 1.5rem; color: var(--text-secondary); font-size: .98rem; line-height: 1.5; }
.case-v2-pipeline summary strong,.case-v2-pipeline summary span { display: block; }
.case-v2-pipeline summary strong { color: var(--case-blue); font: 400 .67rem Mono, monospace; text-transform: uppercase; letter-spacing: .12em; }
.case-v2-pipeline summary span { margin-top: 2rem; font: 500 clamp(1rem, 1.5vw, 1.25rem)/1.35 Plex, sans-serif; }

.metric-field div { position: relative; overflow: hidden; }
.metric-field div::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--case-blue); transform: scaleX(0); transform-origin: left; transition: transform 360ms ease; }
.metric-field.is-visible div::after { transform: scaleX(1); }
.metric-field.is-visible div:nth-child(2)::after { transition-delay: 45ms; }.metric-field.is-visible div:nth-child(3)::after { transition-delay: 90ms; }.metric-field.is-visible div:nth-child(4)::after { transition-delay: 135ms; }.metric-field.is-visible div:nth-child(5)::after { transition-delay: 180ms; }.metric-field.is-visible div:nth-child(6)::after { transition-delay: 225ms; }

.divergence { position: relative; }
.divergence::before { content: "10M"; position: absolute; z-index: 2; top: -2.5rem; left: 50%; color: var(--case-oxide); font: 500 .65rem Mono, monospace; letter-spacing: .1em; transform: translateX(-50%); }
.divergence-path--passed { border-top: 2px solid var(--case-blue); }
.divergence-path--failed { border-top: 2px dashed var(--case-oxide); }

.case-v2-next { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgb(170 180 200 / .22); }
.case-v2-next a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-primary); text-underline-offset: .3em; }

@media (max-width: 800px) {
  .case-hero { min-height: 940px; padding-top: 7rem; }
  .case-hero::after { background: linear-gradient(180deg, transparent 0 44%, rgb(7 9 20 / .72) 78%); }
  .case-v2-construct { top: 45%; right: -34%; width: 125vw; }
  .case-v2-signal { font-size: .48rem; }
  .case-v2-signal--source,.case-v2-signal--local { display: none; }
  .case-v2-mark { display: none; }
  .case-v2-lineage { grid-template-columns: 1fr; }
  .case-v2-lineage li { min-height: 10rem; }
  .case-v2-pipeline summary { min-height: 10rem; }
  .case-v2-next { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .metric-field div::after { transform: scaleX(1); transition: none; }
}

@media (forced-colors: active) {
  .case-v2-construct path,.case-v2-construct circle { stroke: CanvasText; }
  .case-v2-lineage li,.case-v2-pipeline li,.divergence-path { border: 1px solid CanvasText; }
}
.case-v2-construct { view-transition-name:nitheesh-evidence-origin; }
