/*
 * PMD Universe — Cosmic Exhibition Hall
 * A single-scroll, responsive project archive.
 */

body.pmd-project-archive {
  --project-shell: min(1240px, calc(100% - 64px));
  --project-line: rgba(255, 255, 255, 0.13);
  --project-muted: #aaa2b5;
  --project-violet: #bb64ff;
  --project-violet-soft: #e6b9ff;
  --project-gold: #ffb56d;
  width: 100%;
  overflow-x: hidden;
  background: #030207;
}

body.pmd-project-archive::before {
  content: "";
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(187, 100, 255, 0.85), rgba(255, 181, 109, 0.82), transparent);
  opacity: 0.5;
}

body.pmd-project-archive #outer-wrap,
body.pmd-project-archive #wrap {
  overflow: visible;
}

body.pmd-project-archive .kodee-fab,
body.pmd-project-archive #kodee-chatbot-container,
body.pmd-project-archive .woocommerce-store-notice,
body.pmd-project-archive .owp-cart-overlay {
  display: none !important;
}

.project-shell {
  width: var(--project-shell);
  margin-inline: auto;
}

.project-site-header {
  position: absolute;
}

.project-kicker {
  margin: 0;
  color: #dba1ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
}

.projects-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: clamp(20px, 4vw, 80px);
  padding: 130px max(32px, calc((100vw - 1240px) / 2)) 90px;
  background:
    radial-gradient(circle at 78% 54%, rgba(252, 156, 88, 0.13), transparent 22rem),
    radial-gradient(circle at 68% 32%, rgba(141, 58, 223, 0.25), transparent 32rem),
    linear-gradient(118deg, #020105 0%, #050208 50%, #0c0710 100%);
}

.projects-hero::before,
.projects-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.projects-hero::before {
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  opacity: 0.26;
}

.projects-hero::after {
  z-index: 12;
  inset: auto 0 0;
  height: 170px;
  background: linear-gradient(transparent, #030207);
}

.project-stars,
.project-exit-stars {
  position: absolute;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(216, 156, 255, 0.75) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 189, 121, 0.6) 0 1px, transparent 1.4px);
  background-position: 0 0, 31px 57px, 79px 23px;
  background-size: 113px 113px, 173px 173px, 241px 241px;
}

.project-stars-one {
  animation: pmd-project-star-drift 40s linear infinite;
  opacity: 0.65;
}

.project-stars-two {
  transform: rotate(17deg) scale(1.25);
  animation: pmd-project-star-drift-reverse 58s linear infinite;
  opacity: 0.32;
}

.project-aurora {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -18%;
  width: 72vw;
  height: 72vw;
  border: 1px solid rgba(197, 125, 255, 0.11);
  border-radius: 50%;
  box-shadow:
    0 0 130px rgba(151, 62, 229, 0.2),
    inset 0 0 130px rgba(151, 62, 229, 0.12);
  animation: pmd-project-aurora 15s ease-in-out infinite;
}

.projects-hero-copy {
  position: relative;
  z-index: 6;
  max-width: 770px;
  padding-bottom: 24px;
}

.projects-hero-copy .project-kicker {
  margin-bottom: 30px;
}

.projects-hero-copy h1 {
  margin: 0 0 32px;
  color: #fff;
  font-size: clamp(76px, 8.1vw, 142px);
  font-weight: 900;
  letter-spacing: -0.082em;
  line-height: 0.76;
  text-transform: uppercase;
}

.projects-hero-copy h1 span {
  display: block;
  margin-top: 0.19em;
  padding-bottom: 0.09em;
  background: linear-gradient(105deg, #f4d7ff 4%, #b968ff 40%, #7a42e9 72%, #ffb978 108%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 36px rgba(177, 80, 255, 0.22));
}

.projects-hero-copy > p:not(.project-kicker) {
  max-width: 620px;
  margin: 0;
  color: #c2b8c9;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.75;
}

.projects-hero-meta {
  margin-top: 42px;
  display: flex;
  align-items: stretch;
  gap: 0;
  color: #93899b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.projects-hero-meta span {
  min-width: 132px;
  border-left: 1px solid var(--project-line);
  padding: 3px 24px;
}

.projects-hero-meta span:first-child {
  padding-left: 0;
  border-left: 0;
}

.projects-hero-meta b {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.black-hole-stage {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 650px;
  margin: -42px -9vw -20px -4vw;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 76% 78% at 48% 53%, black 40%, transparent 82%);
}

.black-hole-stage::before,
.black-hole-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 49%;
  top: 51%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.black-hole-stage::before {
  width: min(27vw, 410px);
  height: min(27vw, 410px);
  border: 1px solid rgba(255, 181, 104, 0.5);
  box-shadow:
    0 0 15px rgba(255, 182, 106, 0.9),
    0 0 65px rgba(255, 150, 73, 0.52),
    0 0 150px rgba(180, 70, 255, 0.28);
  animation: pmd-project-pulse 5.5s ease-in-out infinite;
}

.black-hole-stage::after {
  width: min(39vw, 590px);
  height: min(14vw, 210px);
  border-top: 1px solid rgba(255, 217, 174, 0.58);
  border-bottom: 1px solid rgba(255, 155, 81, 0.16);
  box-shadow: 0 -8px 42px rgba(255, 152, 73, 0.32);
  animation: pmd-project-ring-tilt 9s ease-in-out infinite;
}

.black-hole-stage img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
  object-position: 50% 47%;
  filter: saturate(1.05) contrast(1.16) brightness(0.9);
  transform: scale(1.1);
  animation: pmd-project-black-hole-breathe 11s ease-in-out infinite;
}

.black-hole-lensing {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 51%;
  width: min(43vw, 650px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 230, 207, 0.15);
  border-radius: 50%;
  box-shadow:
    0 0 80px rgba(255, 163, 84, 0.1),
    inset 0 0 80px rgba(189, 95, 255, 0.08);
  transform: translate(-50%, -50%);
  animation: pmd-project-lensing 18s linear infinite;
}

.black-hole-lensing::before,
.black-hole-lensing::after {
  content: "";
  position: absolute;
  inset: -7%;
  border: 1px solid rgba(191, 105, 255, 0.14);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-12deg);
}

.black-hole-lensing::after {
  inset: -18%;
  border-style: dashed;
  border-color: rgba(255, 182, 108, 0.15);
  transform: rotateX(73deg) rotateZ(18deg);
}

.black-hole-stage figcaption {
  position: absolute;
  z-index: 6;
  right: 13%;
  bottom: 12%;
  display: grid;
  gap: 5px;
  color: #efe7f4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.black-hole-stage figcaption span {
  color: #ffbd82;
  font-size: 9px;
  letter-spacing: 0.2em;
}

.project-scroll-signal {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: 33px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #8f8696;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.project-scroll-signal i {
  position: relative;
  width: 42px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}

.project-scroll-signal i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #dba1ff, transparent);
  animation: pmd-project-signal 2.4s ease-in-out infinite;
}

.exhibition-intro {
  min-height: 74vh;
  padding-block: clamp(150px, 16vw, 250px) clamp(110px, 11vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.65fr);
  align-items: end;
  gap: 80px;
}

.exhibition-intro .project-kicker {
  margin-bottom: 28px;
}

.exhibition-intro h2,
.project-archive-heading h2 {
  max-width: 880px;
  margin: 0;
  color: #f9f5ff;
  font-size: clamp(54px, 6.5vw, 100px);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.92;
}

.exhibition-intro > p,
.project-archive-heading > p {
  max-width: 510px;
  margin: 0 0 6px;
  color: var(--project-muted);
  font-size: 15px;
  line-height: 1.75;
}

.project-exhibition {
  position: relative;
  isolation: isolate;
}

.project-scene {
  --project-accent: 187, 100, 255;
  position: relative;
  min-height: 145vh;
  background:
    radial-gradient(circle at 23% 50%, rgba(var(--project-accent), 0.085), transparent 27rem),
    linear-gradient(#030207, #07040b 55%, #030207);
}

.project-scene::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 0.7px, transparent 1.1px),
    radial-gradient(circle, rgba(var(--project-accent), 0.9) 0 0.8px, transparent 1.3px);
  background-position: 0 0, 35px 68px;
  background-size: 143px 143px, 229px 229px;
  opacity: 0.19;
}

.project-accent-violet { --project-accent: 187, 100, 255; }
.project-accent-blue { --project-accent: 95, 126, 255; }
.project-accent-orange { --project-accent: 255, 139, 69; }
.project-accent-pink { --project-accent: 255, 102, 196; }
.project-accent-green { --project-accent: 90, 236, 178; }
.project-accent-cyan { --project-accent: 76, 219, 255; }

.project-scene-sticky {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: 84px 48px;
}

.project-scene-sticky::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 42% 12% -12%;
  border: 1px solid rgba(var(--project-accent), 0.11);
  border-radius: 50%;
  box-shadow: 0 0 140px rgba(var(--project-accent), 0.08);
  transform: rotate(-14deg);
}

.project-scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.75fr);
  align-items: center;
  gap: clamp(54px, 7vw, 120px);
}

.project-scene-visual,
.project-scene-copy {
  opacity: 0.62;
  transform: translateY(30px) scale(0.97);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.project-scene.is-active .project-scene-visual,
.project-scene.is-active .project-scene-copy {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-scene-visual {
  position: relative;
  padding-left: 58px;
}

.project-scene-number {
  position: absolute;
  z-index: -1;
  left: -0.02em;
  top: 50%;
  color: transparent;
  font-size: clamp(150px, 20vw, 330px);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.7;
  -webkit-text-stroke: 1px rgba(var(--project-accent), 0.2);
  transform: translate(-19%, -52%);
}

.project-image-frame {
  position: relative;
  isolation: isolate;
  width: min(100%, 690px);
  aspect-ratio: 1.07;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px 72px 4px 4px;
  background:
    radial-gradient(circle at 55% 44%, rgba(var(--project-accent), 0.4), transparent 12%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.92) 0 15%, rgba(var(--project-accent), 0.33) 17% 18%, transparent 30%),
    linear-gradient(145deg, rgba(var(--project-accent), 0.17), #09050e 58%);
  box-shadow:
    0 44px 100px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--project-accent), 0.06),
    0 0 90px rgba(var(--project-accent), 0.1);
}

.project-image-frame::before,
.project-image-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.project-image-frame::before {
  inset: 0;
  background:
    linear-gradient(118deg, rgba(var(--project-accent), 0.2), transparent 38%),
    linear-gradient(transparent 58%, rgba(3, 2, 7, 0.74));
}

.project-image-frame::after {
  right: 22px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--project-accent));
  box-shadow:
    0 0 0 6px rgba(var(--project-accent), 0.1),
    0 0 26px rgba(var(--project-accent), 0.95);
  animation: pmd-project-pulse-dot 3s ease-in-out infinite;
}

.project-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08);
  transition: filter 800ms ease, transform 1.4s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.project-scene.is-active .project-image-frame img {
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.035);
}

.project-image-label {
  position: absolute;
  z-index: 5;
  left: 24px;
  bottom: 22px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(4, 2, 7, 0.62);
  backdrop-filter: blur(14px);
  padding: 9px 13px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-image-scan {
  position: absolute;
  z-index: 4;
  inset: -40% 0 auto;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(var(--project-accent), 0.12), transparent);
  transform: skewY(-7deg);
  animation: pmd-project-scan 7s linear infinite;
}

.project-orbit-lines {
  position: absolute;
  z-index: -1;
  left: -8%;
  top: -13%;
  width: 116%;
  height: 126%;
  pointer-events: none;
}

.project-orbit-lines span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--project-accent), 0.14);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.project-orbit-lines span:nth-child(2) {
  inset: 8% -8%;
  border-style: dashed;
  transform: rotate(21deg);
}

.project-orbit-lines span:nth-child(3) {
  inset: 18% -14%;
  transform: rotate(-34deg);
}

.project-scene-topline {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--project-line);
  padding-bottom: 15px;
  color: #8f8596;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-scene-topline span:first-child {
  color: rgb(var(--project-accent));
}

.project-company {
  margin: 0 0 16px;
  color: #bfb5c5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.project-scene-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 5vw, 78px);
  font-weight: 800;
  letter-spacing: -0.066em;
  line-height: 0.94;
}

.project-role {
  margin: 18px 0 0;
  color: rgb(var(--project-accent));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

.project-summary {
  max-width: 570px;
  margin: 27px 0 0;
  color: #aaa1b0;
  font-size: 14px;
  line-height: 1.75;
}

.project-results {
  margin-top: 27px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--project-line);
  border-left: 1px solid var(--project-line);
}

.project-results span {
  min-height: 58px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--project-line);
  border-bottom: 1px solid var(--project-line);
  padding: 10px 13px;
  color: #f0eaf3;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.project-channels {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-channels span {
  border-radius: 999px;
  background: rgba(var(--project-accent), 0.075);
  padding: 7px 10px;
  color: #9f96a6;
  font-size: 9px;
  font-weight: 700;
}

.project-case-link {
  margin-top: 30px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(var(--project-accent), 0.3);
  border-radius: 999px;
  background: rgba(var(--project-accent), 0.055);
  padding: 0 20px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

a.project-case-link:hover,
a.project-case-link:focus-visible {
  border-color: rgba(var(--project-accent), 0.72);
  background: rgba(var(--project-accent), 0.13);
  transform: translateY(-2px);
}

.project-case-link.is-disabled {
  color: #77707d;
}

.project-archive {
  padding-block: clamp(150px, 16vw, 250px) 180px;
}

.project-archive-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.55fr);
  align-items: end;
  gap: 80px;
}

.project-archive-heading .project-kicker {
  margin-bottom: 26px;
}

.project-filters {
  margin: 72px 0 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-filters button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--project-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.018);
  padding: 0 15px;
  color: #9d94a4;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.project-filters button span {
  min-width: 21px;
  min-height: 21px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  color: #bbb1c2;
  font-size: 8px;
}

.project-filters button:hover,
.project-filters button:focus-visible {
  color: #fff;
  border-color: rgba(214, 158, 255, 0.45);
  transform: translateY(-1px);
}

.project-filters button[aria-pressed="true"] {
  border-color: rgba(207, 139, 255, 0.56);
  background: linear-gradient(120deg, rgba(171, 71, 244, 0.23), rgba(111, 56, 185, 0.08));
  color: #fff;
  box-shadow: 0 0 28px rgba(164, 75, 236, 0.09);
}

.project-archive-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.archive-card {
  --project-accent: 187, 100, 255;
  grid-column: span 4;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 380ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.archive-card:nth-child(1),
.archive-card:nth-child(6),
.archive-card:nth-child(10) {
  grid-column: span 8;
}

.archive-card[hidden] {
  display: none;
}

.archive-card-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px 28px 4px 4px;
  background: linear-gradient(145deg, rgba(var(--project-accent), 0.055), rgba(255, 255, 255, 0.014) 50%, rgba(255, 255, 255, 0.02));
  transition: border-color 250ms ease, transform 450ms cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 450ms ease;
}

a.archive-card-link:hover,
a.archive-card-link:focus-visible {
  border-color: rgba(var(--project-accent), 0.4);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), 0 0 50px rgba(var(--project-accent), 0.07);
  transform: translateY(-6px);
}

.archive-card-media {
  position: relative;
  min-height: 245px;
  aspect-ratio: 1.28;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, #010104 0 13%, rgba(var(--project-accent), 0.5) 15% 16%, transparent 27%),
    repeating-radial-gradient(ellipse at 50% 49%, rgba(var(--project-accent), 0.22) 0 1px, transparent 2px 22px),
    linear-gradient(145deg, rgba(var(--project-accent), 0.17), #08040d 65%);
}

.archive-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(var(--project-accent), 0.13), transparent 46%), linear-gradient(transparent 56%, #09050d);
}

.archive-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.84) contrast(1.08);
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 500ms ease;
}

a.archive-card-link:hover .archive-card-media img {
  filter: saturate(1.08) contrast(1.07);
  transform: scale(1.05);
}

.archive-card-index,
.archive-card-category {
  position: absolute;
  z-index: 2;
  top: 17px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.archive-card-index {
  left: 17px;
  color: rgb(var(--project-accent));
}

.archive-card-category {
  right: 17px;
  border-radius: 999px;
  background: rgba(3, 2, 7, 0.6);
  backdrop-filter: blur(10px);
  padding: 7px 10px;
  color: #eee8f1;
}

.archive-card-copy {
  flex: 1;
  min-height: 190px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.archive-card-copy p {
  margin: 0 0 10px;
  color: #827a88;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
}

.archive-card-copy h3 {
  margin: 0;
  color: #f7f2fa;
  font-size: clamp(23px, 2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.052em;
  line-height: 1;
}

.archive-card-copy > span {
  margin-top: 13px;
  color: #9b92a1;
  font-size: 10px;
  line-height: 1.55;
}

.archive-card-copy b {
  margin-top: auto;
  padding-top: 26px;
  color: rgb(var(--project-accent));
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.project-exit {
  position: relative;
  isolation: isolate;
  min-height: 92svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 140, 64, 0.11), transparent 20rem),
    radial-gradient(circle at 50% 50%, rgba(154, 64, 235, 0.18), transparent 36rem),
    #020104;
}

.project-exit::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 51%;
  width: min(80vw, 1080px);
  aspect-ratio: 1;
  border: 1px solid rgba(218, 147, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 140px rgba(146, 56, 221, 0.12);
  transform: translate(-50%, -50%);
  animation: pmd-project-lensing 22s linear infinite reverse;
}

.project-exit-stars {
  z-index: -2;
  animation: pmd-project-star-drift 50s linear infinite;
  opacity: 0.42;
}

.project-exit-hole {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 52%;
  width: min(96vw, 1180px);
  height: 78vh;
  overflow: hidden;
  opacity: 0.68;
  mask-image: radial-gradient(ellipse 58% 62% at center, black 25%, transparent 73%);
  transform: translate(-50%, -50%);
}

.project-exit-hole img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: contrast(1.25) saturate(1.06) brightness(0.62);
  transform: scale(1.4);
  animation: pmd-project-black-hole-breathe 13s ease-in-out infinite;
}

.project-exit-copy {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  padding: 120px 24px;
  text-align: center;
}

.project-exit-copy .project-kicker {
  color: #ffbd84;
}

.project-exit-copy h2 {
  margin: 27px 0 40px;
  color: #fff;
  font-size: clamp(62px, 8.5vw, 136px);
  font-weight: 900;
  letter-spacing: -0.085em;
  line-height: 0.78;
}

.project-exit-copy h2 span {
  display: inline-block;
  margin-top: 0.2em;
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, #ffc181, #e7bcff 42%, #a84aff 88%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.project-exit-copy a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(7, 3, 10, 0.46);
  backdrop-filter: blur(14px);
  padding: 0 22px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 0 60px rgba(184, 78, 255, 0.1);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.project-exit-copy a:hover,
.project-exit-copy a:focus-visible {
  border-color: rgba(225, 176, 255, 0.65);
  box-shadow: 0 0 80px rgba(184, 78, 255, 0.18);
  transform: translateY(-2px);
}

.project-footer {
  width: var(--project-shell);
  min-height: 92px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--project-line);
  color: #746c79;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes pmd-project-star-drift {
  to { transform: translate3d(8%, 6%, 0); }
}

@keyframes pmd-project-star-drift-reverse {
  to { transform: rotate(17deg) scale(1.25) translate3d(-7%, 5%, 0); }
}

@keyframes pmd-project-aurora {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes pmd-project-black-hole-breathe {
  0%, 100% { transform: scale(1.08); }
  50% { transform: scale(1.13); }
}

@keyframes pmd-project-pulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes pmd-project-ring-tilt {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) rotate(-2deg) scaleX(0.95); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) rotate(2deg) scaleX(1.04); }
}

@keyframes pmd-project-lensing {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pmd-project-pulse-dot {
  0%, 100% { opacity: 0.45; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes pmd-project-signal {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes pmd-project-scan {
  from { transform: translateY(-100%) skewY(-7deg); }
  to { transform: translateY(450%) skewY(-7deg); }
}

@media (max-width: 1120px) {
  body.pmd-project-archive {
    --project-shell: min(100% - 48px, 1040px);
  }

  .projects-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    padding-inline: 28px;
  }

  .projects-hero-copy h1 {
    font-size: clamp(68px, 9.5vw, 108px);
  }

  .black-hole-stage {
    margin-right: -14vw;
  }

  .project-scene-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
    gap: 48px;
  }

  .project-scene-visual {
    padding-left: 30px;
  }

  .project-image-frame {
    aspect-ratio: 0.95;
  }

  .project-scene-copy h3 {
    font-size: clamp(40px, 5.4vw, 64px);
  }
}

@media (max-width: 900px) {
  body.pmd-project-archive {
    --project-shell: calc(100% - 40px);
  }

  .projects-hero {
    min-height: 980px;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
    padding: 142px 24px 90px;
  }

  .projects-hero-copy {
    width: var(--project-shell);
    margin-inline: auto;
  }

  .projects-hero-copy h1 {
    font-size: clamp(74px, 13vw, 112px);
  }

  .black-hole-stage {
    position: absolute;
    z-index: -1;
    right: -19%;
    bottom: -11%;
    width: 78%;
    height: 68%;
    min-height: 0;
    margin: 0;
    opacity: 0.82;
  }

  .black-hole-stage img {
    min-height: 0;
  }

  .black-hole-stage figcaption {
    display: none;
  }

  .projects-hero-meta {
    width: 58%;
    margin-top: 36px;
    flex-wrap: wrap;
  }

  .projects-hero-meta span {
    min-width: 50%;
    margin-bottom: 18px;
  }

  .projects-hero-meta span:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .exhibition-intro,
  .project-archive-heading {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .exhibition-intro {
    min-height: auto;
  }

  .project-scene {
    min-height: auto;
    padding-block: 78px;
  }

  .project-scene-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .project-scene-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .project-scene-visual {
    width: min(88%, 680px);
  }

  .project-image-frame {
    aspect-ratio: 1.2;
  }

  .project-scene-copy {
    max-width: 700px;
    padding-left: 8%;
  }

  .project-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-card,
  .archive-card:nth-child(1),
  .archive-card:nth-child(6),
  .archive-card:nth-child(10) {
    grid-column: span 1;
  }

  .archive-card:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.pmd-project-archive {
    --project-shell: calc(100% - 30px);
  }

  .project-site-header .header-identities {
    gap: 12px;
  }

  .project-site-header .project-wordmark {
    padding-left: 13px;
    font-size: 13px;
  }

  .project-site-header .project-wordmark::before {
    height: 18px;
  }

  .projects-hero {
    min-height: 890px;
    padding: 116px 15px 80px;
  }

  .projects-hero-copy .project-kicker {
    margin-bottom: 23px;
  }

  .projects-hero-copy h1 {
    margin-bottom: 25px;
    font-size: clamp(58px, 18.8vw, 82px);
    line-height: 0.79;
  }

  .projects-hero-copy > p:not(.project-kicker) {
    max-width: 95%;
    font-size: 14px;
    line-height: 1.68;
  }

  .projects-hero-meta {
    width: 100%;
    margin-top: 32px;
  }

  .projects-hero-meta span {
    min-width: 33.333%;
    padding: 3px 12px;
    font-size: 7px;
  }

  .projects-hero-meta span:nth-child(3) {
    padding-left: 12px;
    border-left: 1px solid var(--project-line);
  }

  .projects-hero-meta b {
    font-size: 17px;
  }

  .black-hole-stage {
    right: -34%;
    bottom: -9%;
    width: 112%;
    height: 59%;
  }

  .project-scroll-signal {
    left: 15px;
    bottom: 28px;
    transform: none;
  }

  .exhibition-intro {
    padding-block: 116px 72px;
  }

  .exhibition-intro h2,
  .project-archive-heading h2 {
    font-size: clamp(46px, 14vw, 66px);
  }

  .exhibition-intro > p,
  .project-archive-heading > p {
    font-size: 14px;
  }

  .project-scene {
    padding-block: 66px;
  }

  .project-scene-grid {
    gap: 38px;
  }

  .project-scene-visual {
    width: 100%;
    padding-left: 16px;
  }

  .project-scene-number {
    font-size: 45vw;
  }

  .project-image-frame {
    width: calc(100% - 8px);
    aspect-ratio: 0.97;
    border-radius: 3px 44px 3px 3px;
  }

  .project-scene-copy {
    padding-left: 0;
  }

  .project-scene-topline {
    margin-bottom: 25px;
  }

  .project-scene-copy h3 {
    font-size: clamp(43px, 14vw, 64px);
  }

  .project-summary {
    font-size: 13px;
  }

  .project-results {
    grid-template-columns: 1fr;
  }

  .project-results span {
    min-height: 48px;
  }

  .project-archive {
    padding-block: 122px 120px;
  }

  .project-filters {
    margin-top: 48px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 8px;
    scrollbar-width: none;
  }

  .project-filters::-webkit-scrollbar {
    display: none;
  }

  .project-filters button {
    flex: 0 0 auto;
  }

  .project-archive-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .archive-card,
  .archive-card:first-child {
    grid-column: 1;
  }

  .archive-card-media {
    min-height: 215px;
    aspect-ratio: 1.18;
  }

  .archive-card-copy {
    min-height: 176px;
    padding: 21px;
  }

  .project-exit {
    min-height: 780px;
  }

  .project-exit-hole {
    width: 150vw;
    height: 72%;
  }

  .project-exit-copy h2 {
    font-size: clamp(58px, 17vw, 82px);
  }

  .project-footer {
    min-height: 130px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 410px) {
  .projects-hero-copy h1 {
    font-size: clamp(53px, 18vw, 69px);
  }

  .projects-hero-meta span {
    padding-inline: 8px;
  }

  .project-scene-copy h3 {
    font-size: clamp(40px, 13.4vw, 55px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-stars,
  .project-aurora,
  .black-hole-stage::before,
  .black-hole-stage::after,
  .black-hole-stage img,
  .black-hole-lensing,
  .project-image-scan,
  .project-image-frame::after,
  .project-scroll-signal i::after,
  .project-exit::before,
  .project-exit-hole img {
    animation: none !important;
  }

  .project-scene-visual,
  .project-scene-copy,
  .archive-card-link,
  .project-image-frame img {
    transition-duration: 0.01ms !important;
  }
}

/* PMD Universe 1.3.2 — denser exhibition rhythm and cinematic motion */
.projects-hero {
  height: 100svh;
  min-height: 760px;
  max-height: 1040px;
}

.black-hole-stage {
  align-self: center;
  width: calc(100% + 10vw);
  height: clamp(560px, 72svh, 780px);
  min-height: 0;
  margin: -20px -5vw -20px -5vw;
  overflow: visible;
  mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, black 58%, transparent 94%);
}

.black-hole-stage img {
  min-height: 0;
  object-position: 50% 48%;
  transform: translate3d(0, 0, 0) scale(1.035);
  animation: pmd-project-black-hole-float 12s ease-in-out infinite;
}

.black-hole-dust {
  position: absolute;
  z-index: 2;
  inset: 5%;
  pointer-events: none;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 7%, rgba(255, 183, 113, 0.08) 7.2% 7.35%, transparent 7.7% 13%),
    conic-gradient(from 20deg, transparent, rgba(195, 107, 255, 0.13), transparent 18%, rgba(255, 166, 88, 0.11), transparent 52%);
  mix-blend-mode: screen;
  animation: pmd-project-dust-spin 28s linear infinite;
}

.black-hole-particle {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  background: #fff4df;
  box-shadow:
    0 0 9px #fff,
    0 0 24px #ff9d4c,
    0 0 52px rgba(193, 92, 255, 0.7);
}

.black-hole-particle-one {
  animation: pmd-project-particle-one 9s linear infinite;
}

.black-hole-particle-two {
  width: 4px;
  height: 4px;
  animation: pmd-project-particle-two 13s linear infinite -4s;
}

.black-hole-particle-three {
  width: 5px;
  height: 5px;
  animation: pmd-project-particle-three 16s linear infinite -8s;
}

.exhibition-intro {
  position: relative;
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
  padding-block: clamp(105px, 9vw, 145px) clamp(82px, 7.5vw, 120px);
}

.exhibition-intro::before,
.exhibition-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.exhibition-intro::before {
  right: -4%;
  top: 8%;
  width: min(42vw, 570px);
  aspect-ratio: 1;
  border: 1px solid rgba(190, 105, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 80px rgba(165, 70, 239, 0.08),
    inset 0 0 80px rgba(165, 70, 239, 0.06);
  transform: rotateX(68deg);
  animation: pmd-project-intro-orbit 16s ease-in-out infinite;
}

.exhibition-intro::after {
  left: 43%;
  top: 18%;
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 166, 255, 0.7), white);
  filter: drop-shadow(0 0 9px #a646ef);
  transform: rotate(-19deg);
  animation: pmd-project-intro-comet 8s ease-in-out infinite;
}

.project-scene {
  min-height: 118vh;
  overflow: hidden;
}

.project-scene::before {
  opacity: 0.31;
  animation: pmd-project-scene-stars 26s linear infinite;
}

.project-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 12%;
  top: 22%;
  width: 220px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--project-accent), 0.55), rgba(255, 255, 255, 0.92));
  filter: drop-shadow(0 0 8px rgba(var(--project-accent), 0.9));
  transform: rotate(-22deg);
  animation: pmd-project-scene-comet 10s ease-in-out infinite;
}

.project-scene:nth-child(even)::after {
  left: auto;
  right: 9%;
  top: 72%;
  animation-delay: -5s;
  transform: rotate(158deg);
}

.project-scene-sticky::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 2%;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 28%, rgba(var(--project-accent), 0.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.7px),
    radial-gradient(circle at 76% 80%, rgba(var(--project-accent), 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 23% 87%, rgba(255, 255, 255, 0.64) 0 1px, transparent 1.7px);
  background-size: 181px 197px, 233px 219px, 277px 253px, 317px 301px;
  opacity: 0.5;
  animation: pmd-project-scene-dust 18s ease-in-out infinite;
}

.project-archive {
  padding-block: clamp(120px, 10vw, 165px) 145px;
}

.project-archive-grid {
  align-items: start;
}

.archive-card {
  transition: opacity 260ms ease;
}

.archive-card:nth-child(10) {
  grid-column: span 4;
}

.archive-card-link {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 505px;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: border-color 250ms ease, background 250ms ease, box-shadow 450ms ease;
}

.archive-card-link::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -1px;
  border: 1px solid rgba(var(--project-accent), 0.5);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 34px rgba(var(--project-accent), 0.08);
  transition: opacity 260ms ease;
}

a.archive-card-link:hover,
a.archive-card-link:focus-visible {
  border-color: rgba(var(--project-accent), 0.48);
  background: linear-gradient(145deg, rgba(var(--project-accent), 0.1), rgba(255, 255, 255, 0.018) 54%, rgba(var(--project-accent), 0.045));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 46px rgba(var(--project-accent), 0.08);
  transform: translateZ(0);
}

a.archive-card-link:hover::before,
a.archive-card-link:focus-visible::before {
  opacity: 1;
}

.archive-card-media {
  flex: 0 0 315px;
  width: 100%;
  height: 315px;
  min-height: 0;
  aspect-ratio: auto;
}

.archive-card-copy {
  flex: 0 0 190px;
  height: 190px;
  min-height: 190px;
}

.archive-card-copy::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--project-accent));
  box-shadow: 0 0 16px rgba(var(--project-accent), 0.8);
  opacity: 0.42;
  animation: pmd-project-pulse-dot 3.5s ease-in-out infinite;
}

.archive-card-copy {
  position: relative;
}

.project-exit {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 140, 64, 0.16), transparent 20rem),
    radial-gradient(circle at 50% 50%, rgba(154, 64, 235, 0.24), transparent 38rem),
    linear-gradient(180deg, #020104, #08030c 52%, #020104);
}

.project-exit::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 84%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 189, 124, 0.74), rgba(212, 135, 255, 0.45), transparent);
  filter: blur(0.3px) drop-shadow(0 0 14px rgba(255, 154, 80, 0.8));
  animation: pmd-project-exit-beam 5s ease-in-out infinite;
}

.project-exit-stars {
  opacity: 0.7;
  animation: pmd-project-exit-stars 34s linear infinite;
}

.project-exit-orbits,
.project-exit-comets {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.project-exit-orbits span {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(78vw, 1100px);
  height: min(28vw, 390px);
  border: 1px solid rgba(225, 173, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(174, 73, 243, 0.08);
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: pmd-project-exit-orbit 14s ease-in-out infinite;
}

.project-exit-orbits span:nth-child(2) {
  width: min(90vw, 1280px);
  height: min(36vw, 510px);
  border-style: dashed;
  opacity: 0.48;
  animation-delay: -4.6s;
  transform: translate(-50%, -50%) rotate(16deg);
}

.project-exit-orbits span:nth-child(3) {
  width: min(62vw, 880px);
  height: min(21vw, 300px);
  border-color: rgba(255, 174, 104, 0.22);
  animation-delay: -9.2s;
  transform: translate(-50%, -50%) rotate(-24deg);
}

.project-exit-comets span {
  position: absolute;
  left: -16%;
  top: 31%;
  width: 250px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 139, 255, 0.48), #fff);
  filter: drop-shadow(0 0 8px #a840ef);
  transform: rotate(-17deg);
  animation: pmd-project-exit-comet 8s ease-in-out infinite;
}

.project-exit-comets span::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px #fff, 0 0 36px #b94cff;
}

.project-exit-comets span:nth-child(2) {
  left: auto;
  right: -18%;
  top: 72%;
  transform: rotate(164deg);
  animation-delay: -4s;
}

.project-exit-hole {
  opacity: 0.8;
}

.project-exit-hole img {
  animation: pmd-project-exit-hole 14s ease-in-out infinite;
}

@keyframes pmd-project-black-hole-float {
  0%,
  100% {
    transform: translate3d(-1.2%, 0.5%, 0) scale(1.035);
    filter: saturate(1.04) contrast(1.16) brightness(0.88);
  }
  50% {
    transform: translate3d(1.2%, -0.7%, 0) scale(1.075);
    filter: saturate(1.16) contrast(1.19) brightness(0.98);
  }
}

@keyframes pmd-project-dust-spin {
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes pmd-project-particle-one {
  0% { transform: rotate(0deg) translateX(245px) scale(0.65); opacity: 0; }
  15%, 82% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(245px) scale(1.15); opacity: 0; }
}

@keyframes pmd-project-particle-two {
  0% { transform: rotate(120deg) translateX(310px) scale(0.7); opacity: 0; }
  18%, 78% { opacity: 0.78; }
  100% { transform: rotate(480deg) translateX(310px) scale(1); opacity: 0; }
}

@keyframes pmd-project-particle-three {
  0% { transform: rotate(240deg) translateX(190px) scale(0.5); opacity: 0; }
  20%, 76% { opacity: 0.7; }
  100% { transform: rotate(600deg) translateX(190px) scale(0.9); opacity: 0; }
}

@keyframes pmd-project-intro-orbit {
  0%, 100% { opacity: 0.45; transform: rotateX(68deg) rotateZ(-6deg) scale(0.96); }
  50% { opacity: 0.9; transform: rotateX(68deg) rotateZ(7deg) scale(1.04); }
}

@keyframes pmd-project-intro-comet {
  0%, 18% { opacity: 0; transform: translate3d(-38vw, 22vh, 0) rotate(-19deg); }
  35%, 72% { opacity: 0.8; }
  88%, 100% { opacity: 0; transform: translate3d(48vw, -20vh, 0) rotate(-19deg); }
}

@keyframes pmd-project-scene-stars {
  to { background-position: 143px 89px, -194px 154px; }
}

@keyframes pmd-project-scene-comet {
  0%, 14% { opacity: 0; translate: -40vw 20vh; }
  28%, 70% { opacity: 0.8; }
  86%, 100% { opacity: 0; translate: 70vw -28vh; }
}

@keyframes pmd-project-scene-dust {
  0%, 100% { opacity: 0.28; transform: translate3d(-1%, 1%, 0); }
  50% { opacity: 0.62; transform: translate3d(1.5%, -1%, 0); }
}

@keyframes pmd-project-exit-stars {
  to { transform: rotate(2deg) scale(1.1) translate3d(6%, 4%, 0); }
}

@keyframes pmd-project-exit-orbit {
  0%, 100% { opacity: 0.24; scale: 0.96; }
  50% { opacity: 0.8; scale: 1.04; }
}

@keyframes pmd-project-exit-comet {
  0%, 12% { opacity: 0; translate: -16vw 18vh; }
  30%, 68% { opacity: 1; }
  86%, 100% { opacity: 0; translate: 145vw -36vh; }
}

@keyframes pmd-project-exit-beam {
  0%, 100% { opacity: 0.24; transform: scaleY(0.86); }
  50% { opacity: 0.9; transform: scaleY(1.05); }
}

@keyframes pmd-project-exit-hole {
  0%, 100% { transform: translate3d(-1%, 0.6%, 0) scale(1.37); filter: contrast(1.25) saturate(1.06) brightness(0.59); }
  50% { transform: translate3d(1%, -0.6%, 0) scale(1.45); filter: contrast(1.3) saturate(1.16) brightness(0.72); }
}

@media (max-width: 900px) {
  .projects-hero {
    height: auto;
    min-height: 900px;
    max-height: none;
  }

  .black-hole-stage {
    width: 84%;
    height: 62%;
    min-height: 0;
    margin: 0;
    mask-image: radial-gradient(ellipse 94% 92% at 50% 50%, black 56%, transparent 96%);
  }

  .project-scene {
    min-height: auto;
  }

  .project-scene::after {
    opacity: 0.6;
  }

  .archive-card:nth-child(10) {
    grid-column: span 1;
  }

  .archive-card-link {
    min-height: 505px;
  }
}

/* PMD Universe 1.4.0 — image-free hero black hole */
.black-hole-stage {
  background:
    radial-gradient(ellipse at 52% 50%, rgba(118, 48, 190, 0.17) 0, rgba(68, 21, 105, 0.08) 31%, transparent 67%);
  mask-image: none;
}

.black-hole-stage .pmd-hole-visual {
  left: 51%;
  top: 50%;
  width: min(94%, 700px);
}

.black-hole-stage .black-hole-lensing {
  z-index: 1;
  opacity: 0.56;
  border-color: rgba(173, 94, 247, 0.16);
  box-shadow:
    0 0 80px rgba(150, 63, 224, 0.08),
    inset 0 0 88px rgba(105, 30, 166, 0.1);
}

.black-hole-stage .black-hole-dust {
  z-index: 0;
  opacity: 0.62;
}

.black-hole-stage::before {
  z-index: 3;
  border-color: rgba(255, 211, 172, 0.28);
  box-shadow:
    0 0 18px rgba(255, 185, 119, 0.42),
    0 0 76px rgba(255, 141, 73, 0.2),
    0 0 150px rgba(167, 73, 239, 0.18);
}

.black-hole-stage::after {
  z-index: 2;
  opacity: 0.48;
  border-top-color: rgba(226, 186, 255, 0.28);
  border-bottom-color: rgba(255, 151, 84, 0.12);
}

@media (max-width: 760px) {
  .black-hole-stage .pmd-hole-visual {
    left: 52%;
    width: min(118%, 500px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .black-hole-stage .pmd-hole-visual,
  .black-hole-stage .pmd-hole-visual::before,
  .black-hole-stage .pmd-hole-visual::after,
  .black-hole-stage .pmd-hole-warp,
  .black-hole-stage .pmd-hole-disc,
  .black-hole-stage .pmd-hole-flare,
  .black-hole-stage .pmd-hole-axis {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .projects-hero {
    min-height: 850px;
  }

  .black-hole-stage {
    right: -28%;
    bottom: -7%;
    width: 108%;
    height: 56%;
  }

  .black-hole-particle {
    display: none;
  }

  .exhibition-intro {
    padding-block: 88px 62px;
  }

  .project-scene::after {
    width: 150px;
  }

  .project-archive {
    padding-block: 96px 105px;
  }

  .archive-card-link {
    min-height: 0;
  }

  .archive-card-media {
    flex-basis: 230px;
    height: 230px;
  }

  .archive-card-copy {
    flex: 1 1 auto;
    height: auto;
    min-height: 176px;
  }

  .project-exit-orbits span {
    width: 150vw;
    height: 54vw;
  }

  .project-exit-orbits span:nth-child(2) {
    width: 175vw;
    height: 68vw;
  }

  .project-exit-orbits span:nth-child(3) {
    width: 125vw;
    height: 43vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .black-hole-dust,
  .black-hole-particle,
  .exhibition-intro::before,
  .exhibition-intro::after,
  .project-scene::before,
  .project-scene::after,
  .project-scene-sticky::before,
  .archive-card-copy::after,
  .project-exit::after,
  .project-exit-stars,
  .project-exit-orbits span,
  .project-exit-comets span,
  .project-exit-hole img {
    animation: none !important;
  }
}