/* The ID badge, its porch light and its hologram. Shared by every page. */
:root{--light:#ffb020;--light2:#ffd36a}
.bdg{position:relative;display:inline-block;flex:none;vertical-align:middle;background:linear-gradient(155deg,rgba(255,255,255,.24),rgba(255,255,255,0) 42%),var(--bc);box-shadow:0 1px 2px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.08)}
.bdg>.sl{position:absolute;left:50%;transform:translateX(-50%);border-radius:99px;background:rgba(255,255,255,.82);box-shadow:inset 0 1px 1px rgba(0,0,0,.28);transition:background .3s,box-shadow .3s}
.bdg.on>.sl{background:var(--light2);box-shadow:0 0 var(--g) calc(var(--g)*.45) rgba(255,176,32,.95),0 0 calc(var(--g)*3) var(--g) rgba(255,176,32,.38)}
.bdg>.bw{position:absolute;overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:650;letter-spacing:.2px}
.bdg>.bw>svg{width:100%;height:100%;display:block}
.bdg>.bw>img{width:100%;height:100%;object-fit:cover;display:block}
.bdg>.bw>svg.mk{width:72%;height:72%}
.bdg>.bw>svg.mk.ico{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Verified: a security hologram over the photo window's corner, plus a faint
   holographic laminate across the badge. Hovering tilts it, like a real ID. */
@property --ha{syntax:"<angle>";inherits:false;initial-value:20deg}
.bdg>.holo{position:absolute;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 46%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.28) 0 .6px,rgba(255,255,255,0) .6px 1.9px),
    conic-gradient(from var(--ha),#ff9fd6,#ffd36a,#a8f5b8,#7fd8ff,#b8a3ff,#ff9fd6);
  box-shadow:0 0 0 1.2px rgba(255,255,255,.92),0 1px 3px rgba(0,0,0,.35)}
.bdg>.holo svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .5px .6px rgba(20,20,60,.55))}
.bdg.v:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,159,214,.28) 44%,rgba(127,216,255,.28) 52%,rgba(168,245,184,.22) 60%,rgba(255,255,255,0) 72%) 0 0/250% 250%;
  transition:background-position .6s ease}
.bdg.v:hover:after{background-position:100% 100%}
.bdg.v:hover>.holo{animation:holo 2.4s linear infinite}
@keyframes holo{to{--ha:380deg}}
@media (prefers-reduced-motion:reduce){.bdg.v:hover>.holo{animation:none}.bdg.v:after{transition:none}}
.glow{display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%;background:var(--light);box-shadow:0 0 6px 2px rgba(255,176,32,.6);flex:none}
.glow.off{opacity:0}
/* The porch logotype: one SVG sized like text (1 unit = 0.001em). Every
   counter is a window; the p's is lit, and it's the part that changes. */
.logo{display:inline-block;height:.98em;width:auto;vertical-align:-.2em;overflow:visible}
.logo .lk{fill:currentColor}
.logo .lw{fill:var(--light);filter:drop-shadow(0 0 min(.06em,4px) rgba(255,176,32,.95)) drop-shadow(0 0 min(.16em,9px) rgba(255,176,32,.45));transition:filter .4s}
.logo.off .lw{fill:color-mix(in srgb,currentColor 22%,transparent);filter:none}
.logo.live .lw{fill:url(#lwhot);animation:lwlive 1.8s ease-in-out infinite}
@keyframes lwlive{0%,100%{filter:drop-shadow(0 0 min(.06em,4px) rgba(255,176,32,.95)) drop-shadow(0 0 min(.16em,9px) rgba(255,176,32,.45))}
  50%{filter:drop-shadow(0 0 min(.1em,6px) rgba(255,190,60,1)) drop-shadow(0 0 min(.34em,18px) rgba(255,176,32,.75))}}
.logo.verified .lw{fill:url(#lwholo);filter:drop-shadow(0 0 min(.05em,3px) rgba(190,170,255,.85)) drop-shadow(0 0 min(.14em,8px) rgba(127,216,255,.35))}
.logo .lshine{fill:url(#lwshine);pointer-events:none}
.logo.money .lw{fill:url(#lwmoney) #2fc46b;filter:drop-shadow(0 0 min(.06em,4px) rgba(47,196,107,.9)) drop-shadow(0 0 min(.16em,9px) rgba(47,196,107,.4))}
.logo .lglint{fill:url(#lwglint);pointer-events:none;mix-blend-mode:soft-light}
.logo .lm{fill:currentColor;fill-opacity:.46}
.logo.lockup{height:.98em}
@media (prefers-reduced-motion:reduce){.logo.live .lw{animation:none}}