/* LNKS Luanda Music Group: Team page cards with a cover that slides away to reveal who it is. */

/* the cover */
.tcard__cover {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-5);
  border: 0; border-radius: 0; margin: 0;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(222, 4, 18, .55), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(196, 4, 16, .35), transparent 65%),
    #0A0A0A;
  color: #FFFFFF; text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  transition: transform 900ms cubic-bezier(.77, 0, .18, 1);
}
.tcard__cover[hidden] { display: none; }
/* the red edge that sweeps up as the cover lifts */
.tcard__cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: #DE0412; box-shadow: 0 0 24px 4px rgba(239, 132, 139, .55);
}
.tcard__rings {
  position: absolute; top: -18%; right: -30%; width: 120%; height: auto;
  fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: .5; overflow: visible;
  transition: transform 1.2s var(--motion-ease);
}
.tcard__kicker {
  position: relative; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #EF848B;
}
.tcard__role {
  position: relative; max-width: 11ch;
  font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display);
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1; text-transform: uppercase;
}
.tcard__hint {
  position: relative; margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 18px 0 6px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tcard__plus {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #DE0412; color: #FFFFFF;
  transition: transform .4s var(--motion-ease);
}
.tcard__plus svg { width: 16px; height: 16px; }
.tcard__cover:hover .tcard__rings, .tcard__cover:focus-visible .tcard__rings { transform: rotate(18deg) scale(1.05); }
.tcard__cover:hover .tcard__hint, .tcard__cover:focus-visible .tcard__hint { background: #FFFFFF; color: #0A0A0A; border-color: #FFFFFF; }
.tcard__cover:hover .tcard__plus, .tcard__cover:focus-visible .tcard__plus { transform: rotate(90deg); }
.tcard__cover:focus-visible { outline: 3px solid #EF848B; outline-offset: -3px; }

/* the reveal */
.tcard.is-revealing .tcard__cover { transform: translateY(-100%); }
.tcard.is-revealing .tcard__cover .tcard__kicker,
.tcard.is-revealing .tcard__cover .tcard__role,
.tcard.is-revealing .tcard__cover .tcard__hint { opacity: 0; transform: translateY(-24px); transition: opacity .35s ease, transform .5s ease; }
.tcard.is-covered > img, .tcard.is-covered > .tcard__ph { transform: scale(1.14); }
.tcard.is-revealing > img, .tcard.is-revealing > .tcard__ph { transform: scale(1); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.tcard.is-covered .portrait__text, .tcard.is-covered .tcard__open { opacity: 0; transform: translateY(16px); }
.tcard.is-revealing .portrait__text, .tcard.is-revealing .tcard__open { opacity: 1; transform: none; transition: opacity .6s ease .45s, transform .7s var(--motion-ease) .45s; }

/* placeholder for a partner without a photo yet */
.tcard__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 35%, #2A2A2A, #0A0A0A 75%);
}
.tcard__ph span {
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(120px, 14vw, 200px); line-height: 1;
  color: transparent; -webkit-text-stroke: 3px #DE0412; text-shadow: 0 0 40px rgba(222, 4, 18, .35);
}

/* an open role, revealed */
.tcard--open { background: #0A0A0A; color: #FFFFFF; }
.tcard--open::after { display: none; }
.tcard__open {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-5);
  background: radial-gradient(100% 60% at 50% 0%, rgba(222, 4, 18, .22), transparent 70%), #0A0A0A;
}
.tcard__open-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #EF848B; }
.tcard__open .portrait__name { font-size: clamp(26px, 2.6vw, 36px); color: #FFFFFF; }
.tcard__open-line { margin: 0; max-width: 30ch; color: rgba(255, 255, 255, .82); }
.tcard__apply { margin-top: var(--space-2); background: #DE0412; border-color: #DE0412; color: #FFFFFF; }
.tcard__apply:hover { background: #C40410; border-color: #C40410; }

@media (prefers-reduced-motion: reduce) {
  .tcard__cover, .tcard__rings, .tcard__plus, .tcard > img, .tcard > .tcard__ph, .tcard .portrait__text, .tcard .tcard__open { transition: none !important; }
  .tcard.is-covered > img, .tcard.is-covered > .tcard__ph { transform: none; }
}