/* ============================================================
   SHOWCASE LAYER — animated and 3D visuals for the work pages
   Loaded after styles.css; uses its tokens. Every visual is
   decorative or illustrative: the words around it carry the
   meaning, and nothing here shows real records.
   ============================================================ */

/* ---------- shared ---------- */
.viz { position: relative; width: 100%; }
.viz-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.viz-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: 14px;
}
.dark .viz-note { color: #8ea0b4; }

/* animations wait until their section is on screen */
.js .viz-play:not(.is-playing) * { animation-play-state: paused !important; }

/* dark band with the site's graph-paper motif */
.band-dark {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(227,179,74,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,179,74,.055) 1px, transparent 1px);
  background-size: 40px 40px;
  color: #e9edf2; position: relative; overflow: hidden;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--gold-lt); }
.band-dark .section-head p, .band-dark p { color: #b9c3cf; }
.band-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(13,31,56,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,31,56,.045) 1px, transparent 1px);
  background-size: 40px 40px;
}
.em-gold { font-style: italic; color: var(--gold-dp); font-weight: 500; }
.band-dark .em-gold { color: var(--gold-lt); }

.split-2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.split-2.flip { grid-template-columns: 1.1fr 1fr; }
.split-2 .section-head { margin-bottom: 0; }

.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.band-dark .legend { color: #b9c3cf; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.point-list { margin-top: 22px; display: grid; gap: 12px; }
.point-list li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; font-size: 15px; line-height: 1.6; }
.point-list b { font-family: var(--font-mono); font-size: 12px; color: var(--gold-dp); font-weight: 700; padding-top: 3px; }
.band-dark .point-list li { color: #dfe5ec; }
.band-dark .point-list b { color: var(--gold-lt); }

/* ---------- 1. threads: students followed across rounds ---------- */
@keyframes sc-pop  { 0%{opacity:0;transform:scale(.2)} 10%{opacity:1;transform:scale(1)} 86%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.6)} }
@keyframes sc-draw { 0%,34%{transform:scaleX(0)} 52%,86%{transform:scaleX(1);opacity:.9} 100%{transform:scaleX(1);opacity:0} }
.th-col { position: absolute; top: 0; height: 100%; border-left: 1px dashed rgba(142,160,180,.25); font-family: var(--font-mono); font-size: 12px; color: #7f93a7; padding-left: 4px; }
.th-line { position: absolute; height: 2px; background: var(--gold-lt); opacity: .9; transform-origin: 0 50%; animation: sc-draw 9s ease-out infinite; }
.th-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-lt); box-shadow: 0 0 0 3px var(--navy); animation: sc-pop 9s ease-out infinite; opacity: 0; }
.th-dot.first { background: #7fc4ba; }

/* ---------- 2. cube: the panel in three dimensions ---------- */
@keyframes sc-spin { 0%,100%{transform:rotateX(-22deg) rotateY(-38deg)} 50%{transform:rotateX(-14deg) rotateY(-142deg)} }
@keyframes sc-pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.cube-scene { position: absolute; inset: 0; perspective: 1500px; display: flex; align-items: center; justify-content: center; }
.cube-rot { position: relative; width: 340px; height: 340px; transform-style: preserve-3d; animation: sc-spin 18s ease-in-out infinite; }
.cube-slice {
  position: absolute; inset: 0; box-sizing: border-box;
  border: 1px solid rgba(142,160,180,.45);
  background-color: rgba(227,179,74,.03);
  background-image: radial-gradient(circle, rgba(210,222,234,.55) 2px, transparent 2.6px);
  background-size: 38px 38px;
}
.cube-slice > span { position: absolute; left: 0; top: -22px; font-family: var(--font-mono); font-size: 11px; color: #7f93a7; }
.cube-hit { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-lt); box-shadow: 0 0 14px var(--gold-lt); animation: sc-pulse 3s ease-in-out infinite; }

/* ---------- 3. pipeline ---------- */
@keyframes sc-lit {
  0%,100%{border-color:var(--border);box-shadow:none;transform:translateY(0)}
  8%,22%{border-color:var(--signal);box-shadow:0 12px 28px rgba(46,111,106,.16);transform:translateY(-6px)}
  32%{border-color:var(--border);box-shadow:none;transform:translateY(0)}
}
@keyframes sc-num { 0%,100%{background:var(--paper-2);color:var(--muted)} 8%,22%{background:var(--signal);color:#fff} 32%{background:var(--paper-2);color:var(--muted)} }
@keyframes sc-travel { from{left:0} to{left:100%} }
.pipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.pipe-step {
  background: var(--white); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 230px;
  animation: sc-lit 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1s);
}
.pipe-step .n {
  align-self: flex-start; font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px;
  background: var(--paper-2); color: var(--muted); animation: sc-num 7s step-end infinite; animation-delay: calc(var(--i) * 1s);
}
.pipe-step h3 { font-size: 1.02rem; line-height: 1.25; color: var(--navy); }
.pipe-step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pipe-step svg { width: 24px; height: 24px; stroke: var(--signal); }
.pipe-rail { position: relative; height: 2px; background: var(--border-2); margin: 26px 4px 0; }
.pipe-rail span { position: absolute; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--signal); animation: sc-travel 7s linear infinite; }
.tool-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tool-row span { font-family: var(--font-mono); font-size: 12px; padding: 6px 12px; border-radius: 50px; border: 1px solid var(--border-2); color: var(--navy); background: var(--white); }

/* ---------- 4. linkage ---------- */
@keyframes sc-tick { 0%,6%{opacity:0;transform:scale(.4)} 14%,88%{opacity:1;transform:scale(1)} 100%{opacity:0} }
@keyframes sc-verdict { 0%,62%{opacity:0;transform:translateY(8px)} 72%,90%{opacity:1;transform:none} 100%{opacity:0} }
.link-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.link-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-sm); }
.link-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.link-row { display: grid; grid-template-columns: 110px 1fr 1fr 30px; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #eee8de; font-size: 13px; }
.link-row > span:first-child { color: var(--muted); }
.link-row code { font-family: var(--font-mono); font-size: 13px; color: var(--navy); }
.mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 14px; opacity: 0; animation: sc-tick 8s ease-out infinite; animation-delay: calc(.4s + var(--i) * .55s); }
.mark.ok { color: var(--signal); background: #e3efed; }
.mark.near { color: var(--gold-dp); background: #f8eedb; }
.mark.no { color: #a8432c; background: #f6e2dc; }
.verdict { margin-top: auto; border-radius: 10px; padding: 14px 16px; color: #fff; display: flex; flex-direction: column; gap: 4px; opacity: 0; animation: sc-verdict 8s ease-out infinite; }
.verdict strong { font-size: 1.05rem; }
.verdict span { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.verdict.yes { background: var(--signal); }
.verdict.apart { background: var(--navy); }

/* ---------- 5. missing values ---------- */
@keyframes sc-reveal { 0%,10%{opacity:0;transform:translateY(-6px)} 20%,88%{opacity:1;transform:none} 100%{opacity:0} }
.miss-grid { display: grid; grid-template-columns: 96px repeat(12, minmax(0, 1fr)); gap: 5px; }
.miss-grid .h { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; }
.miss-grid .rid { font-family: var(--font-mono); font-size: 12px; color: var(--muted); align-self: center; }
.miss-cell { height: 40px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; background: var(--white); border: 1px solid var(--border); color: var(--navy); }
.miss-cell.m { border-color: transparent; }
.miss-cell.m b { opacity: 0; animation: sc-reveal 8s ease-out infinite; }
.chip-a { color: var(--signal); background: #e3efed; }
.chip-e { color: #2f5d9a; background: #e4ecf6; }
.chip-d { color: var(--gold-dp); background: #f8eedb; }
.chip-f { color: #7a4b8c; background: #f0e6f3; }
.chip-u { color: var(--muted); background: #eceae4; }
.letter-legend { display: grid; grid-template-columns: 32px 1fr; gap: 8px 12px; align-items: center; margin-top: 22px; font-size: 14.5px; }
.letter-legend b { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; font-family: var(--font-mono); }

/* ---------- 6. ring carousel of work samples ---------- */
@keyframes sc-ring { from{transform:rotateX(-8deg) rotateY(0)} to{transform:rotateX(-8deg) rotateY(-360deg)} }
.ring-scene { position: absolute; inset: 0; perspective: 1900px; display: flex; align-items: center; justify-content: center; }
.ring-rot { position: relative; width: 240px; height: 184px; transform-style: preserve-3d; animation: sc-ring 48s linear infinite; }
.ring-card {
  position: absolute; inset: 0; box-sizing: border-box; padding: 16px; border-radius: 14px;
  background: var(--paper); border-top: 4px solid var(--c); box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 9px; backface-visibility: hidden;
}
.ring-card em { align-self: flex-start; font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; color: var(--c); background: var(--cb); }
.ring-card strong { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ring-card small { margin-top: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.ring-wrap:hover .ring-rot { animation-play-state: paused; }

/* ---------- 7. themes and methods network ---------- */
@keyframes sc-run { from{left:-24%} to{left:100%} }
@keyframes sc-breathe { 0%,100%{box-shadow:0 0 0 0 rgba(200,151,42,0)} 50%{box-shadow:0 0 0 6px rgba(200,151,42,.18)} }
.net-node {
  position: absolute; height: 44px; box-sizing: border-box; padding: 0 14px; display: flex; gap: 10px; align-items: center;
  border-radius: 10px; background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-sm);
  font-size: 15px; font-weight: 500; color: var(--navy); white-space: nowrap;
}
.net-node i { width: 10px; height: 10px; flex: none; }
.net-node.t i { border-radius: 50%; background: var(--signal); }
.net-node.m i { border-radius: 3px; background: var(--gold); }
.net-node.m { animation: sc-breathe 4s ease-in-out infinite; }
.net-edge { position: absolute; height: 1.5px; background: var(--border-2); transform-origin: 0 50%; overflow: hidden; }
.net-edge span { position: absolute; top: 0; width: 24%; height: 100%; background: linear-gradient(90deg, rgba(200,151,42,0), var(--gold), rgba(200,151,42,0)); animation: sc-run 3.2s linear infinite; }
.net-label { position: absolute; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.net-fallback { display: none; }

/* ---------- 8. systematic review funnel ---------- */
@keyframes sc-grow { 0%,4%{transform:scaleX(0);opacity:0} 14%,88%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} }
.funnel { display: grid; gap: 12px; }
.funnel-row { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; }
.funnel-row > span { font-family: var(--font-mono); font-size: 12px; color: #8ea0b4; }
.funnel-row > div { display: flex; justify-content: center; }
.funnel-bar {
  width: var(--w); min-height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 12px; font-size: 14.5px; font-weight: 600; color: #f6f3ec;
  background: rgba(246,243,236,var(--a)); border: 1px solid rgba(246,243,236,.18);
  opacity: 0; animation: sc-grow 9s cubic-bezier(.16,1,.3,1) infinite; animation-delay: calc(var(--i) * .6s);
}
.funnel-bar.end { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.cite-card { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--navy-md); border: 1px solid #22395e; }
.cite-card strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.35; color: #fff; }
.cite-card span { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: #8ea0b4; }
.cite-card a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 9. coding matrix ---------- */
@keyframes sc-bloom { 0%,6%{transform:scale(0)} 18%,86%{transform:scale(1)} 100%{transform:scale(0)} }
.matrix { display: grid; grid-template-columns: 92px repeat(6, minmax(0, 1fr)); gap: 7px; }
.matrix .h { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; }
.matrix .code { font-size: 13.5px; font-weight: 500; color: var(--navy); align-self: center; }
.matrix .cell { height: 46px; border-radius: 8px; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.matrix .cell i { display: block; width: var(--s); height: var(--s); border-radius: calc(var(--s) / 6); background: rgba(46,111,106,var(--o)); transform: scale(0); animation: sc-bloom 8s cubic-bezier(.16,1,.3,1) infinite; animation-delay: var(--d); }

/* ---------- 10. bookshelf ---------- */
@keyframes sc-pull { 0%,100%{transform:none} 6%,14%{transform:translateZ(70px) rotateY(24deg) translateY(-26px)} 22%{transform:none} }
.shelf-scene { position: absolute; inset: 0; perspective: 1600px; display: flex; justify-content: center; align-items: flex-end; }
.shelf-rot { position: relative; width: 1260px; height: 300px; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-14deg); }
.book { position: absolute; bottom: 0; width: 124px; transform-style: preserve-3d; }
.book-body { position: absolute; inset: 0; transform-style: preserve-3d; animation: sc-pull 18s cubic-bezier(.16,1,.3,1) infinite; }
.book-front { position: absolute; inset: 0; box-sizing: border-box; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; border-radius: 2px 6px 6px 2px; box-shadow: inset 6px 0 0 rgba(0,0,0,.12); transform: translateZ(15px); }
.book-front em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.book-front strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.2; }
.book-front::after { content: ''; margin-top: auto; width: 26px; height: 2px; background: currentColor; opacity: .6; }
.book-spine { position: absolute; top: 0; left: 109px; width: 30px; height: 100%; transform: rotateY(90deg); }
.book-top { position: absolute; left: 0; top: -15px; width: 100%; height: 30px; background: #efe9dd; transform: rotateX(90deg); }
.book.rep .book-front { background: var(--signal); color: #f6f3ec; }
.book.rep .book-spine { background: #22524e; }
.book.trn .book-front { background: var(--paper); color: var(--navy); }
.book.trn .book-spine { background: #d9d1c2; }
.shelf-board { position: absolute; left: -40px; right: -40px; top: 300px; height: 18px; background: var(--gold); border-radius: 3px; box-shadow: 0 24px 40px rgba(0,0,0,.45); transform: translateZ(10px); }

/* ---------- featured case-study card (work page and home) ---------- */
.feature {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; border-radius: 20px; overflow: hidden;
  border: 1px solid #22395e; box-shadow: var(--sh-lg); background: var(--navy);
}
.feature-text { padding: 44px 42px; display: flex; flex-direction: column; gap: 16px; color: #dfe5ec; }
.feature-text h2, .feature-text h3 { color: #fff; }
.feature-text .eyebrow { color: var(--gold-lt); margin-bottom: 0; }
.feature-text p { color: #b9c3cf; font-size: 15.5px; line-height: 1.7; }
.feature-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid #22395e; }
.feature-stats b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: #fff; line-height: 1; }
.feature-stats span { font-size: 12.5px; color: #8ea0b4; }
.feature-viz { position: relative; padding: 36px 30px 24px; border-left: 1px solid #22395e;
  background-image: linear-gradient(rgba(227,179,74,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(227,179,74,.055) 1px, transparent 1px);
  background-size: 40px 40px; }
.feature .btn { align-self: flex-start; margin-top: 6px; }

/* ---------- subtle 3D tilt on cards (set by showcase.js) ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt.tilting { transition: transform .12s linear, box-shadow .45s var(--ease) !important; }

/* ---------- case-study page hero ---------- */
.cs-hero { padding: 88px 0 72px; }
.cs-hero .split-2 { align-items: center; }
.cs-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.cs-hero .lede { color: #b9c3cf; max-width: 560px; }
.cs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #22395e; }
.cs-facts b { display: block; font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; color: #fff; line-height: 1; }
.cs-facts span { font-size: 13px; color: #8ea0b4; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gold-lt); margin-bottom: 22px; }
.back-link svg { width: 16px; height: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .split-2, .split-2.flip { grid-template-columns: 1fr; gap: 36px; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-step { min-height: 0; }
  .pipe-rail { display: none; }
  .link-cases { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .feature-viz { border-left: 0; border-top: 1px solid #22395e; }
}
@media (max-width: 720px) {
  .pipe { grid-template-columns: 1fr; }
  .link-row { grid-template-columns: 92px 1fr 1fr 28px; font-size: 12px; }
  .link-row code { font-size: 12px; }
  .miss-grid { grid-template-columns: 64px repeat(12, minmax(0, 1fr)); gap: 3px; }
  .miss-cell { height: 30px; font-size: 11px; border-radius: 5px; }
  .miss-grid .h { font-size: 8px; }
  .matrix { grid-template-columns: 70px repeat(6, minmax(0, 1fr)); gap: 5px; }
  .matrix .cell { height: 38px; }
  .feature-text { padding: 32px 24px; }
  .cs-facts b, .feature-stats b { font-size: 1.7rem; }
  .viz.net { display: none; }
  .net-fallback { display: grid; gap: 10px; }
  .net-fallback div { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
  .net-fallback b { color: var(--navy); }
  .net-fallback span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
}

@media (max-width: 600px) { .ring-wrap { display: none; } }

/* ---------- reduced motion: everything visible, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-line, .th-dot, .cube-rot, .cube-hit, .pipe-step, .pipe-step .n, .pipe-rail span, .mark, .verdict,
  .miss-cell.m b, .ring-rot, .net-node.m, .net-edge span, .funnel-bar, .matrix .cell i, .book-body {
    animation: none !important; opacity: 1 !important;
  }
  .th-line, .th-dot, .mark, .verdict, .miss-cell.m b, .funnel-bar, .matrix .cell i, .book-body { transform: none !important; }
  .pipe-rail span { display: none; }
}