/* A quiet layer of depth. Brand artwork and its containing geometry stay intact. */
.project-visual,
.reference-brand,
.press-work,
.agency-feature,
.archive-case {
  --surface-x: 50%;
  --surface-y: 50%;
  --surface-active: 0;
  --surface-rx: 0deg;
  --surface-ry: 0deg;
}

.project-visual::after,
.reference-brand::after,
.press-work::after,
.agency-feature::after,
.archive-case::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(380px circle at var(--surface-x) var(--surface-y),
    rgb(230 239 255 / calc(var(--surface-active) * .12)), transparent 70%);
  box-shadow: inset 0 0 0 1px rgb(168 160 248 / calc(var(--surface-active) * .32));
}

.agency-feature,
.archive-case { position: relative; isolation: isolate; }
.reference-brand::after,
.press-work::after {
  background: radial-gradient(280px circle at var(--surface-x) var(--surface-y),
    rgb(168 160 248 / calc(var(--surface-active) * .11)), transparent 74%);
}
.agency-feature::after,
.archive-case::after {
  background: radial-gradient(400px circle at var(--surface-x) var(--surface-y),
    rgb(217 250 115 / calc(var(--surface-active) * .055)), transparent 74%);
}

/* Tilt belongs to the visual only: captions, links and logo placement do not shift. */
@media (hover: hover) and (pointer: fine) {
  html[data-motion=on] .project-visual {
    transform: perspective(1100px) rotateX(var(--surface-rx)) rotateY(var(--surface-ry));
    transition: transform .5s cubic-bezier(.2,.7,.25,1), box-shadow .4s;
    box-shadow: 0 calc(var(--surface-active) * 12px) 35px -16px #0008;
  }
}
.project-open:focus-visible .project-visual::after,
.press-work:focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--lime);
}
.projects > .section-head > .eyebrow::after,
.practice > .section-head > .eyebrow::after {
  content: '';
  display: inline-block;
  width: 55px;
  height: 1px;
  margin: 0 0 .3em 18px;
  background: linear-gradient(90deg, var(--lime), transparent);
}
html[data-motion=off] .project-visual { transform: none; }
html[data-motion=off] :is(.project-visual,.reference-brand,.press-work,.agency-feature,.archive-case)::after {
  background: none;
  box-shadow: none;
}
@media (max-width: 380px) {
  .projects > .section-head > .eyebrow::after,
  .practice > .section-head > .eyebrow::after { width: 28px; margin-left: 10px; }
}