/*
 * Holographic profile card (shared component).
 * Vanilla CSS + JS port of the React "ProfileCard" effect.
 * Markup/JS contract: static/js/components/profile-card.js
 *
 * Layer stack inside .nbms-pc (lowest first):
 *   .nbms-pc__glow    - blurred radial glow that follows the pointer
 *   .nbms-pc__stage   - the tilting 3D surface (rotateX/rotateY, perspective)
 *     .nbms-pc__inner - base plate + inner gradient, owns the grid context
 *       .nbms-pc__shine - animated holographic "sunpillar" stripes (z 3)
 *       .nbms-pc__glare - pointer-tracked radial glare, overlay blend (z 4)
 *       .nbms-pc__figure - avatar, luminosity blend, translateZ(2px)
 *       .nbms-pc__caption - name + title, luminosity blend, parallaxed
 *       .nbms-pc__infobar - glass bar (mini avatar, handle, status, action)
 *
 * JS writes these custom properties on the .nbms-pc element:
 *   --pointer-x / --pointer-y            pointer position, %
 *   --pointer-from-left / --from-top     normalised 0-1 pointer position
 *   --pointer-from-center                distance from centre, 0-1
 *   --background-x / --background-y      remapped 35%-65% position
 *   --rotate-x / --rotate-y              tilt angles
 * The static defaults below keep the card sane before JS runs or if it fails.
 */

.nbms-pc {
  --nbms-pc-radius: 30px;
  --nbms-pc-aspect: 0.718;

  --nbms-pc-inner-gradient: linear-gradient(145deg, #60496e8c 0%, #71c4ff44 100%);
  --nbms-pc-glow-color: rgba(125, 190, 255, 0.67);
  --nbms-pc-glow-size: 50%;

  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-left: 0.5;
  --pointer-from-top: 0.5;
  --pointer-from-center: 0;
  --background-x: 50%;
  --background-y: 50%;
  --rotate-x: 0deg;
  --rotate-y: 0deg;

  --card-opacity: 1;

  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);

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

.nbms-pc__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    var(--nbms-pc-glow-color) 0%,
    transparent var(--nbms-pc-glow-size)
  );
  filter: blur(50px) saturate(1.1);
  opacity: calc(0.8 * var(--card-opacity));
  transition: opacity 200ms ease-out;
}

.nbms-pc[data-glow='off'] .nbms-pc__glow {
  display: none;
}

.nbms-pc__shell {
  position: relative;
  z-index: 1;
}

.nbms-pc__stage {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: var(--nbms-pc-aspect);
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: var(--nbms-pc-radius);
  background: rgba(0, 0, 0, 0.9);
  background-blend-mode: color-dodge, normal, normal, normal;
  box-shadow: rgba(0, 0, 0, 0.8)
    calc((var(--pointer-from-left) * 10px) - 3px)
    calc((var(--pointer-from-top) * 20px) - 6px)
    20px -5px;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  transition: transform 1s ease;
}

/* JS drives --rotate-x / --rotate-y directly; this class is the hover state. */
.nbms-pc__stage.nbms-pc--tilt {
  transition: transform 180ms ease-out;
}

/* isolate keeps the luminosity/overlay blends from reaching the page behind. */
.nbms-pc__inner {
  position: absolute;
  inset: 0;
  display: grid;
  border-radius: var(--nbms-pc-radius);
  background-color: rgba(0, 0, 0, 0.9);
  background-image: var(--nbms-pc-inner-gradient);
  isolation: isolate;
}

.nbms-pc__inner > * {
  grid-area: 1 / -1;
}

/* ---------------------------------------------------------------- shine ---- */

.nbms-pc__shine {
  --space: 5%;
  --angle: -45deg;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--nbms-pc-radius);
  mix-blend-mode: color-dodge;
  filter: brightness(0.66) contrast(1.33) saturate(0.33) opacity(0.5);
  transform: translate3d(0, 0, 1px);
  animation: nbms-pc-holo-bg 18s linear infinite;
}

.nbms-pc__shine::before {
  content: '';
  position: absolute;
  inset: 0;
  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),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 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%
    );
}

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

/* JS drives background-position for the stripe masks; keep it off the
   ::before so the animation above owns those properties cleanly. */
.nbms-pc__shine {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------------------------------------------------------------- glare ---- */

.nbms-pc__glare {
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--nbms-pc-radius);
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.2);
  transform: translate3d(0, 0, 1.1px);
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(248, 25%, 80%) 12%,
    hsla(207, 40%, 30%, 0.8) 90%
  );
}

/* --------------------------------------------------------------- figure ---- */

.nbms-pc__figure {
  position: relative;
  z-index: 2;
  overflow: visible;
  backface-visibility: hidden;
  mix-blend-mode: luminosity;
  transform: translateZ(2px);
  pointer-events: none;
}

.nbms-pc__avatar {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  will-change: transform;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px))
    translateZ(0)
    scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02))
    scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
  transition: transform 120ms ease-out;
  border-radius: var(--nbms-pc-radius);
}

/* -------------------------------------------------------------- caption ---- */

.nbms-pc__caption {
  position: relative;
  z-index: 5;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  mix-blend-mode: luminosity;
  transform: translate3d(
      calc(var(--pointer-from-left) * -6px + 3px),
      calc(var(--pointer-from-top) * -6px + 3px),
      0.1px
    );
  pointer-events: none;
}

.nbms-pc__name,
.nbms-pc__title {
  margin: 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 1em 1.5em;
  pointer-events: auto;
}

.nbms-pc__name {
  font-size: clamp(1.35rem, 4.2vw, 2.25rem);
  font-weight: 600;
  background-image: linear-gradient(to bottom, #fff, #6f6fbe);
}

.nbms-pc__title {
  position: relative;
  top: -6px;
  width: min-content;
  margin-inline: auto;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  background-image: linear-gradient(to bottom, #fff, #4a4ac0);
}

.nbms-pc__caption-inner {
  position: absolute;
  top: 3em;
  left: 0;
  width: 100%;
}

/* --------------------------------------------------------------- infobar ---- */

.nbms-pc__infobar {
  --ui-inset: 20px;
  --ui-radius-bias: 6px;
  position: absolute;
  z-index: 2;
  bottom: var(--ui-inset);
  left: var(--ui-inset);
  right: var(--ui-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: calc(max(0px, var(--nbms-pc-radius) - var(--ui-inset) + var(--ui-radius-bias)));
  pointer-events: auto;
}

.nbms-pc__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.nbms-pc__mini {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nbms-pc__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.nbms-pc__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.nbms-pc__handle {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}

.nbms-pc__status {
  font-size: 0.875rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

.nbms-pc__action {
  flex-shrink: 0;
  display: block;
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 200ms ease-out, border-color 200ms ease-out;
}

.nbms-pc__action:hover,
.nbms-pc__action:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------- extras ---- */

/* Skills + contact links live outside the tilting stage so the 3D transform
   never blurs them and they stay comfortably clickable. */
.nbms-pc-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nbms-pc-card__panel {
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: box-shadow 200ms ease;
}

.nbms-pc-card__panel:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.nbms-pc-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.nbms-pc-card__skill {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border-radius: 9999px;
}

.nbms-pc-card__contact {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.nbms-pc-card__contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #4b5563;
  text-decoration: none;
  transition: color 200ms ease;
}

.nbms-pc-card__contact a:hover,
.nbms-pc-card__contact a:focus-visible {
  color: #db2777;
}

.nbms-pc-card__contact-label {
  font-weight: 500;
  color: #1f2937;
}

.nbms-pc-card__contact svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

/* --------------------------------------------------------- preferences ---- */

@media (prefers-reduced-motion: reduce) {
  .nbms-pc__shine {
    animation: none;
  }

  .nbms-pc__stage,
  .nbms-pc__stage.nbms-pc--tilt,
  .nbms-pc__avatar {
    transition: none;
  }
}

/* Backdrop-filter is unavailable in some engines; fall back to a solid plate. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nbms-pc__infobar {
    background: rgba(20, 20, 35, 0.92);
  }
}