/* ========================================
   COMMUNITY PAGE
   ======================================== */

/* ── Hero ── */
.cmty-hero{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:5rem 1.5rem 0}
.cmty-hero__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(237,238,236,0.04) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.cmty-hero__content{position:relative;z-index:10;text-align:center;max-width:600px}
.cmty-hero__title{font-family:var(--font-display);font-size:clamp(2.8rem,7vw,4.5rem);font-weight:900;line-height:.95;color:var(--ink);letter-spacing:-.03em;margin-bottom:.5rem}
.cmty-hero__stats{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.95rem;font-weight:600;color:var(--ink-dim)}
.cmty-hero__stats strong{color:var(--teal);font-family:var(--font-mono);font-weight:700}
.cmty-hero__stat-sep{color:var(--line)}

/* ── Scene ── */
.cmty-scene{position:relative;z-index:1;width:100%;height:200px;margin-top:1rem;overflow:visible}
.cmty-scene__ground{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line);opacity:.5}
.cmty-scene__inner{position:absolute;bottom:1px;left:0;right:0;height:100%}
.cmty-char{position:absolute;bottom:0}
.cmty-char svg{display:block}

/* ── Animations ── */
@keyframes cmty-bob{0%{transform:translateY(0) scaleY(1)}15%{transform:translateY(1px) scaleY(.97)}50%{transform:translateY(-5px) scaleY(1.03)}85%{transform:translateY(1px) scaleY(.97)}100%{transform:translateY(0) scaleY(1)}}
@keyframes cmty-bob2{0%{transform:translateY(0) scaleY(1)}20%{transform:translateY(1px) scaleY(.97)}50%{transform:translateY(-3px) scaleY(1.03)}80%{transform:translateY(1px) scaleY(.98)}100%{transform:translateY(0) scaleY(1)}}
@keyframes cmty-peek{0%{transform:translateY(0) scaleY(1)}10%{transform:translateY(2px) scaleY(.95)}35%{transform:translateY(-9px) scaleY(1.05)}45%{transform:translateY(-7px) scaleY(1)}65%{transform:translateY(-7px) scaleY(1)}80%{transform:translateY(1px) scaleY(.97)}100%{transform:translateY(0) scaleY(1)}}
@keyframes cmty-hammer{0%,65%{transform:rotate(0)}70%{transform:rotate(8deg)}78%{transform:rotate(-28deg)}83%{transform:rotate(6deg)}88%{transform:rotate(-3deg)}95%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@keyframes cmty-sway{0%{transform:rotate(-2deg)}40%{transform:rotate(2.5deg)}100%{transform:rotate(-2deg)}}
@keyframes cmty-roll{0%{transform:translateX(-120px) rotate(-40deg)}30%{transform:translateX(25vw) rotate(-5deg)}70%{transform:translateX(70vw) rotate(5deg)}100%{transform:translateX(calc(100vw + 40px)) rotate(40deg)}}
@keyframes cmty-roll-head{0%{transform:rotate(15deg)}30%{transform:rotate(2deg)}70%{transform:rotate(-2deg)}100%{transform:rotate(-15deg)}}
@keyframes cmty-spark-fly{0%{opacity:1;transform:translate(0,0)}60%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes cmty-chat-bubble{0%{opacity:0;transform:translateY(4px) scale(.5)}8%{opacity:1;transform:translateY(-2px) scale(1.12)}14%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(0) scale(1.05)}100%{opacity:0;transform:translateY(-3px) scale(.7)}}

.cmty-anim-bob{animation:cmty-bob 2.8s cubic-bezier(.4,0,.2,1) infinite}
.cmty-anim-bob2{animation:cmty-bob2 3.5s cubic-bezier(.4,0,.2,1) infinite}
.cmty-anim-peek{animation:cmty-peek 4.5s cubic-bezier(.4,0,.15,1) infinite}
.cmty-anim-sway{animation:cmty-sway 3.5s cubic-bezier(.4,0,.3,1) infinite}

.cmty-roller{position:absolute;bottom:1px;left:0;animation:cmty-roll 3.5s cubic-bezier(.2,0,.8,1) infinite;z-index:5;transform-origin:center bottom}
.cmty-roller .cmty-char__head{animation:cmty-roll-head 3.5s cubic-bezier(.2,0,.8,1) infinite;transform-origin:center bottom}

.cmty-bubble{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--bg-2);border:1px solid var(--line);border-radius:8px 8px 8px 2px;padding:4px 10px;white-space:nowrap;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-dim);animation:cmty-chat-bubble 4s ease-in-out infinite;pointer-events:none;z-index:10}
.cmty-bubble--right{border-radius:8px 8px 2px 8px}
.cmty-bubble--d1{animation-delay:0s;top:-28px}
.cmty-bubble--d2{animation-delay:2s;top:-46px}

.cmty-sparks{position:absolute;pointer-events:none}
.cmty-spark{position:absolute;width:1.5px;height:5px;border-radius:1px;opacity:0}

/* ── Filters ── */
.cmty-filters{position:sticky;top:0;z-index:30;background:var(--bg-0);border-bottom:1px solid var(--line);padding:.75rem 0}
.cmty-filters__inner{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cmty-filters__search{flex:1;min-width:180px;max-width:280px;padding:.45em .75em;font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;transition:border-color 150ms}
.cmty-filters__search:focus{border-color:rgba(69,216,197,0.4);outline:none}
.cmty-filters__search::placeholder{color:var(--ink-faint)}
.cmty-filters__select{padding:.45em .6em;font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--ink-dim);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:border-color 150ms}
.cmty-filters__select:focus{border-color:rgba(69,216,197,0.4);outline:none}
.cmty-filters__sort{margin-left:auto}

/* ── Grid ── */
.cmty-grid{max-width:1200px;margin:0 auto;padding:2rem clamp(1rem,3vw,2rem) 4rem}
.cmty-grid__inner{display:flex;flex-direction:column;gap:0}
.cmty-grid__loading{grid-column:1/-1;text-align:center;padding:3rem 0}
.cmty-grid__spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:cmty-spin .6s linear infinite}
@keyframes cmty-spin{to{transform:rotate(360deg)}}

/* ── Card ── */
.cmty-card{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background 150ms;cursor:pointer}
.cmty-card:hover{background:var(--bg-1)}
.cmty-card--private{opacity:.45;cursor:default}
.cmty-card--private:hover{background:transparent}
.cmty-card__avatar{width:40px;height:40px;flex-shrink:0}
.cmty-card__avatar svg{width:40px;height:40px}
.cmty-card__name{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.2;min-width:140px}
.cmty-card__company{font-size:.85rem;font-weight:500;color:var(--ink-dim);min-width:120px}
.cmty-card__role{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmty-card__badges{display:flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.65rem;font-weight:600;color:var(--teal);flex-shrink:0}
.cmty-card__badges svg{width:12px;height:12px}
.cmty-card__joined{font-family:var(--font-mono);font-size:.65rem;color:var(--ink-faint);margin-left:auto;flex-shrink:0;white-space:nowrap}

/* ── Empty state ── */
.cmty-grid__empty{text-align:center;padding:3rem 1rem;color:var(--ink-faint)}
.cmty-grid__empty-robot{display:inline-block;opacity:.3;margin-bottom:1rem}
.cmty-grid__empty-robot svg{width:80px;height:80px}
.cmty-grid__empty p{font-family:var(--font-body);font-size:1.1rem;font-weight:600;margin-bottom:.75rem}
.cmty-grid__empty-clear{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--teal);background:none;border:1px solid rgba(69,216,197,0.3);border-radius:6px;padding:.4em 1em;cursor:pointer;transition:background 150ms}
.cmty-grid__empty-clear:hover{background:rgba(69,216,197,0.08)}
.cmty-grid__sentinel{height:1px}

/* ── Responsive ── */
@media(max-width:768px){
  .cmty-hero{padding-top:4rem}
  .cmty-scene{height:140px}
  .cmty-char{scale:0.65;transform-origin:bottom center}
  .cmty-hero__title{font-size:2rem}
  .cmty-hero__stats{font-size:.8rem;gap:.5rem}
  .cmty-filters__inner{flex-direction:column;align-items:stretch}
  .cmty-filters__search{max-width:none}
  .cmty-filters__sort{margin-left:0}
  .cmty-card{gap:.6rem;padding:.6rem .75rem}
  .cmty-card__name{min-width:auto;font-size:.9rem}
  .cmty-card__company{min-width:auto;font-size:.78rem}
  .cmty-card__role{display:none}
  .cmty-card__joined{font-size:.6rem}
  .cmty-card__avatar,.cmty-card__avatar svg{width:32px;height:32px}
  .cmty-bubble{font-size:.55rem;padding:3px 6px}
  .cmty-roller{display:none}
}

@media(max-width:400px){
  .cmty-char{scale:0.5;transform-origin:bottom center}
  .cmty-scene{height:110px}
  .cmty-card__company{display:none}
  .cmty-card__badges{display:none}
}