/* ===== Living Professional Portfolio (hero) ===== */
.pf-stage { position: relative; width: 100%; max-width: 460px; height: 500px; margin: 0 auto; }
@media (min-width: 1024px) { .pf-stage { max-width: 500px; height: 640px; margin-right: 0; } }

.pf-glow { position: absolute; left: 50%; top: 50%; width: 390px; height: 390px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(140,60,221,.35) 0%, rgba(140,60,221,0) 65%); filter: blur(10px); z-index: 0; pointer-events: none; }
.pf-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(168,85,247,.18); transform: translate(-50%,-50%); z-index: 0; pointer-events: none; }
.pf-ring-1 { width: 345px; height: 345px; animation: pf-ring-pulse 4s ease-in-out infinite; }
.pf-ring-2 { width: 495px; height: 495px; animation: pf-ring-pulse 4s ease-in-out infinite 1s; }
@keyframes pf-ring-pulse { 0%,100% { opacity:.22; transform: translate(-50%,-50%) scale(.96); } 50% { opacity:.5; transform: translate(-50%,-50%) scale(1.04); } }

.pf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.pf-line { stroke: #c084fc; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-dasharray: 5 7; filter: drop-shadow(0 0 4px rgba(168,85,247,.9)); animation: pf-line-anim 2.2s ease forwards; }
@keyframes pf-line-anim { 0% { opacity:0; stroke-dashoffset:0; } 12% { opacity:.9; } 75% { opacity:.9; } 100% { opacity:0; stroke-dashoffset:-48; } }

.pf-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(368px, 92%); padding: 1.3rem 1.35rem; border-radius: 22px; background: linear-gradient(160deg, rgba(30,24,48,.82), rgba(17,14,28,.9)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(168,85,247,.3); box-shadow: 0 24px 60px -20px rgba(88,28,135,.6), 0 0 0 1px rgba(255,255,255,.04) inset; z-index: 3; color: #f4f2fb; transition: box-shadow .5s ease; }
.pf-core--pulse { box-shadow: 0 24px 70px -16px rgba(168,85,247,.7), 0 0 0 1px rgba(192,132,252,.5) inset; }
.pf-core-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.pf-avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #8c3cdd, #c026d3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; color: #fff; box-shadow: 0 4px 14px -2px rgba(140,60,221,.6); }
.pf-id { flex: 1; min-width: 0; }
.pf-name { display: flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .92rem; color: #fff; }
.pf-name .pf-verified { width: 15px; height: 15px; color: #c084fc; flex: 0 0 auto; }
.pf-role { font-size: .7rem; color: rgba(226,222,240,.6); margin-top: 1px; }
.pf-active { font-size: .6rem; font-weight: 600; color: #6ee7b7; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); padding: .15rem .45rem; border-radius: 999px; flex: 0 0 auto; }
.pf-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin-bottom: .85rem; }
.pf-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .25rem; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.pf-num { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1; display: inline-block; }
.pf-lbl { font-size: .56rem; letter-spacing: .03em; text-transform: uppercase; color: rgba(226,222,240,.55); }
.pf-bump { animation: pf-bump .5s ease; }
@keyframes pf-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: #c084fc; } 100% { transform: scale(1); } }
.pf-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: .8rem; }
.pf-bar span { display: block; height: 100%; width: 62%; border-radius: 999px; background: linear-gradient(90deg, #8c3cdd, #c084fc); transition: width 1s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 12px rgba(168,85,247,.6); }
.pf-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.pf-tags span { font-size: .6rem; font-weight: 500; color: #d8cff0; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.25); padding: .2rem .5rem; border-radius: 999px; }

.pf-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) translate(var(--dx,0px), var(--dy,0px)) scale(var(--s,1)); display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 12px; background: rgba(20,16,34,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(168,85,247,.28); box-shadow: 0 8px 24px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset; color: #e9e4f5; font-size: .72rem; font-weight: 500; white-space: nowrap; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease; z-index: 4; pointer-events: none; }
.pf-card-ic { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 7px; background: rgba(168,85,247,.16); flex: 0 0 auto; }
.pf-card-ic svg { width: 14px; height: 14px; color: #c084fc; }

.pf-pop-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 6; }
.pf-pop { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); white-space: nowrap; font-size: .66rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #8c3cdd, #c026d3); padding: .28rem .6rem; border-radius: 999px; box-shadow: 0 8px 22px -6px rgba(140,60,221,.8); animation: pf-pop-anim 1.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pf-pop-anim { 0% { opacity:0; transform: translateX(-50%) translateY(14px) scale(.8); } 20% { opacity:1; transform: translateX(-50%) translateY(0) scale(1); } 75% { opacity:1; transform: translateX(-50%) translateY(-6px) scale(1); } 100% { opacity:0; transform: translateX(-50%) translateY(-26px) scale(.95); } }

@media (prefers-reduced-motion: reduce) {
	.pf-ring, .pf-line, .pf-pop, .pf-bump { animation: none !important; }
}