.cover-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  container-type: size;
}

.cover-title { height: 100%; }

/* Match the displayed 1586 × 992 picture inside its object-fit box. */
.cover-reveals {
  position: absolute;
  inset: 0;
  width: min(100%, calc(100cqh * 1586 / 992));
  height: min(100%, calc(100cqw * 992 / 1586));
  margin: auto;
  pointer-events: none;
}

.cover-glow > span {
  position: absolute;
  left: var(--glow-x);
  top: var(--glow-y);
  width: var(--glow-width);
  aspect-ratio: 1;
  translate: -50% -50%;
  mix-blend-mode: screen;
  animation: cover-glow-pulse 4.8s ease-in-out -1.2s infinite;
}

.cobra-glow {
  --glow-width: 4.2%;
  background: radial-gradient(circle, #fff1be 0%, #ff391b 13%, #ff190b9c 33%, #ea090539 52%, transparent 70%);
}

.cobra-glow-left { --glow-x: 55.95%; --glow-y: 39.69%; }
.cobra-glow-right { --glow-x: 59.36%; --glow-y: 39.30%; }

.cover-glow > .skull-glow {
  --glow-x: 49.31%;
  --glow-y: 57.96%;
  --glow-width: 9%;
  background: radial-gradient(circle, #fff 0%, #e1f4ffbb 15%, #a9daff65 34%, #75bbff25 50%, transparent 70%);
  animation-delay: -3.6s;
}

@keyframes cover-glow-pulse {
  0%, 50%, 100% { opacity: .18; scale: .84; }
  25% { opacity: 1; scale: 1.12; }
}

.portrait-reveal {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe15c;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.portrait-reveal:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

.portrait-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at var(--portrait-center, 50% 42%), #ff241c 0 35%, #dc1017 55%, transparent 83%);
  mix-blend-mode: color;
  clip-path: var(--portrait-tint-shape, none);
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.portrait-reveal .portrait-name {
  position: absolute;
  left: var(--portrait-name-x, 50%);
  top: auto;
  bottom: var(--portrait-name-bottom, 7%);
  width: var(--portrait-name-width, 90%);
  height: auto;
  max-width: 100%;
  max-height: 34%;
  object-fit: contain;
  object-position: center bottom;
  mask-image: linear-gradient(#000 80%, #0004 94%, transparent);
  opacity: 0;
  transform: translate(-50%, 7px);
  filter: drop-shadow(0 3px 8px #000b);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  pointer-events: none;
}

/* Feather out the pale fringe below the rays, keeping the outer letter tips. */
:is(.cover-porkchop, .cover-lover, .member-porkchop, .member-lover) .portrait-name {
  mask-image:
    linear-gradient(#000 71%, #0005 78%, transparent 83%),
    radial-gradient(ellipse 8.5% 15% at 7.5% 75%, #000 52%, transparent),
    radial-gradient(ellipse 8.5% 15% at 92% 75%, #000 52%, transparent);
}

.portrait-reveal:is([aria-pressed="true"], :focus-visible):not([data-dismissed])::before { opacity: .9; }
.portrait-reveal:is([aria-pressed="true"], :focus-visible):not([data-dismissed]) .portrait-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
  .portrait-reveal:hover:not([data-dismissed])::before { opacity: .9; }
  .portrait-reveal:hover:not([data-dismissed]) .portrait-name {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.cover-reveal {
  inset: var(--portrait-top) var(--portrait-right) var(--portrait-bottom) var(--portrait-left);
}

.cover-purge {
  --portrait-top: 1%;
  --portrait-right: 74.1%;
  --portrait-bottom: 56.4%;
  --portrait-left: 2.5%;
  --portrait-center: 58% 44%;
  --portrait-name-x: 53%;
  --portrait-name-bottom: 4%;
}

.cover-porkchop {
  --portrait-top: 1%;
  --portrait-right: 1%;
  --portrait-bottom: 58.3%;
  --portrait-left: 76%;
  --portrait-center: 36% 48%;
  --portrait-name-x: 44%;
  --portrait-name-width: 85%;
  --portrait-name-bottom: -3%;
}

.cover-deathbone {
  --portrait-top: 43.6%;
  --portrait-right: 69.4%;
  --portrait-bottom: 0%;
  --portrait-left: 2.5%;
  --portrait-center: 52% 42%;
}

.cover-lover {
  --portrait-top: 41.7%;
  --portrait-right: 1%;
  --portrait-bottom: 0%;
  --portrait-left: 68.7%;
  --portrait-center: 47% 37%;
  --portrait-name-x: 35.5%;
  --portrait-name-width: 85%;
  --portrait-name-bottom: 12.4%;
}

.cover-live {
  --portrait-top: 7.2%;
  --portrait-right: 44%;
  --portrait-bottom: 67.6%;
  --portrait-left: 44.5%;
  --portrait-center: 57% 38%;
  --portrait-name-width: 87%;
  --portrait-name-bottom: 2%;
  --portrait-tint-shape: polygon(26% 0, 88% 0, 100% 41%, 86% 61%, 82% 87%, 59% 100%, 0 100%, 0 54%, 14% 43%);
}

@media (max-width: 770px) {
  .cover-art { container-type: normal; }
  .cover-title { height: auto; }
  .cover-reveals { width: 100%; height: 100%; }
  .cover-reveal:not(.cover-live) { display: none; }

  .member-porkchop { --portrait-name-bottom: 3%; }
  .member-lover {
    --portrait-name-x: 48%;
    --portrait-name-bottom: 9%;
  }

  .cobra-glow { --glow-width: 5.5%; }
  .cobra-glow-left { --glow-x: 61.80%; --glow-y: 40.17%; }
  .cobra-glow-right { --glow-x: 68.08%; --glow-y: 39.89%; }
  .cover-glow > .skull-glow { --glow-x: 50.27%; --glow-y: 56.56%; --glow-width: 11.4%; }

  .cover-live {
    --portrait-top: 9.7%;
    --portrait-right: 37.3%;
    --portrait-bottom: 66.5%;
    --portrait-left: 38.4%;
    --portrait-center: 66% 42%;
    --portrait-name-width: 86%;
    --portrait-name-bottom: 4%;
    --portrait-tint-shape: polygon(39% 0, 90% 0, 100% 44%, 87% 60%, 79% 77%, 79% 92%, 63% 100%, 0 100%, 6% 66%, 0 47%, 14% 29%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-glow > span { animation: none; opacity: .58; }
  .portrait-reveal::before, .portrait-reveal .portrait-name { transition: none; }
}