@font-face { font-family:'PIMP Wordmark'; src:url('/fonts/pimp-wordmark.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
/* PIMP: monochrome motion, a crisp supplied mark, and restrained light. */
.pimp-brand-mark{position:relative;display:inline-block;overflow:hidden;vertical-align:middle;flex-shrink:0;background:transparent;isolation:isolate}
.pimp-brand-mark>img{position:absolute;width:180%!important;height:180%!important;max-width:none;left:-40%;top:-40%;object-fit:contain;pointer-events:none}
a[aria-label="PIMP home"] .pimp-brand-mark{border-radius:9px}
a[aria-label="PIMP home"]{transition:filter .3s,transform .3s}
a[aria-label="PIMP home"]:hover{filter:drop-shadow(0 0 9px #ffffff66);transform:translateY(-1px)}
.pimp-reveal{opacity:0;translate:0 18px;transition:opacity .7s ease var(--reveal-delay,0ms),translate .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.pimp-reveal.pimp-in-view{opacity:1;translate:0 0}
main a.rounded-2xl{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .35s,background-color .3s}
main a.rounded-2xl:hover{transform:translateY(-4px);box-shadow:0 16px 36px #0005,0 0 0 1px #ffffff0b;border-color:#ffffff40}
main a.rounded-2xl img{transition:scale .6s cubic-bezier(.16,1,.3,1)}
main a.rounded-2xl:hover img{scale:1.045}
nav a{transition:background .25s,color .25s,transform .3s!important}
nav a:hover{transform:translateY(-2px)}
button{transition:background-color .25s,color .25s,box-shadow .25s,transform .2s}
button:active:not(:disabled){transform:scale(.98)}
input,textarea{transition:border-color .25s,box-shadow .25s}
input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px #ffffff10}
.chrome-text{background-size:100% 200%;animation:pimp-chrome 7s ease-in-out infinite}
@keyframes pimp-chrome{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}
.clone-modal[open]{animation:pimp-dialog .25s cubic-bezier(.16,1,.3,1)}
@keyframes pimp-dialog{from{opacity:0;translate:0 12px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.pimp-hero:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--light-x,30%) var(--light-y,20%),#ffffff08,transparent 75%)}
.pimp-doc-lead{font-size:24px!important;letter-spacing:-.03em;color:#e7e7e7!important;margin:-10px 0 40px}
.pimp-replay{display:block;font-size:12px;letter-spacing:.06em;color:#888;padding:6px 0;text-underline-offset:5px}
.pimp-replay:hover{color:white;text-decoration:underline}
.pimp-replay:disabled{display:none}
/* A one-second, non-blocking brand signature. */
.pimp-silver-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;background:#08090bf2;animation:pimp-silver-exit 1.2s ease both}
.pimp-silver-lockup{display:grid;justify-items:center;gap:12px;animation:pimp-silver-arrive .65s cubic-bezier(.16,1,.3,1) both}
.pimp-silver-mark{width:clamp(130px,25vw,220px);aspect-ratio:1;background:linear-gradient(115deg,#6e7580 15%,#f0f2f5 30%,#fff 39%,#7c8593 50%,#e4e8ee 65%,#fff 78%);background-size:300% 100%;mask:url('/brand/pimp-mark.svg') center/180% 180% alpha;-webkit-mask:url('/brand/pimp-mark.svg') center/180% 180%;mask-mode:alpha;animation:pimp-silver-sweep 1.1s cubic-bezier(.22,1,.36,1) both}
.pimp-silver-lockup>span{font-family:"PIMP Wordmark",cursive;font-size:32px;font-weight:400;letter-spacing:-.035em;color:#f0f2f5}
.pimp-silver-lockup>small{font:9px monospace;letter-spacing:.23em;color:#9097a2}
@keyframes pimp-silver-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes pimp-silver-arrive{from{opacity:0;transform:translateY(9px) scale(.96);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes pimp-silver-exit{0%,65%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pimp-reveal{opacity:1!important;translate:none!important}.pimp-silver-intro{display:none!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Shared surface polish: short, interaction-driven motion with no layout shift. */
.pimp-button { position:relative; overflow:hidden; isolation:isolate; transition:background .25s,border-color .25s,box-shadow .3s,transform .2s; }
.pimp-button:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,#ffffff20 50%,transparent 75%); transform:translateX(-140%); transition:transform .6s; }
.pimp-button:hover:after,.pimp-button:focus-visible:after { transform:translateX(140%); }
.pimp-button.primary:hover { box-shadow:0 4px 22px #ffffff12; }
.pimp-button:active { transform:scale(.98); }
.pimp-portrait-link img { transition:scale .65s cubic-bezier(.16,1,.3,1),filter .4s; }
.pimp-creator-card:hover .pimp-portrait-link img { scale:1.035; filter:brightness(1.07); }
.pimp-match:not(:empty),.clone-notice { animation:pimp-feedback-in .25s ease-out; }
.pimp-doc-toc a { transition:color .2s,background .2s; border-radius:5px; }
.pimp-doc-toc a:hover { background:#ffffff06; }
.clone-modal::backdrop { background:#000a; backdrop-filter:blur(5px); }
@keyframes pimp-feedback-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

/* Silver particles resolve into the original PIMP silhouette. */
.pimp-silver-intro{animation:none;transition:opacity .4s ease}
.pimp-particle-stage{position:relative;width:clamp(130px,25vw,220px);aspect-ratio:1}
.pimp-particle-stage .pimp-silver-mark{width:100%;height:100%;opacity:0}
.pimp-particle-fallback .pimp-silver-mark{opacity:1}
.pimp-particle-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.pimp-particles-ready .pimp-silver-mark{opacity:0;animation-delay:1s}
.pimp-particle-leave{opacity:0}
@media(max-width:640px){.pimp-particle-stage{width:145px}}
