/* ==========================================================================
   Lambda Phi Epsilon — Alpha Xi Chapter
   ProfileCard — vanilla port of the React Bits component of the same name.
   The layer stack and every blend mode are the reference's; the palette is
   not. Three deliberate departures, all so the card sits in a prospectus and
   not on a trading-card site:

     · SQUARE. --card-radius is 0, not 30px. Nothing on this site is rounded.
     · GILT, NOT PRISM. The six "sunpillar" hues become gold / bronze /
       champagne with one cool kick, so the foil reads as a stamped seal.
     · NAVY PLATE IN BOTH IMPRESSIONS. The card is one of the site's
       ink-on-navy surfaces, so it does not invert with the theme — only the
       gilt warms slightly.

   The script writes --pointer-x/y, --background-x/y, --pointer-from-center/
   top/left and --rotate-x/y on the wrapper; everything below is a function of
   those eight numbers.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
.pc-card-wrapper {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --card-opacity: 0;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: 50%;
  --background-y: 50%;
  --icon: none;

  /* The foil ramp. Reference: a full spectrum. Here: struck gold catching
     light, with one steel note so the sweep is visible at all. */
  --sunpillar-1: hsl(38, 62%, 68%);    /* gold        */
  --sunpillar-2: hsl(47, 74%, 80%);    /* pale gold   */
  --sunpillar-3: hsl(27, 48%, 58%);    /* bronze      */
  --sunpillar-4: hsl(45, 58%, 88%);    /* champagne   */
  --sunpillar-5: hsl(214, 42%, 56%);   /* royal blue  */
  --sunpillar-6: hsl(40, 66%, 74%);    /* gold again  */

  --behind-glow-color: rgba(201, 185, 142, 0.55);   /* --accent-dark, lit */
  --behind-glow-size: 55%;

  --card-plate: #16294C;        /* --navy-plate, held in BOTH impressions */
  --card-radius: 0;

  perspective: 900px;
  transform: translate3d(0, 0, 0.1px);
  position: relative;
  touch-action: none;
}

/* ---- 2. The bloom behind the card --------------------------------------- */
.pc-behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    var(--behind-glow-color) 0%,
    transparent var(--behind-glow-size)
  );
  filter: blur(46px) saturate(1.05);
  opacity: calc(0.75 * var(--card-opacity));
  transition: opacity 200ms ease;
}

.pc-card-wrapper:hover,
.pc-card-wrapper:focus-within { --card-opacity: 1; }

/* ---- 3. The card -------------------------------------------------------- */
.pc-card-shell { position: relative; z-index: 1; }

.pc-card {
  display: grid;
  width: 100%;
  aspect-ratio: 0.78;         /* TUNED — reference 0.718. Widened so three
                                 sit in .grid--3 without running past the
                                 fold on a laptop. */
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
  background: var(--card-plate);
  border: 1px solid rgba(201, 185, 142, .28);
  backface-visibility: hidden;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  transition: transform 1s ease;
}

/* While the pointer is on the card the engine owns the transform outright;
   a transition here would lag every frame behind it. */
.pc-card.active,
.pc-card-shell.active .pc-card {
  transition: none;
  transform: translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
}

/* The one exception: the first 180ms after the pointer arrives, so the card
   does not jump from level to fully tilted in a single frame. */
.pc-card-shell.entering .pc-card { transition: transform 180ms ease-out; }

/* Every layer occupies the same cell — this is what stacks them. */
.pc-card * {
  display: grid;
  grid-area: 1/-1;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.pc-inside {
  inset: 0;
  position: absolute;
  background-color: var(--card-plate);
  transform: none;
}

/* ---- 4. The foil -------------------------------------------------------- */
/* A repeating hue ramp, a raking highlight, and a pointer-centred darkener,
   blended together and then masked through the lambda watermark so the foil
   only shows where the chapter's mark is struck. */
.pc-shine {
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  -webkit-mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
  mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
  transition: filter .8s ease;
  filter: brightness(0.78) contrast(1.3) saturate(0.62) opacity(0.62);
  animation: pc-holo-bg 18s linear infinite;
  mix-blend-mode: color-dodge;
}

.pc-shine,
.pc-shine::after {
  --space: 5%;
  --angle: -45deg;
  transform: translate3d(0, 0, 1px);
  overflow: hidden;
  z-index: 3;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--sunpillar-1) calc(var(--space) * 1),
      var(--sunpillar-2) calc(var(--space) * 2),
      var(--sunpillar-3) calc(var(--space) * 3),
      var(--sunpillar-4) calc(var(--space) * 4),
      var(--sunpillar-5) calc(var(--space) * 5),
      var(--sunpillar-6) calc(var(--space) * 6),
      var(--sunpillar-1) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0C1B38 0%,
      hsl(42, 12%, 58%) 3.8%,
      hsl(42, 30%, 68%) 4.5%,
      hsl(42, 12%, 58%) 5.2%,
      #0C1B38 10%,
      #0C1B38 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );
  background-position:
    0 var(--background-y),
    var(--background-x) var(--background-y),
    center;
  background-blend-mode: color, hard-light;
  background-size: 500% 500%, 300% 300%, 200% 200%;
  background-repeat: repeat;
}

.pc-shine::before,
.pc-shine::after {
  content: "";
  background-position: center;
  background-size: cover;
  grid-area: 1/1;
  opacity: 0;
  transition: opacity .8s ease;
}

/* Under the pointer the drift stops and the foil brightens — a card being
   turned in the hand, not a card animating on its own.

   TUNED against the reference, which drives all three foil layers to full: at
   full strength the lambdas stop being a watermark and become the card, and
   the brother's name is no longer the first thing read. The lit state is held
   to roughly half. */
.pc-card.active .pc-shine,
.pc-card-shell.active .pc-shine {
  filter: brightness(0.82) contrast(1.2) saturate(0.55) opacity(0.5);
  animation-play-state: paused;
}

.pc-card-shell.active .pc-shine::before { opacity: .38; }
.pc-card-shell.active .pc-shine::after { opacity: .28; }

.pc-shine::before {
  background-image:
    linear-gradient(
      45deg,
      var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6),
      var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3)
    ),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),
      hsl(42, 20%, 72%) 0%, hsla(42, 12%, 30%, 0.2) 90%);
  background-size: 250% 250%, 100% 100%;
  background-position: var(--pointer-x) var(--pointer-y), center;
  background-blend-mode: color-dodge;
  filter: brightness(calc(1.8 - var(--pointer-from-center)))
          contrast(calc(var(--pointer-from-center) + 1.8))
          saturate(calc(0.4 + var(--pointer-from-center)));
  mix-blend-mode: luminosity;
}

.pc-shine::after {
  background-position: 0 var(--background-y),
    calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5), center;
  background-size: 200% 300%, 700% 700%, 100% 100%;
  mix-blend-mode: difference;
  filter: brightness(0.75) contrast(1.4);
}

/* ---- 5. The glare ------------------------------------------------------- */
.pc-glare {
  transform: translate3d(0, 0, 1.1px);
  overflow: hidden;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(44, 34%, 78%) 12%,
    hsla(219, 45%, 22%, 0.85) 90%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.1);
  opacity: .85;
  z-index: 4;
}

/* ---- 6. The face: the monogram ------------------------------------------ */
.pc-avatar-content {
  /* Reference: mix-blend-mode: luminosity, so a cut-out PHOTOGRAPH takes the
     card's own colour. The face here is an engraved monogram in --accent-dark,
     and luminosity drains it to grey — the one thing a gilt mark must not be.
     The layer therefore blends normally and the mark stays struck in gold. */
  overflow: visible;
  backface-visibility: hidden;
}

.pc-monogram {
  position: absolute;
  left: 50%;
  top: 46%;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 7.5rem);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--accent-dark);
  opacity: .92;
  white-space: nowrap;
  /* The reference parallaxes the cut-out portrait against the plate; the
     monogram gets the same treatment so it sits IN the card rather than on it. */
  transform: translate(-50%, -50%)
    translateX(calc((var(--pointer-from-left) - 0.5) * 14px))
    translateY(calc((var(--pointer-from-top) - 0.5) * 10px));
  transition: transform 120ms ease-out;
  will-change: transform;
}

/* ---- 7. The plate at the foot ------------------------------------------- */
.pc-user-info {
  position: absolute;
  --ui-inset: 14px;
  bottom: var(--ui-inset);
  left: var(--ui-inset);
  right: var(--ui-inset);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(12, 27, 56, .55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(201, 185, 142, .22);
  border-radius: 0;
  padding: 10px 12px;
}

.pc-user-details { display: flex; align-items: center; gap: 10px; }

/* The company lockups are wide (microsoft.svg is 337x72), so the slot is a
   band rather than a square: fixed height, width follows the artwork. */
.pc-mini-avatar {
  display: block;
  height: 15px;
  width: auto;
  max-width: 118px;
  overflow: hidden;
  flex: none;
}

.pc-mini-avatar img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  /* Same treatment the logo wall uses (logo-loop.css) — flatten the artwork to
     one ink so a dozen brand palettes cannot fight the plate. */
  filter: brightness(0) invert(1);
  opacity: .66;
}

.pc-user-text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pc-handle {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E7DAB6;
  line-height: 1.1;
}

.pc-handle .tag--todo { pointer-events: auto; }

.pc-status {
  display: block;
  font-size: .68rem;
  font-style: italic;
  color: rgba(231, 218, 182, .68);
  line-height: 1.25;
}

/* ---- 8. The name ------------------------------------------------------- */
.pc-plate {
  /* Above the foil (z-index 3) and the glare (4). The reference puts the name
     at 5 for the same reason: the card is a spotlight, not a texture. */
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  transform: translate3d(
    calc(var(--pointer-from-left) * -6px + 3px),
    calc(var(--pointer-from-top) * -6px + 3px),
    0.1px
  );
  z-index: 5;
}

.pc-details {
  width: 100%;
  position: absolute;
  top: 1.6em;
  display: flex;
  flex-direction: column;
  padding-inline: var(--sp-4);
}

.pc-details h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #F7F2E3;
}

.pc-details p {
  margin: .45rem 0 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

@keyframes pc-holo-bg {
  0%   { background-position: 0 var(--background-y), 0 0, center; }
  100% { background-position: 0 var(--background-y), 90% 90%, center; }
}

/* ---- 9. Reduced motion / print ----------------------------------------- */
/* The script never mounts the tilt engine under reduced motion, so the card is
   already level; the drift on the foil is the only thing left to stop. */
@media (prefers-reduced-motion: reduce) {
  .pc-shine { animation: none; }
  .pc-card { transition: none; }
  .pc-monogram { transition: none; }
}

@media print {
  .pc-behind, .pc-shine, .pc-glare { display: none; }
  .pc-card { border: 1px solid #000; background: none; }
  .pc-details h3, .pc-handle, .pc-status, .pc-monogram { color: #000; }
}

/* ---- 10. Standing in for the flat card ---------------------------------- */
/* The alumni spotlights are rendered as ordinary .card articles first, so a
   reader still gets name / role / company / note if this component never
   loads. Once it mounts, the flat card's rule and padding would frame the
   foil card a second time — so they are dropped, and only then. */
.alumni-card.pc-card-wrapper {
  border-top: 0;
  padding: 0;
  background: none;
}

/* .grid--3 is minmax(240px, 1fr), which lands FOUR spotlights on a 1120px
   measure and leaves two orphans on the second row. A portrait card wants a
   wider column than a paragraph of text does, so the spotlights ask for 280px
   and settle into two rows of three. */
#alumni-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* On one column a card would stretch to the full measure and stand nearly a
   screen tall. */
.alumni-card.pc-card-wrapper {
  max-width: 360px;
  margin-inline: auto;
  width: 100%;
}