/* Porchbird v4 portfolio showcase (#examples) */
.pf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.pf-chip{font:inherit;font-weight:700;font-size:14px;border:1.5px solid var(--blue,#214BDB);color:var(--blue,#214BDB);background:transparent;border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.pf-chip:hover{transform:translateY(-1px)}
.pf-chip.on{background:var(--blue,#214BDB);color:#fff}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.pf-card{display:flex;flex-direction:column;min-width:0}
.pf-card[hidden]{display:none}
.pf-frame{display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(15,26,68,.08),0 18px 40px -18px rgba(15,26,68,.35);border:1px solid rgba(15,26,68,.1);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;text-decoration:none}
.pf-frame:hover,.pf-frame:focus-visible{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 1px 0 rgba(15,26,68,.08),0 30px 60px -22px rgba(33,75,219,.55)}
.pf-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f2f0ea;border-bottom:1px solid rgba(15,26,68,.08)}
.pf-bar i{width:8px;height:8px;border-radius:50%;background:#d9d5ca}
.pf-bar i:first-child{background:#FFD600}
.pf-bar b{margin:0 auto;font:500 11px/1 ui-monospace,Menlo,monospace;color:#6b7086;padding-right:30px}
.pf-window{display:block;height:380px;overflow:hidden;position:relative;background:#eee}
.pf-window img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 1.2s cubic-bezier(.45,.1,.3,1)}
.pf-frame:hover .pf-window img,.pf-frame:focus-visible .pf-window img{transform:translateY(calc(-100% + 380px));transition-duration:var(--pf-scroll,7s)}
.pf-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:16px 2px 4px}
.pf-meta h3{margin:0;font-size:21px;letter-spacing:-.4px}
.pf-ind{margin:2px 0 0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue,#214BDB)}
.pf-open{flex:none;font-weight:700;font-size:14px;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;margin-top:4px}
.pf-line{margin:4px 2px 0;color:#4a4f66;font-size:15px}
.pf-note{margin:30px 0 0;font-size:12.5px;color:#6b7086}
@media (max-width:1100px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .pf-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:0 20px 4px;scrollbar-width:none}
  .pf-chips::-webkit-scrollbar{display:none}
  .pf-chip{flex:none}
  .pf-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 -20px;padding:4px 20px 18px;scrollbar-width:none}
  .pf-grid::-webkit-scrollbar{display:none}
  .pf-card{flex:0 0 82%;scroll-snap-align:center}
  .pf-window{height:300px}
  .pf-window img{animation:pf-peek 9s ease-in-out infinite alternate}
}
@keyframes pf-peek{0%,15%{transform:translateY(0)}85%,100%{transform:translateY(calc(-100% + 300px))}}
@media (prefers-reduced-motion:reduce){.pf-window img{transition:none!important;animation:none!important}.pf-frame:hover .pf-window img{transform:none}}
#examples .example-cta{margin-top:28px}