{"name":"ProfileCard","title":"ProfileCard","description":"Animated profile card glare with 3D hover effect.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div ref=\"wrapRef\" :class=\"`pc-card-wrapper ${className}`.trim()\" :style=\"cardStyle\">\n    <section ref=\"cardRef\" class=\"pc-card\">\n      <div class=\"pc-inside\">\n        <div class=\"pc-shine\" />\n\n        <div class=\"pc-glare\" />\n\n        <div class=\"pc-content pc-avatar-content\">\n          <img\n            class=\"avatar\"\n            :src=\"avatarUrl\"\n            :alt=\"`${name || 'User'} avatar`\"\n            loading=\"lazy\"\n            @error=\"handleAvatarError\"\n          />\n\n          <div v-if=\"showUserInfo\" class=\"pc-user-info\">\n            <div class=\"pc-user-details\">\n              <div class=\"pc-mini-avatar\">\n                <img\n                  :src=\"miniAvatarUrl || avatarUrl\"\n                  :alt=\"`${name || 'User'} mini avatar`\"\n                  loading=\"lazy\"\n                  @error=\"handleMiniAvatarError\"\n                />\n              </div>\n\n              <div class=\"pc-user-text\">\n                <div class=\"pc-handle\">@{{ handle }}</div>\n\n                <div class=\"pc-status\">{{ status }}</div>\n              </div>\n            </div>\n\n            <button\n              class=\"pc-contact-btn\"\n              @click=\"handleContactClick\"\n              style=\"pointer-events: auto\"\n              type=\"button\"\n              :aria-label=\"`Contact ${name || 'user'}`\"\n            >\n              {{ contactText }}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"pc-content\">\n          <div class=\"pc-details\">\n            <h3>{{ name }}</h3>\n\n            <p>{{ title }}</p>\n          </div>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useTemplateRef } from 'vue';\n\ninterface Props {\n  avatarUrl?: string;\n  iconUrl?: string;\n  grainUrl?: string;\n  behindGradient?: string;\n  innerGradient?: string;\n  showBehindGradient?: boolean;\n  className?: string;\n  enableTilt?: boolean;\n  miniAvatarUrl?: string;\n  name?: string;\n  title?: string;\n  handle?: string;\n  status?: string;\n  contactText?: string;\n  showUserInfo?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  avatarUrl: '<Placeholder for avatar URL>',\n  iconUrl: '<Placeholder for icon URL>',\n  grainUrl: '<Placeholder for grain URL>',\n  behindGradient: undefined,\n  innerGradient: undefined,\n  showBehindGradient: true,\n  className: '',\n  enableTilt: true,\n  miniAvatarUrl: undefined,\n  name: 'Javi A. Torres',\n  title: 'Software Engineer',\n  handle: 'javicodes',\n  status: 'Online',\n  contactText: 'Contact',\n  showUserInfo: true\n});\n\nconst emit = defineEmits<{\n  contactClick: [];\n}>();\n\nconst wrapRef = useTemplateRef<HTMLDivElement>('wrapRef');\nconst cardRef = useTemplateRef<HTMLElement>('cardRef');\n\nconst DEFAULT_BEHIND_GRADIENT =\n  'radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)';\n\nconst DEFAULT_INNER_GRADIENT = 'linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)';\n\nconst ANIMATION_CONFIG = {\n  SMOOTH_DURATION: 600,\n  INITIAL_DURATION: 1500,\n  INITIAL_X_OFFSET: 70,\n  INITIAL_Y_OFFSET: 60\n} as const;\n\nconst clamp = (value: number, min = 0, max = 100): number => Math.min(Math.max(value, min), max);\n\nconst round = (value: number, precision = 3): number => parseFloat(value.toFixed(precision));\n\nconst adjust = (value: number, fromMin: number, fromMax: number, toMin: number, toMax: number): number =>\n  round(toMin + ((toMax - toMin) * (value - fromMin)) / (fromMax - fromMin));\n\nconst easeInOutCubic = (x: number): number => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);\n\nlet rafId: number | null = null;\n\nconst updateCardTransform = (offsetX: number, offsetY: number, card: HTMLElement, wrap: HTMLElement) => {\n  const width = card.clientWidth;\n  const height = card.clientHeight;\n\n  const percentX = clamp((100 / width) * offsetX);\n  const percentY = clamp((100 / height) * offsetY);\n\n  const centerX = percentX - 50;\n  const centerY = percentY - 50;\n\n  const properties = {\n    '--pointer-x': `${percentX}%`,\n    '--pointer-y': `${percentY}%`,\n    '--background-x': `${adjust(percentX, 0, 100, 35, 65)}%`,\n    '--background-y': `${adjust(percentY, 0, 100, 35, 65)}%`,\n    '--pointer-from-center': `${clamp(Math.hypot(percentY - 50, percentX - 50) / 50, 0, 1)}`,\n    '--pointer-from-top': `${percentY / 100}`,\n    '--pointer-from-left': `${percentX / 100}`,\n    '--rotate-x': `${round(-(centerX / 5))}deg`,\n    '--rotate-y': `${round(centerY / 4)}deg`\n  };\n\n  Object.entries(properties).forEach(([property, value]) => {\n    wrap.style.setProperty(property, value);\n  });\n};\n\nconst createSmoothAnimation = (\n  duration: number,\n  startX: number,\n  startY: number,\n  card: HTMLElement,\n  wrap: HTMLElement\n) => {\n  const startTime = performance.now();\n  const targetX = wrap.clientWidth / 2;\n  const targetY = wrap.clientHeight / 2;\n\n  const animationLoop = (currentTime: number) => {\n    const elapsed = currentTime - startTime;\n    const progress = clamp(elapsed / duration);\n    const easedProgress = easeInOutCubic(progress);\n\n    const currentX = adjust(easedProgress, 0, 1, startX, targetX);\n    const currentY = adjust(easedProgress, 0, 1, startY, targetY);\n\n    updateCardTransform(currentX, currentY, card, wrap);\n\n    if (progress < 1) {\n      rafId = requestAnimationFrame(animationLoop);\n    }\n  };\n\n  rafId = requestAnimationFrame(animationLoop);\n};\n\nconst cancelAnimation = () => {\n  if (rafId) {\n    cancelAnimationFrame(rafId);\n    rafId = null;\n  }\n};\n\nconst handlePointerMove = (event: PointerEvent) => {\n  const card = cardRef.value;\n  const wrap = wrapRef.value;\n\n  if (!card || !wrap || !props.enableTilt) return;\n\n  const rect = card.getBoundingClientRect();\n  updateCardTransform(event.clientX - rect.left, event.clientY - rect.top, card, wrap);\n};\n\nconst handlePointerEnter = () => {\n  const card = cardRef.value;\n  const wrap = wrapRef.value;\n\n  if (!card || !wrap || !props.enableTilt) return;\n\n  cancelAnimation();\n  wrap.classList.add('active');\n  card.classList.add('active');\n};\n\nconst handlePointerLeave = (event: PointerEvent) => {\n  const card = cardRef.value;\n  const wrap = wrapRef.value;\n\n  if (!card || !wrap || !props.enableTilt) return;\n\n  createSmoothAnimation(ANIMATION_CONFIG.SMOOTH_DURATION, event.offsetX, event.offsetY, card, wrap);\n  wrap.classList.remove('active');\n  card.classList.remove('active');\n};\n\nconst cardStyle = computed(() => ({\n  '--icon': props.iconUrl ? `url(${props.iconUrl})` : 'none',\n  '--grain': props.grainUrl ? `url(${props.grainUrl})` : 'none',\n  '--behind-gradient': props.showBehindGradient ? (props.behindGradient ?? DEFAULT_BEHIND_GRADIENT) : 'none',\n  '--inner-gradient': props.innerGradient ?? DEFAULT_INNER_GRADIENT\n}));\n\nconst handleContactClick = () => {\n  emit('contactClick');\n};\n\nconst handleAvatarError = (event: Event) => {\n  const target = event.target as HTMLImageElement;\n  target.style.display = 'none';\n};\n\nconst handleMiniAvatarError = (event: Event) => {\n  const target = event.target as HTMLImageElement;\n  target.style.opacity = '0.5';\n  target.src = props.avatarUrl;\n};\n\nonMounted(() => {\n  if (!props.enableTilt) return;\n\n  const card = cardRef.value;\n  const wrap = wrapRef.value;\n\n  if (!card || !wrap) return;\n\n  card.addEventListener('pointerenter', handlePointerEnter);\n  card.addEventListener('pointermove', handlePointerMove);\n  card.addEventListener('pointerleave', handlePointerLeave);\n\n  const initialX = wrap.clientWidth - ANIMATION_CONFIG.INITIAL_X_OFFSET;\n  const initialY = ANIMATION_CONFIG.INITIAL_Y_OFFSET;\n\n  updateCardTransform(initialX, initialY, card, wrap);\n  createSmoothAnimation(ANIMATION_CONFIG.INITIAL_DURATION, initialX, initialY, card, wrap);\n});\n\nonUnmounted(() => {\n  const card = cardRef.value;\n\n  if (card) {\n    card.removeEventListener('pointerenter', handlePointerEnter);\n    card.removeEventListener('pointermove', handlePointerMove);\n    card.removeEventListener('pointerleave', handlePointerLeave);\n  }\n\n  cancelAnimation();\n});\n</script>\n\n<style scoped>\n.pc-card-wrapper {\n  --pointer-x: 50%;\n  --pointer-y: 50%;\n  --pointer-from-center: 0;\n  --pointer-from-top: 0.5;\n  --pointer-from-left: 0.5;\n  --card-opacity: 0;\n  --rotate-x: 0deg;\n  --rotate-y: 0deg;\n  --background-x: 50%;\n  --background-y: 50%;\n  --grain: none;\n  --icon: none;\n  --behind-gradient: none;\n  --inner-gradient: none;\n  --sunpillar-1: hsl(2, 100%, 73%);\n  --sunpillar-2: hsl(53, 100%, 69%);\n  --sunpillar-3: hsl(93, 100%, 69%);\n  --sunpillar-4: hsl(176, 100%, 76%);\n  --sunpillar-5: hsl(228, 100%, 74%);\n  --sunpillar-6: hsl(283, 100%, 73%);\n  --sunpillar-clr-1: var(--sunpillar-1);\n  --sunpillar-clr-2: var(--sunpillar-2);\n  --sunpillar-clr-3: var(--sunpillar-3);\n  --sunpillar-clr-4: var(--sunpillar-4);\n  --sunpillar-clr-5: var(--sunpillar-5);\n  --sunpillar-clr-6: var(--sunpillar-6);\n  --card-radius: 30px;\n}\n\n.pc-card-wrapper {\n  perspective: 500px;\n  transform: translate3d(0, 0, 0.1px);\n  position: relative;\n  touch-action: none;\n}\n\n.pc-card-wrapper::before {\n  content: '';\n  position: absolute;\n  inset: -10px;\n  background: inherit;\n  background-position: inherit;\n  border-radius: inherit;\n  transition: all 0.5s ease;\n  filter: contrast(2) saturate(2) blur(36px);\n  transform: scale(0.8) translate3d(0, 0, 0.1px);\n  background-size: 100% 100%;\n  background-image: var(--behind-gradient);\n}\n\n.pc-card-wrapper:hover,\n.pc-card-wrapper.active {\n  --card-opacity: 1;\n}\n\n.pc-card-wrapper:hover::before,\n.pc-card-wrapper.active::before {\n  filter: contrast(1) saturate(2) blur(40px) opacity(1);\n  transform: scale(0.9) translate3d(0, 0, 0.1px);\n}\n\n.pc-card {\n  height: 80svh;\n  max-height: 540px;\n  display: grid;\n  aspect-ratio: 0.718;\n  border-radius: var(--card-radius);\n  position: relative;\n  background-blend-mode: color-dodge, normal, normal, normal;\n  animation: glow-bg 12s linear infinite;\n  box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px)\n    calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;\n  transition: transform 1s ease;\n  transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg);\n  background-size: 100% 100%;\n  background-position:\n    0 0,\n    0 0,\n    50% 50%,\n    0 0;\n  background-image:\n    radial-gradient(\n      farthest-side circle at var(--pointer-x) var(--pointer-y),\n      hsla(266, 100%, 90%, var(--card-opacity)) 4%,\n      hsla(266, 50%, 80%, calc(var(--card-opacity) * 0.75)) 10%,\n      hsla(266, 25%, 70%, calc(var(--card-opacity) * 0.5)) 50%,\n      hsla(266, 0%, 60%, 0) 100%\n    ),\n    radial-gradient(35% 52% at 55% 20%, #00ffaac4 0%, #073aff00 100%),\n    radial-gradient(100% 100% at 50% 50%, #00c1ffff 1%, #073aff00 76%),\n    conic-gradient(from 124deg at 50% 50%, #c137ffff 0%, #07c6ffff 40%, #07c6ffff 60%, #c137ffff 100%);\n  overflow: hidden;\n}\n\n.pc-card:hover,\n.pc-card.active {\n  transition: none;\n  transform: translate3d(0, 0, 0.1px) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));\n}\n\n.pc-card * {\n  display: grid;\n  grid-area: 1/-1;\n  border-radius: var(--card-radius);\n  transform: translate3d(0, 0, 0.1px);\n  pointer-events: none;\n}\n\n.pc-inside {\n  inset: 1px;\n  position: absolute;\n  background-image: var(--inner-gradient);\n  background-color: rgba(0, 0, 0, 0.9);\n  transform: translate3d(0, 0, 0.01px);\n}\n\n.pc-shine {\n  mask-image: var(--icon);\n  mask-mode: luminance;\n  mask-repeat: repeat;\n  mask-size: 150%;\n  mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));\n  -webkit-mask-image: var(--icon);\n  -webkit-mask-mode: luminance;\n  -webkit-mask-repeat: repeat;\n  -webkit-mask-size: 150%;\n  -webkit-mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));\n  transition: filter 0.6s ease;\n  filter: brightness(0.66) contrast(1.33) saturate(0.33) opacity(0.5);\n  animation: holo-bg 18s linear infinite;\n  mix-blend-mode: color-dodge;\n}\n\n.pc-shine,\n.pc-shine::after {\n  --space: 5%;\n  --angle: -45deg;\n  transform: translate3d(0, 0, 1px);\n  overflow: hidden;\n  z-index: 3;\n  background: transparent;\n  background-size: cover;\n  background-position: center;\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--sunpillar-clr-1) calc(var(--space) * 1),\n      var(--sunpillar-clr-2) calc(var(--space) * 2),\n      var(--sunpillar-clr-3) calc(var(--space) * 3),\n      var(--sunpillar-clr-4) calc(var(--space) * 4),\n      var(--sunpillar-clr-5) calc(var(--space) * 5),\n      var(--sunpillar-clr-6) calc(var(--space) * 6),\n      var(--sunpillar-clr-1) calc(var(--space) * 7)\n    ),\n    repeating-linear-gradient(\n      var(--angle),\n      #0e152e 0%,\n      hsl(180, 10%, 60%) 3.8%,\n      hsl(180, 29%, 66%) 4.5%,\n      hsl(180, 10%, 60%) 5.2%,\n      #0e152e 10%,\n      #0e152e 12%\n    ),\n    radial-gradient(\n      farthest-corner circle at var(--pointer-x) var(--pointer-y),\n      hsla(0, 0%, 0%, 0.1) 12%,\n      hsla(0, 0%, 0%, 0.15) 20%,\n      hsla(0, 0%, 0%, 0.25) 120%\n    );\n  background-position:\n    0 var(--background-y),\n    var(--background-x) var(--background-y),\n    center;\n  background-blend-mode: color, hard-light;\n  background-size:\n    500% 500%,\n    300% 300%,\n    200% 200%;\n  background-repeat: repeat;\n}\n\n.pc-shine::before,\n.pc-shine::after {\n  content: '';\n  background-position: center;\n  background-size: cover;\n  grid-area: 1/1;\n  opacity: 0;\n}\n\n.pc-card:hover .pc-shine,\n.pc-card.active .pc-shine {\n  filter: brightness(0.85) contrast(1.5) saturate(0.5);\n  animation: none;\n}\n\n.pc-card:hover .pc-shine::before,\n.pc-card.active .pc-shine::before,\n.pc-card:hover .pc-shine::after,\n.pc-card.active .pc-shine::after {\n  opacity: 1;\n}\n\n.pc-shine::before {\n  background-image:\n    linear-gradient(\n      45deg,\n      var(--sunpillar-4),\n      var(--sunpillar-5),\n      var(--sunpillar-6),\n      var(--sunpillar-1),\n      var(--sunpillar-2),\n      var(--sunpillar-3)\n    ),\n    radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%),\n    var(--grain);\n  background-size:\n    250% 250%,\n    100% 100%,\n    220px 220px;\n  background-position:\n    var(--pointer-x) var(--pointer-y),\n    center,\n    calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);\n  background-blend-mode: color-dodge;\n  filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2))\n    saturate(calc(0.5 + var(--pointer-from-center)));\n  mix-blend-mode: luminosity;\n}\n\n.pc-shine::after {\n  content: '';\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--sunpillar-clr-1) calc(5% * 1),\n      var(--sunpillar-clr-2) calc(5% * 2),\n      var(--sunpillar-clr-3) calc(5% * 3),\n      var(--sunpillar-clr-4) calc(5% * 4),\n      var(--sunpillar-clr-5) calc(5% * 5),\n      var(--sunpillar-clr-6) calc(5% * 6),\n      var(--sunpillar-clr-1) calc(5% * 7)\n    ),\n    repeating-linear-gradient(\n      -45deg,\n      #0e152e 0%,\n      hsl(180, 10%, 60%) 3.8%,\n      hsl(180, 29%, 66%) 4.5%,\n      hsl(180, 10%, 60%) 5.2%,\n      #0e152e 10%,\n      #0e152e 12%\n    ),\n    radial-gradient(\n      farthest-corner circle at var(--pointer-x) var(--pointer-y),\n      hsla(0, 0%, 0%, 0.1) 12%,\n      hsla(0, 0%, 0%, 0.15) 20%,\n      hsla(0, 0%, 0%, 0.25) 120%\n    );\n  background-position:\n    0 var(--background-y),\n    calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5),\n    center;\n  background-size:\n    200% 300%,\n    700% 700%,\n    100% 100%;\n  mix-blend-mode: difference;\n  filter: brightness(0.8) contrast(1.5);\n}\n\n.pc-glare {\n  transform: translate3d(0, 0, 1.1px);\n  overflow: hidden;\n  background-image: radial-gradient(\n    farthest-corner circle at var(--pointer-x) var(--pointer-y),\n    hsl(248, 25%, 80%) 12%,\n    hsla(207, 40%, 30%, 0.8) 90%\n  );\n  mix-blend-mode: overlay;\n  filter: brightness(0.8) contrast(1.2);\n  z-index: 4;\n}\n\n.pc-avatar-content {\n  mix-blend-mode: screen;\n  overflow: hidden;\n}\n\n.pc-avatar-content .avatar {\n  width: 100%;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%) scale(1);\n  bottom: 2px;\n  opacity: calc(1.75 - var(--pointer-from-center));\n}\n\n.pc-avatar-content::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  backdrop-filter: blur(30px);\n  mask: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0) 0%,\n    rgba(0, 0, 0, 0) 60%,\n    rgba(0, 0, 0, 1) 90%,\n    rgba(0, 0, 0, 1) 100%\n  );\n  pointer-events: none;\n}\n\n.pc-user-info {\n  position: absolute;\n  bottom: 20px;\n  left: 20px;\n  right: 20px;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(30px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 15px;\n  padding: 12px 14px;\n  pointer-events: auto;\n}\n\n.pc-user-details {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.pc-mini-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  overflow: hidden;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  flex-shrink: 0;\n}\n\n.pc-mini-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.pc-user-text {\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.pc-handle {\n  font-size: 14px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.9);\n  line-height: 1;\n}\n\n.pc-status {\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.7);\n  line-height: 1;\n}\n\n.pc-contact-btn {\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: 14px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  backdrop-filter: blur(10px);\n  background: transparent;\n}\n\n.pc-contact-btn:hover {\n  border-color: rgba(255, 255, 255, 0.4);\n  transform: translateY(-1px);\n  transition: all 0.2s ease;\n}\n\n.pc-content {\n  max-height: 100%;\n  overflow: hidden;\n  text-align: center;\n  position: relative;\n  transform: translate3d(\n    calc(var(--pointer-from-left) * -6px + 3px),\n    calc(var(--pointer-from-top) * -6px + 3px),\n    0.1px\n  ) !important;\n  z-index: 5;\n  mix-blend-mode: luminosity;\n}\n\n.pc-details {\n  width: 100%;\n  position: absolute;\n  top: 3em;\n  display: flex;\n  flex-direction: column;\n}\n\n.pc-details h3 {\n  font-weight: 600;\n  margin: 0;\n  font-size: min(5svh, 3em);\n  margin: 0;\n  background-image: linear-gradient(to bottom, #fff, #6f6fbe);\n  background-size: 1em 1.5em;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  -webkit-background-clip: text;\n}\n\n.pc-details p {\n  font-weight: 600;\n  position: relative;\n  top: -12px;\n  white-space: nowrap;\n  font-size: 16px;\n  margin: 0 auto;\n  width: min-content;\n  background-image: linear-gradient(to bottom, #fff, #4a4ac0);\n  background-size: 1em 1.5em;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  -webkit-background-clip: text;\n}\n\n@keyframes glow-bg {\n  0% {\n    --bgrotate: 0deg;\n  }\n\n  100% {\n    --bgrotate: 360deg;\n  }\n}\n\n@keyframes holo-bg {\n  0% {\n    background-position:\n      0 var(--background-y),\n      0 0,\n      center;\n  }\n\n  100% {\n    background-position:\n      0 var(--background-y),\n      90% 90%,\n      center;\n  }\n}\n\n@media (max-width: 768px) {\n  .pc-card {\n    height: 70svh;\n    max-height: 450px;\n  }\n\n  .pc-details {\n    top: 2em;\n  }\n\n  .pc-details h3 {\n    font-size: min(4svh, 2.5em);\n  }\n\n  .pc-details p {\n    font-size: 14px;\n  }\n\n  .pc-user-info {\n    bottom: 15px;\n    left: 15px;\n    right: 15px;\n    padding: 10px 12px;\n  }\n\n  .pc-mini-avatar {\n    width: 28px;\n    height: 28px;\n  }\n\n  .pc-user-details {\n    gap: 10px;\n  }\n\n  .pc-handle {\n    font-size: 13px;\n  }\n\n  .pc-status {\n    font-size: 10px;\n  }\n\n  .pc-contact-btn {\n    padding: 6px 12px;\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .pc-card {\n    height: 60svh;\n    max-height: 380px;\n  }\n\n  .pc-details {\n    top: 1.5em;\n  }\n\n  .pc-details h3 {\n    font-size: min(3.5svh, 2em);\n  }\n\n  .pc-details p {\n    font-size: 12px;\n    top: -8px;\n  }\n\n  .pc-user-info {\n    bottom: 12px;\n    left: 12px;\n    right: 12px;\n    padding: 8px 10px;\n    border-radius: 50px;\n  }\n\n  .pc-mini-avatar {\n    width: 24px;\n    height: 24px;\n  }\n\n  .pc-user-details {\n    gap: 8px;\n  }\n\n  .pc-handle {\n    font-size: 12px;\n  }\n\n  .pc-status {\n    font-size: 9px;\n  }\n\n  .pc-contact-btn {\n    padding: 5px 10px;\n    font-size: 10px;\n    border-radius: 50px;\n  }\n}\n\n@media (max-width: 320px) {\n  .pc-card {\n    height: 55svh;\n    max-height: 320px;\n  }\n\n  .pc-details h3 {\n    font-size: min(3svh, 1.5em);\n  }\n\n  .pc-details p {\n    font-size: 11px;\n  }\n\n  .pc-user-info {\n    padding: 6px 8px;\n    border-radius: 50px;\n  }\n\n  .pc-mini-avatar {\n    width: 20px;\n    height: 20px;\n  }\n\n  .pc-user-details {\n    gap: 6px;\n  }\n\n  .pc-handle {\n    font-size: 11px;\n  }\n\n  .pc-status {\n    font-size: 8px;\n  }\n\n  .pc-contact-btn {\n    padding: 4px 8px;\n    font-size: 9px;\n    border-radius: 50px;\n  }\n}\n</style>\n","path":"ProfileCard/ProfileCard.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Components"]}