/* Small, self-contained instrument studies for the three personal projects. */
.site-preview {
  --preview-accent: #dca476;
  position: relative;
  z-index: 1;
  height: 170px;
  margin: -26px -26px 26px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background-color: #111214;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 28px 28px;
}

.site-preview::before,
.site-preview::after,
.site-preview .preview-orbit,
.site-preview .preview-core,
.site-preview .preview-detail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.site-preview::before {
  content: "";
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 70% 35%, rgba(220, 164, 118, .08), transparent 70%);
}

.site-preview::after {
  content: "";
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .035);
  pointer-events: none;
}

.site-preview .preview-caption {
  position: absolute;
  bottom: 17px;
  left: 26px;
  color: #96948f;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .16em;
}

.site-preview .preview-orbit,
.site-preview .preview-core,
.site-preview .preview-detail {
  transition: transform .45s ease, opacity .45s ease;
}

/* Audio: a sampled wave laid across a precise circular dial. */
.site-card.audio .site-preview .preview-orbit {
  width: 130px;
  height: 130px;
  top: -12px;
  right: 24px;
  border: 1px solid rgba(220, 164, 118, .24);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(220, 164, 118, .4) 0deg .7deg, transparent .7deg 15deg);
  -webkit-mask: radial-gradient(transparent 56%, #000 57% 58%, transparent 59% 65%, #000 66%);
  mask: radial-gradient(transparent 56%, #000 57% 58%, transparent 59% 65%, #000 66%);
}

.site-card.audio .site-preview .preview-core {
  left: 26px;
  right: 26px;
  top: 40px;
  height: 72px;
  background: repeating-linear-gradient(90deg, #dca476 0 3px, transparent 3px 7px);
  clip-path: polygon(0 48%, 4% 44%, 8% 52%, 12% 37%, 16% 61%, 20% 29%, 24% 68%, 28% 16%, 32% 81%, 36% 3%, 40% 94%, 44% 24%, 48% 73%, 52% 12%, 56% 90%, 60% 34%, 64% 66%, 68% 20%, 72% 80%, 76% 33%, 80% 65%, 84% 41%, 88% 57%, 92% 45%, 96% 51%, 100% 48%, 100% 53%, 96% 54%, 92% 59%, 88% 67%, 84% 63%, 80% 75%, 76% 72%, 72% 94%, 68% 79%, 64% 83%, 60% 80%, 56% 100%, 52% 78%, 48% 91%, 44% 79%, 40% 100%, 36% 81%, 32% 97%, 28% 76%, 24% 86%, 20% 73%, 16% 75%, 12% 66%, 8% 63%, 4% 58%, 0 55%);
  opacity: .84;
}

.site-card.audio .site-preview .preview-detail {
  top: 78px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: rgba(220, 164, 118, .22);
}

.site-card.audio .site-preview .preview-detail::before,
.site-card.audio .site-preview .preview-detail::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 5px;
  height: 5px;
  border: 1px solid #dca476;
  background: #151414;
  border-radius: 50%;
}

.site-card.audio .site-preview .preview-detail::before { left: 0; }
.site-card.audio .site-preview .preview-detail::after { right: 0; }

/* Workbench: overlapping window tiles with quiet tool-like details. */
.site-card.workbench .site-preview { --preview-accent: #92aabd; }
.site-card.workbench .site-preview::before {
  background: radial-gradient(ellipse at 55% 40%, rgba(146, 170, 189, .11), transparent 70%);
}

.site-card.workbench .site-preview .preview-orbit,
.site-card.workbench .site-preview .preview-core,
.site-card.workbench .site-preview .preview-detail {
  width: 112px;
  height: 76px;
  border: 1px solid rgba(146, 170, 189, .25);
  border-radius: 6px;
  background-color: #191d23;
  background-image: linear-gradient(180deg, rgba(146, 170, 189, .06) 0 16px, transparent 16px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.site-card.workbench .site-preview .preview-orbit {
  top: 24px;
  left: calc(50% - 114px);
  transform: rotate(-9deg);
  opacity: .7;
}

.site-card.workbench .site-preview .preview-core {
  top: 45px;
  left: calc(50% - 53px);
  z-index: 2;
  background-image:
    linear-gradient(180deg, rgba(146, 170, 189, .08) 0 16px, transparent 16px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(146, 170, 189, .11) 21px 22px);
}

.site-card.workbench .site-preview .preview-detail {
  top: 22px;
  left: calc(50% + 10px);
  transform: rotate(9deg);
  opacity: .78;
}

.site-card.workbench .site-preview .preview-orbit::before,
.site-card.workbench .site-preview .preview-core::before,
.site-card.workbench .site-preview .preview-detail::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8da2b3;
  box-shadow: 7px 0 0 rgba(141, 162, 179, .45), 14px 0 0 rgba(141, 162, 179, .25);
}

.site-card.workbench .site-preview .preview-orbit::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 13px;
  width: 55px;
  height: 4px;
  background: rgba(146, 170, 189, .35);
  box-shadow: 0 10px 0 rgba(146, 170, 189, .15), 0 20px 0 rgba(146, 170, 189, .15);
}

.site-card.workbench .site-preview .preview-core::after {
  content: "";
  position: absolute;
  inset: 29px 22px 14px;
  border: 1px solid rgba(146, 170, 189, .45);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(146, 170, 189, .19), rgba(146, 170, 189, .02));
}

.site-card.workbench .site-preview .preview-detail::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  top: 30px;
  right: 17px;
  border: 1px solid rgba(146, 170, 189, .5);
  border-radius: 50%;
  box-shadow: -23px 13px 0 -8px #92aabd;
}

/* AI Hub: a three-orbit network around a softly illuminated nucleus. */
.site-card.aihub .site-preview { --preview-accent: #9bbba7; }
.site-card.aihub .site-preview::before {
  background: radial-gradient(ellipse at 50% 44%, rgba(155, 187, 167, .12), transparent 65%);
}

.site-card.aihub .site-preview .preview-orbit {
  width: 166px;
  height: 65px;
  left: calc(50% - 83px);
  top: 42px;
  border: 1px solid rgba(155, 187, 167, .36);
  border-radius: 50%;
  transform: rotate(-30deg);
}

.site-card.aihub .site-preview .preview-orbit::before,
.site-card.aihub .site-preview .preview-orbit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(155, 187, 167, .3);
  border-radius: 50%;
}

.site-card.aihub .site-preview .preview-orbit::before { transform: rotate(60deg); }
.site-card.aihub .site-preview .preview-orbit::after { transform: rotate(120deg); }

.site-card.aihub .site-preview .preview-core {
  width: 35px;
  height: 35px;
  left: calc(50% - 17.5px);
  top: 57px;
  border: 1px solid rgba(185, 213, 196, .5);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, #9fbca9 0, #56715f 45%, #24342a 100%);
  box-shadow: 0 0 30px rgba(155, 187, 167, .13), inset 0 0 10px rgba(205, 229, 214, .1);
}

.site-card.aihub .site-preview .preview-detail {
  width: 6px;
  height: 6px;
  left: calc(50% + 65px);
  top: 40px;
  border: 1px solid #b3cdbd;
  border-radius: 50%;
  background: #9bbba7;
  box-shadow: -132px 62px 0 -1px #9bbba7, -92px -22px 0 -1px #9bbba7, -41px 94px 0 -1px #9bbba7;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-card.audio:hover .site-preview .preview-core { transform: scaleY(1.08); }
  .site-card.workbench:hover .site-preview .preview-orbit { transform: translateX(-4px) rotate(-12deg); }
  .site-card.workbench:hover .site-preview .preview-detail { transform: translateX(4px) rotate(12deg); }
  .site-card.aihub:hover .site-preview .preview-orbit { transform: rotate(-20deg); }
}

@media (max-width: 900px) {
  .site-preview { margin: -22px -22px 22px; }
  .site-preview .preview-caption { left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-preview .preview-orbit,
  .site-preview .preview-core,
  .site-preview .preview-detail { transition: none; }
}