.pf-badge{perspective:600px}.pf-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,1,.36,1)}.pf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.pf-back{transform:rotateY(180deg);color:hsl(var(--ocean-hl));background:hsl(var(--ocean-deep));box-shadow:0 6px 14px -8px hsl(var(--ocean-deep)/.8)}@media (hover:hover){.pf-card:hover .pf-flip{transform:rotateY(180deg)}}.pf-glow{position:relative;isolation:isolate;overflow:hidden}.pf-glow:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),hsl(var(--primary)/.12),transparent 65%)}@media (hover:hover){.pf-glow:hover:before{opacity:1}}.pf-tilt{transition:transform .2s ease-out,box-shadow .3s ease,border-color .3s ease}@media (hover:hover){.pf-tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);border-color:hsl(var(--primary)/.35);box-shadow:0 2px 4px hsl(var(--ocean-ink)/.05),0 28px 50px -30px hsl(var(--primary)/.5)}}@media (prefers-reduced-motion:reduce){.pf-flip,.pf-tilt{transition:none}.pf-tilt:hover{transform:none}}