/* Performance and surface-depth patch shared by index.html and case-jinzhongzi.html. */
:root {
  --card-inset: inset 0 1px 0 0 rgba(255,255,255,.18);
  --card-shadow: 0 12px 28px -22px rgba(38,37,35,.42),
                 0 2px 8px -5px rgba(38,37,35,.22);
  --card-depth: var(--card-inset), var(--card-shadow);
  --card-depth-hover: inset 0 1px 0 0 rgba(255,255,255,.24),
                      0 18px 38px -24px rgba(38,37,35,.48),
                      0 4px 12px -7px rgba(38,37,35,.28);
  --pill-depth: inset 0 1px 0 0 rgba(255,255,255,.2),
                0 7px 16px -13px rgba(38,37,35,.32);
}

.stage-viewport,
.case-stage {
  -webkit-overflow-scrolling: touch;
}

.stage,
.case-main {
  scroll-behavior: smooth;
}

.stage {
  scroll-snap-type: y proximity;
}

.rv,
.rv-left,
.rv-right,
.rv-edu-left,
.rv-edu-right,
.lanyard-card,
.proj-card,
.data-cell,
.flow-stepper .step-card {
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.galaxy-canvas {
  contain: strict;
  will-change: contents;
}

.proj-body {
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

.nav,
.return-bar {
  border-bottom: none !important;
  backface-visibility: hidden;
  contain: layout style;
  will-change: transform;
  box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.45),
              0 8px 18px -18px rgba(38,37,35,.52);
}

.skill-card,
.proj-card,
.intern-card,
.edu-card,
.research-board,
.lanyard-card,
.data-strip,
.metric-card,
.pain-card,
.swot-card,
.strategy-card,
.step-card,
.insight-box,
.result-box,
.proj-result,
.image-card,
.browser-frame {
  border: none !important;
  box-shadow: var(--card-depth);
}

.skill-card:hover,
.proj-card:hover,
.proj-card.open,
.intern-card:hover,
.edu-card:hover,
.lanyard-card:hover,
.metric-card:hover,
.pain-card:hover,
.swot-card:hover,
.strategy-card:hover,
.step-card:hover {
  box-shadow: var(--card-depth-hover);
}

.v7-kicker,
.contact-pill,
.proj-date,
.edu-badge,
.intern-role-tag,
.role-chips span,
.meta-pill,
.deliverables span,
.study-mini,
.swot-badge,
.project-motion-tab,
.project-arrow {
  border: none !important;
  box-shadow: var(--pill-depth);
}

.hitl-bar,
.proj-detail {
  border: none !important;
  box-shadow: var(--card-inset), 0 8px 18px -16px rgba(38,37,35,.34);
}

.proj-sep,
.intern-sep {
  border: none !important;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.68) 18%,rgba(255,255,255,.68) 82%,transparent);
  box-shadow: 0 1px 0 0 rgba(38,37,35,.1);
}

.data-divider {
  display: none !important;
  border: none !important;
  width: 0;
  background: none !important;
  box-shadow: none !important;
}

.data-cell,
.data-cell:hover {
  border: none !important;
  box-shadow: none !important;
}

.image-card {
  overflow: hidden;
}

.lightbox {
  backdrop-filter: blur(8px);
}

#projects .project-motion-tabs {
  border: 1px solid rgba(232,228,221,.9) !important;
  box-shadow: 0 10px 26px rgba(40,38,35,.08) !important;
}

#projects .project-motion-tab {
  box-shadow: none !important;
}

#projects .project-motion-tab.is-active {
  box-shadow: 0 6px 16px rgba(40,38,35,.14) !important;
}

.swot-image-card .image-button {
  border: 0 !important;
  box-shadow: 0 14px 38px rgba(63,61,57,.08) !important;
}

.swot-image-card img {
  border: 1px solid rgba(226,205,189,.72) !important;
}