/* ════════════════════════════════════════════════════════════════════════
   VOLURR Community — PRO theme layer  ·  depth · gloss · glow · motion
   STYLE ONLY. Ports the "VOLURR Pro" reference treatment onto the LIVE
   community home elements (.cmkpi / .cmgate / .cmgate-agi / .cmside-card / …).
   No markup, text, numbers or data are touched — purely presentational.
   Loads AFTER community.css (whose old "flat institutional" depth-killers
   were lifted for the cards/buttons/hover). Everything is scoped to #v-copy
   so it can never leak into other views. Brand red follows the token --gold.
   ════════════════════════════════════════════════════════════════════════ */

#v-copy{
  /* elevation recipes (reference --v-elev-*); deep glow tracks the brand red */
  --cmp-elev:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 3px 7px rgba(0,0,0,.34),
    0 20px 38px -16px rgba(0,0,0,.5),
    0 40px 80px -36px color-mix(in srgb, var(--gold) 36%, transparent);
  --cmp-elev-hover:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 3px 9px rgba(0,0,0,.46),
    0 34px 60px -18px rgba(0,0,0,.58),
    0 52px 100px -40px color-mix(in srgb, var(--gold) 46%, transparent),
    0 0 60px -10px color-mix(in srgb, var(--gold) 26%, transparent);
  --cmp-elev-btn:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 -3px 7px rgba(60,0,4,.4) inset,
    0 12px 24px -8px color-mix(in srgb, var(--gold) 55%, transparent),
    0 3px 8px rgba(0,0,0,.4);
  --cmp-elev-tile:
    0 1px 0 rgba(255,255,255,.26) inset,
    0 -2px 5px rgba(70,0,4,.36) inset,
    0 9px 18px -6px color-mix(in srgb, var(--gold) 50%, transparent);
}

/* ── ambient field behind the content (subtle aurora; ::after — the ::before
      slot is disabled by community.css) ── */
#v-copy .cmwrap{ position:relative; }
#v-copy .cmwrap::after{
  content:''; position:absolute; inset:-4% -2% auto; height:560px; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 380px at 86% 0%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 62%),
    radial-gradient(520px 300px at 6% 40%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 60%);
}
#v-copy .cmwrap > *{ position:relative; z-index:1; }

/* ════════ SCULPTED CARDS — KPI · gateways · AGI hero · side cards ════════ */
#v-copy .cmkpi,
#v-copy .cmgate,
#v-copy .cmside-card{
  box-shadow: var(--cmp-elev);
  transform: perspective(1100px);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .2s ease;
  will-change: transform;
}
#v-copy .cmside-card{ position:relative; overflow:hidden; }

/* fixed glossy top sheen */
#v-copy .cmkpi::after,
#v-copy .cmgate::after,
#v-copy .cmside-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:6;
  background:linear-gradient(152deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 15%, transparent 32%);
}

/* cursor-follow glare (gateways + side cards; --mx/--my from community/tilt.js.
   .cmkpi::before is reserved by community.css for its top accent line) */
#v-copy .cmgate::before,
#v-copy .cmside-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:7;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--gold) 15%, transparent), transparent 60%);
}
#v-copy .cmgate:hover::before,
#v-copy .cmside-card:hover::before{ opacity:1; }

/* hover — lift + intensified depth/glow */
#v-copy .cmkpi:hover,
#v-copy .cmgate:hover,
#v-copy .cmside-card:hover{
  box-shadow: var(--cmp-elev-hover);
  transform: perspective(1100px) translateY(-3px);
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
}

/* ════════ 3D PILL BUTTONS ════════ */
#v-copy .cmgate-btn,
#v-copy .cmagi-btn,
#v-copy .cmhero-b1{ box-shadow: var(--cmp-elev-btn); }
#v-copy .cmgate-btn{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 80%, #fff),
    var(--gold) 50%,
    color-mix(in srgb, var(--gold) 80%, #000));
}
#v-copy .cmgate-btn:hover,
#v-copy .cmagi-btn:hover,
#v-copy .cmhero-b1:hover{ filter:brightness(1.08); }

/* ════════ RAISED 3D ICON TILES ════════ */
#v-copy .cmgate-ic,
#v-copy .cmkpi-ic{
  background:linear-gradient(158deg,
    color-mix(in srgb, var(--gold) 30%, transparent),
    color-mix(in srgb, var(--gold) 4%, transparent));
  box-shadow: var(--cmp-elev-tile);
}

/* ════════ GAUGE + SPARKLINE glow ════════ */
#v-copy .cmkpi-ring svg{ filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--gold) 42%, transparent)); }
#v-copy .cmkpi-sp{ filter:drop-shadow(0 3px 7px color-mix(in srgb, var(--gold) 26%, transparent)); }

/* ════════ PREMIUM CTA SHIMMER — the Ask-AGI button ════════ */
#v-copy .cmagi-btn{ position:relative; overflow:hidden; }
#v-copy .cmagi-btn::after{
  content:''; position:absolute; top:0; left:-60%; width:42%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform:skewX(-18deg); pointer-events:none;
}

/* ════════ MOTION (respects reduced-motion) ════════
   Orb breathes via filter:drop-shadow (its box-shadow is owned by community.css). */
@media (prefers-reduced-motion: no-preference){
  #v-copy .cmagi-orb{ animation: cmpOrbBreathe 4.4s ease-in-out infinite; }
  @keyframes cmpOrbBreathe{
    0%,100%{ filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 55%, transparent)); }
    50%{     filter: drop-shadow(0 0 26px color-mix(in srgb, var(--gold) 85%, transparent)); }
  }
  #v-copy .cmagi-btn::after{ animation: cmpShine 4.8s ease-in-out infinite; }
  @keyframes cmpShine{ 0%{ left:-60%; } 24%,100%{ left:135%; } }
}

/* ════════════════════════════════════════════════════════════════════════
   BLACK THEME — Community view only  (reference palette: warm near-black)
   `body.cm-black` is toggled by the router (shell.js go(), p==='copy') ONLY
   while the community view is active → the ticker, sidebar, topbar AND the
   content all turn warm-black; every other page keeps the app's navy dark
   theme untouched. Replaces the bluish slate surfaces (#111827 / #1F2937)
   with the reference's #0e0d0f surfaces + red-tinted hairlines.
   SCOPED to dark mode only (`html:not([data-theme="light"])`) — in LIGHT mode
   the community must follow the app's white theme, NOT be forced black (the
   warm-black var overrides would otherwise win and keep the page dark in light mode).
   ════════════════════════════════════════════════════════════════════════ */
html:not([data-theme="light"]) body.cm-black,
html:not([data-theme="light"]) body.cm-black #v-copy{
  --bg:#070506;
  --card:#0e0d0f;
  --card2:#151016;
  --cardgrad:linear-gradient(180deg,#120f11,#0b090b);
  --line:rgba(229,60,72,.15);
}
html:not([data-theme="light"]) body.cm-black{ background:#070506; }