/* Abstract project covers. Add a local image in projects.json to replace one. */
.project-visual {
  --project-accent: #75b8ff;
  --project-base: #0b2241;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 30% 25%, color-mix(in srgb, var(--project-accent) 24%, transparent), transparent 65%), linear-gradient(145deg, var(--project-base), #040912 90%);
}
.project-color-1 { --project-accent: #eab691; --project-base: #30221c; }
.project-color-2 { --project-accent: #a4dd78; --project-base: #172c1c; }
.project-color-3 { --project-accent: #b0a2ff; --project-base: #211d3d; }
.project-color-4 { --project-accent: #e4c56d; --project-base: #302911; }
.project-color-5 { --project-accent: #f394b5; --project-base: #361b2a; }
.project-color-6 { --project-accent: #66d9d0; --project-base: #10312e; }
.project-color-7 { --project-accent: #ffa677; --project-base: #352218; }
.visual-orbit {
  position: absolute;
  width: 210px;
  height: 210px;
  right: -35px;
  top: -35px;
  border: 1px solid var(--project-accent);
  border-radius: 32%;
  opacity: .24;
  box-shadow: 0 0 55px color-mix(in srgb, var(--project-accent) 25%, transparent), inset 0 0 45px color-mix(in srgb, var(--project-accent) 18%, transparent);
  animation: project-orbit 24s linear infinite;
}
.visual-orbit::before, .visual-orbit::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid var(--project-accent);
  border-radius: 38%;
  transform: rotate(35deg);
}
.visual-orbit::after { inset: 43px; transform: rotate(65deg); }
.visual-grid {
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: linear-gradient(var(--project-accent) 1px, transparent 1px), linear-gradient(90deg, var(--project-accent) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(transparent, #000);
}
.visual-initials {
  position: absolute;
  top: 26px;
  left: 28px;
  color: var(--project-accent);
  font: 600 clamp(34px, 5vw, 65px)/1 var(--orbit);
  letter-spacing: -.06em;
  opacity: .9;
}
.visual-index {
  position: absolute;
  bottom: 30px;
  right: 25px;
  color: var(--project-accent);
  opacity: .14;
  font: 700 80px/1 var(--orbit);
}
.visual-copy { position: absolute; left: 28px; right: 24px; bottom: 35px; }
.visual-copy strong { display: block; max-width: 85%; color: #edf3ff; font: 500 clamp(16px, 2.1vw, 25px)/1.35 var(--orbit); overflow-wrap: anywhere; }
.visual-copy small { display: block; margin-top: 12px; color: var(--project-accent); font-size: 10px; letter-spacing: 1px; overflow-wrap: anywhere; }
.project-card > .project-visual { position: absolute; inset: 0; }
.project-card .visual-copy { bottom: 110px; }
.gallery-project .visual-orbit { animation-play-state: paused; }
.gallery-project:hover .visual-orbit, .gallery-project:focus-visible .visual-orbit { animation-play-state: running; }
.gallery-project:hover .visual-initials { text-shadow: 0 0 35px var(--project-accent); }
.gallery-toolbar { justify-content: flex-end; }
@keyframes project-orbit { to { transform: rotate(360deg); } }
@media (min-width: 901px) { .project-scroll { height: calc(100vh + 6000px); } }
@media (max-width: 600px) {
  .visual-copy { left: 22px; right: 20px; }
  .visual-copy strong { font-size: 18px; }
  .visual-initials { left: 22px; }
  #project-dots { gap: 7px; flex-wrap: wrap; max-width: 160px; }
}
.paused .visual-orbit { animation: none; }
@media (prefers-reduced-motion: reduce) { .visual-orbit { animation: none; } }