/* ============================================================================
 * Pia Business Animations — Component CSS
 *
 * Three scenes for the /business/ cluster, in the same visual language as
 * pia-hero-animation.css (.pha-*), scoped under their own prefixes so the
 * consumer hero is never touched:
 *
 *   1. .pia-biz-anim  — business hero: employee device → your server →
 *      the provider boundary (looping, orchestrated by pia-business-anim.js)
 *   2. .pba-guard     — guardrail scene on /business/security.html
 *      (single shot on scroll into view)
 *   3. .pba-groups    — groups-as-policy scene on /business/self-hosting.html
 *      (single shot on scroll into view)
 *
 * Requires 'Outfit' and 'Technor' loaded on the page (falls back to system).
 * prefers-reduced-motion: reduce is honoured — scenes render their end state.
 * ========================================================================== */

.pia-biz-anim,
.pba-guard,
.pba-groups {
  /* Brand tokens — mirror pia-hero-animation.css */
  --pba-paper:       #FAFAF7;
  --pba-ink:         #1C1917;
  --pba-ink-soft:    #44403C;
  --pba-ink-mute:    #78716C;
  --pba-rule:        #E7E5E4;
  --pba-rule-soft:   #F0EFEB;
  --pba-accent:      #0078D4;
  --pba-accent-soft: rgba(0, 120, 212, .08);
  --pba-accent-mid:  rgba(0, 120, 212, .18);
  --pba-badge:       #EA580C;
  --pba-card-grad:   linear-gradient(180deg, #FFFFFF 0%, #F7F5EF 100%);
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.dark .pia-biz-anim,
.dark .pba-guard,
.dark .pba-groups {
  --pba-paper:       #161614;
  --pba-ink:         #E7E5E4;
  --pba-ink-soft:    #D6D3D1;
  --pba-ink-mute:    #A8A29E;
  --pba-rule:        #292524;
  --pba-rule-soft:   #1F1E1C;
  --pba-accent:      #60CDFF;
  --pba-accent-soft: rgba(96, 205, 255, .10);
  --pba-accent-mid:  rgba(96, 205, 255, .25);
  --pba-card-grad:   linear-gradient(180deg, #1F1E1C 0%, #161614 100%);
}

/* ==========================================================================
 * 1. BUSINESS HERO — .pia-biz-anim
 * ========================================================================== */

.pia-biz-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.pia-biz-anim .pba-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(0, 120, 212, .10) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.dark .pia-biz-anim .pba-glow {
  background: radial-gradient(circle, rgba(96, 205, 255, .10) 0%, transparent 60%);
}

.pia-biz-anim .pba-mech {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px;
}

.pia-biz-anim .pba-eyebrow {
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pba-ink-mute); font-weight: 500;
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .is-running .pba-eyebrow.is-top { opacity: 1; transform: translateY(0); transition-delay: .15s; }
.pia-biz-anim .is-running .pba-eyebrow.is-bottom { opacity: 1; transform: translateY(0); transition-delay: .3s; }

/* --------------------------------------------------------------------------
 * Source slot — employee device / team / provider cloud, crossfading
 * ------------------------------------------------------------------------ */
.pia-biz-anim .pba-source-slot {
  position: relative;
  width: 150px;
  height: 112px;
}
.pia-biz-anim .pba-source-device,
.pia-biz-anim .pba-source-team,
.pia-biz-anim .pba-source-cloud {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  transition: opacity .55s ease;
}
.pia-biz-anim .pba-source-device { opacity: 1; }
.pia-biz-anim .pba-source-team   { opacity: 0; flex-direction: row; gap: 10px; align-items: flex-end; padding-bottom: 14px; }
.pia-biz-anim .pba-source-cloud  { opacity: 0; }

.pia-biz-anim .pba-mech.is-mode-2 .pba-source-device { opacity: 0; }
.pia-biz-anim .pba-mech.is-mode-2 .pba-source-team   { opacity: 1; }
.pia-biz-anim .pba-mech.is-mode-3 .pba-source-device { opacity: 0; }
.pia-biz-anim .pba-mech.is-mode-3 .pba-source-team   { opacity: 0; }
.pia-biz-anim .pba-mech.is-mode-3 .pba-source-cloud  { opacity: 1; }

/* Employee laptop */
.pia-biz-anim .pba-mini-pc {
  width: 92px;
  opacity: 0; transform: scale(.88) translateY(6px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .is-running .pba-mini-pc { opacity: 1; transform: scale(1) translateY(0); transition-delay: .2s; }
.pia-biz-anim .pba-mini-screen {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  border: 1px solid var(--pba-rule);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 120, 212, .12) 0%, transparent 60%),
    linear-gradient(180deg, #1C1917 0%, #292524 100%);
  display: grid; place-items: center;
  box-shadow: 0 10px 22px -12px rgba(28, 25, 23, .25);
}
.pia-biz-anim .pba-mini-wave { display: flex; align-items: center; gap: 2.5px; }
.pia-biz-anim .pba-mini-wave span {
  display: block; width: 2.5px; height: 3px; border-radius: 2px;
  background: rgba(96, 205, 255, .85);
}
.pia-biz-anim .is-live .pba-mini-wave span {
  animation: pba-wave 1.4s ease-in-out infinite;
}
@keyframes pba-wave {
  0%, 100% { height: 3px; }
  50%      { height: 12px; }
}
.pia-biz-anim .pba-mini-stand {
  margin: 4px auto 0; width: 58%; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #E7E5E4 0%, #D6D3D1 100%);
}
.dark .pia-biz-anim .pba-mini-stand {
  background: linear-gradient(180deg, #44403C 0%, #292524 100%);
}
.pia-biz-anim .pba-device-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--pba-paper);
  border: 1px solid var(--pba-accent-mid);
  color: var(--pba-accent);
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(0, 120, 212, .25);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .is-live .pba-device-pill { opacity: 1; transform: translateY(0); transition-delay: .3s; }
.pia-biz-anim .pba-device-pill svg { width: 10px; height: 10px; }

/* Team devices (mode 2) */
.pia-biz-anim .pba-team-pc {
  width: 40px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .pba-mech.is-mode-2 .pba-team-pc { opacity: 1; transform: translateY(0); }
.pia-biz-anim .pba-mech.is-mode-2 .pba-t1 { transition-delay: .05s; }
.pia-biz-anim .pba-mech.is-mode-2 .pba-t2 { transition-delay: .2s; }
.pia-biz-anim .pba-mech.is-mode-2 .pba-t3 { transition-delay: .35s; }
.pia-biz-anim .pba-t2 { width: 48px; }
.pia-biz-anim .pba-team-screen {
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  border: 1px solid var(--pba-rule);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 120, 212, .14) 0%, transparent 60%),
    linear-gradient(180deg, #1C1917 0%, #292524 100%);
}
.pia-biz-anim .pba-team-stand {
  margin: 3px auto 0; width: 56%; height: 2px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #E7E5E4 0%, #D6D3D1 100%);
}
.dark .pia-biz-anim .pba-team-stand {
  background: linear-gradient(180deg, #44403C 0%, #292524 100%);
}

/* Provider cloud (mode 3) */
.pia-biz-anim .pba-cloud-glyph {
  width: 56px; height: 38px;
  color: var(--pba-ink-mute);
  opacity: .7;
  animation: pba-cloud-bob 5s ease-in-out infinite;
}
@keyframes pba-cloud-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --------------------------------------------------------------------------
 * Channel + guardrail gate
 * ------------------------------------------------------------------------ */
.pia-biz-anim .pba-channel {
  position: relative;
  width: 60px; height: 64px;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .6s ease;
}
.pia-biz-anim .is-running .pba-channel { opacity: 1; transition-delay: .6s; }
.pia-biz-anim .pba-channel svg { width: 100%; height: 100%; overflow: visible; }
.pia-biz-anim .pba-track {
  stroke: var(--pba-rule); stroke-width: 1.5; fill: none;
  stroke-dasharray: 3 5;
}
.pia-biz-anim .pba-pulse {
  stroke: var(--pba-accent); stroke-width: 2; fill: none;
  stroke-linecap: round;
  stroke-dasharray: 22 200;
  stroke-dashoffset: 200;
  opacity: 0;
}
.pia-biz-anim .is-flowing .pba-pulse {
  opacity: 1;
  animation: pba-pulse-flow 1.5s cubic-bezier(.5, .1, .5, .9) infinite;
}
@keyframes pba-pulse-flow {
  0%   { stroke-dashoffset: 200; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
/* Mode 3: server → provider, so the pulse runs upward */
.pia-biz-anim .pba-mech.is-mode-3 .pba-pulse { animation-direction: reverse; }

.pia-biz-anim .pba-gate {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.7);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pba-paper);
  border: 1px solid var(--pba-accent-mid);
  color: var(--pba-accent);
  box-shadow: 0 6px 14px -6px rgba(0, 120, 212, .3);
  opacity: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .pba-gate svg { width: 15px; height: 15px; }
.pia-biz-anim .pba-mech.is-mode-3 .pba-gate { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pia-biz-anim .pba-gate::before {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--pba-accent);
  opacity: 0;
}
.pia-biz-anim .pba-mech.is-mode-3.is-flowing .pba-gate::before {
  animation: pba-gate-ping 1.5s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes pba-gate-ping {
  0%   { transform: scale(.95); opacity: .6; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* --------------------------------------------------------------------------
 * Your-server card
 * ------------------------------------------------------------------------ */
.pia-biz-anim .pba-server-card {
  position: relative;
  width: 150px; padding: 10px 12px 12px;
  border-radius: 14px;
  background: var(--pba-card-grad);
  border: 1px solid var(--pba-rule);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 36px -16px rgba(28, 25, 23, .20),
    0 5px 12px -6px rgba(28, 25, 23, .10);
  opacity: 0; transform: scale(.88) translateY(6px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
              transform .9s cubic-bezier(.16, 1, .3, 1);
}
.dark .pia-biz-anim .pba-server-card {
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .5), 0 5px 12px -6px rgba(0, 0, 0, .3);
}
.pia-biz-anim .is-server-in .pba-server-card { opacity: 1; transform: scale(1) translateY(0); }

.pia-biz-anim .pba-server-card::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 18px;
  border: 1.5px solid var(--pba-accent);
  opacity: 0;
}
.pia-biz-anim .is-receive .pba-server-card::before {
  animation: pba-server-receive 1.6s cubic-bezier(.16, 1, .3, 1) 2;
}
@keyframes pba-server-receive {
  0%   { transform: scale(.96); opacity: .6; }
  100% { transform: scale(1.08); opacity: 0; }
}

.pia-biz-anim .pba-server-slat {
  display: flex; align-items: center; gap: 6px;
  height: 14px;
  margin-bottom: 5px;
  padding: 0 7px;
  border-radius: 5px;
  background: linear-gradient(180deg, #1C1917 0%, #292524 100%);
}
.pia-biz-anim .pba-led {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(96, 205, 255, .9);
  box-shadow: 0 0 4px rgba(96, 205, 255, .8);
}
.pia-biz-anim .is-receive .pba-server-slat:nth-child(1) .pba-led { animation: pba-led-blink 1.1s ease-in-out infinite; }
.pia-biz-anim .is-receive .pba-server-slat:nth-child(2) .pba-led { animation: pba-led-blink 1.4s ease-in-out infinite .3s; }
.pia-biz-anim .is-receive .pba-server-slat:nth-child(3) .pba-led { animation: pba-led-blink 1.2s ease-in-out infinite .6s; }
@keyframes pba-led-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.pia-biz-anim .pba-slat-lines {
  flex: 1; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(231, 229, 228, .22) 0 8px, transparent 8px 12px);
}

.pia-biz-anim .pba-lock-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.pia-biz-anim .pba-lock-badge {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0, 120, 212, .06);
  border: 1px solid rgba(0, 120, 212, .45);
  color: var(--pba-accent);
  display: grid; place-items: center;
  flex-shrink: 0;
  opacity: 0; transform: scale(.55);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.dark .pia-biz-anim .pba-lock-badge {
  background: rgba(96, 205, 255, .08);
  border-color: rgba(96, 205, 255, .45);
}
.pia-biz-anim .pba-lock-badge svg { width: 9px; height: 9px; }
.pia-biz-anim .is-receive .pba-lock-badge { opacity: 1; transform: scale(1); }
.pia-biz-anim .is-receive .pba-lb1 { transition-delay: 0s; }
.pia-biz-anim .is-receive .pba-lb2 { transition-delay: .12s; }
.pia-biz-anim .is-receive .pba-lb3 { transition-delay: .24s; }

.pia-biz-anim .pba-server-pill {
  position: absolute;
  left: 50%; bottom: -12px;
  transform: translate(-50%, 6px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--pba-paper);
  border: 1px solid var(--pba-accent-mid);
  color: var(--pba-accent);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(0, 120, 212, .25);
  opacity: 0;
  transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .is-server-in .pba-server-pill {
  opacity: 1; transform: translate(-50%, 0); transition-delay: .25s;
}
.pia-biz-anim .pba-server-pill svg { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
 * Tagline + replay (same treatment as the consumer hero)
 * ------------------------------------------------------------------------ */
.pia-biz-anim .pba-tagline {
  position: absolute;
  left: 0; right: 0;
  bottom: -40px;
  text-align: center;
  font-family: 'Technor', 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--pba-ink-soft);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.pia-biz-anim .pba-tagline em {
  font-style: normal;
  color: var(--pba-accent);
}
.pia-biz-anim .is-running .pba-tagline {
  opacity: 1; transform: translateY(0); transition-delay: .45s;
}

.pia-biz-anim .pba-replay {
  position: absolute; top: 6px; right: 6px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--pba-rule);
  color: var(--pba-ink-mute);
  font-size: 10.5px; font-weight: 500; letter-spacing: .04em;
  cursor: pointer;
  opacity: 0;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background .25s, color .25s, opacity .3s;
}
.dark .pia-biz-anim .pba-replay { background: rgba(22, 22, 20, .55); }
.pia-biz-anim:hover .pba-replay { opacity: 1; }
.pia-biz-anim .pba-replay:hover { background: #fff; color: var(--pba-ink); }
.dark .pia-biz-anim .pba-replay:hover { background: #1F1E1C; color: var(--pba-ink); }
.pia-biz-anim .pba-replay svg { width: 11px; height: 11px; }

/* ==========================================================================
 * 2. GUARDRAIL SCENE — .pba-guard (security page, single shot on scroll)
 * ========================================================================== */

.pba-guard {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.pba-guard .pba-guard-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 220;
}
.pba-guard .pba-guard-stage > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.pba-guard .pba-gtrack {
  stroke: var(--pba-rule); stroke-width: 1.5; fill: none;
  stroke-dasharray: 3 5;
}
.pba-guard .pba-gpulse {
  stroke-width: 2.5; fill: none;
  stroke-linecap: round;
  stroke-dasharray: 26 500;
  stroke-dashoffset: 500;
  opacity: 0;
}
.pba-guard .pba-gpulse.is-ok    { stroke: var(--pba-accent); }
.pba-guard .pba-gpulse.is-risky { stroke: var(--pba-badge); }
.pba-guard.is-play .pba-gpulse {
  animation: pba-gpulse-run 1.6s cubic-bezier(.5, .1, .5, .9) 1 forwards;
}
.pba-guard.is-play .pba-gp1 { animation-delay: .2s; }
.pba-guard.is-play .pba-gp2 { animation-delay: 1.4s; }
.pba-guard.is-play .pba-gp3 { animation-delay: 2.6s; }
@keyframes pba-gpulse-run {
  0%   { stroke-dashoffset: 500; opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

.pba-guard .pba-guard-label {
  display: block;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pba-ink-mute); font-weight: 500;
  white-space: nowrap;
}

.pba-guard .pba-guard-req {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pba-guard .pba-req-stack { display: flex; flex-direction: column; gap: 4px; }
.pba-guard .pba-req {
  width: 34px; height: 10px;
  border-radius: 5px;
  background: var(--pba-card-grad);
  border: 1px solid var(--pba-accent-mid);
}
.pba-guard .pba-req.is-risky { border-color: rgba(234, 88, 12, .55); }

.pba-guard .pba-guard-gate {
  position: absolute;
  left: 47%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.pba-guard .pba-gate-shield {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pba-paper);
  border: 1px solid var(--pba-accent-mid);
  color: var(--pba-accent);
  box-shadow: 0 8px 18px -8px rgba(0, 120, 212, .35);
}
.pba-guard .pba-gate-shield svg { width: 18px; height: 18px; }
.pba-guard .pba-gate-shield::before {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--pba-accent);
  opacity: 0;
}
.pba-guard.is-play .pba-gate-shield::before {
  animation: pba-gate-flash 1.2s cubic-bezier(.16, 1, .3, 1) 3;
  animation-delay: .7s;
}
@keyframes pba-gate-flash {
  0%   { transform: scale(.95); opacity: .6; }
  60%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.pba-guard .pba-model-card {
  position: absolute;
  right: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--pba-card-grad);
  border: 1px solid var(--pba-rule);
  box-shadow: 0 10px 22px -12px rgba(28, 25, 23, .22);
}
.pba-guard .pba-model-card.is-standard  { top: 12%; }
.pba-guard .pba-model-card.is-protected { bottom: 12%; border-color: var(--pba-accent-mid); }
.pba-guard .pba-model-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pba-accent);
  box-shadow: 0 0 0 3px var(--pba-accent-soft);
}
.pba-guard .pba-model-lock { width: 13px; height: 13px; color: var(--pba-accent); flex-shrink: 0; }

.pba-guard .pba-guard-log {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--pba-card-grad);
  border: 1px solid var(--pba-rule);
}
.pba-guard .pba-log-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.pba-guard .pba-log-row {
  display: flex; align-items: center; gap: 7px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pba-guard.is-play .pba-log-row,
.pba-guard.is-done .pba-log-row { opacity: 1; transform: translateY(0); }
.pba-guard.is-play .pba-lr1 { transition-delay: 1.6s; }
.pba-guard.is-play .pba-lr2 { transition-delay: 2.8s; }
.pba-guard.is-play .pba-lr3 { transition-delay: 4s; }
.pba-guard .pba-log-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.pba-guard .pba-log-dot.is-ok   { background: var(--pba-accent); }
.pba-guard .pba-log-dot.is-flag { background: var(--pba-badge); }
.pba-guard .pba-log-bar {
  height: 4px; border-radius: 2px; flex: 1;
  background: repeating-linear-gradient(90deg,
    var(--pba-rule) 0 14px, transparent 14px 20px);
}

/* End state without motion */
.pba-guard.is-done .pba-gpulse { display: none; }

/* ==========================================================================
 * 3. GROUPS SCENE — .pba-groups (self-hosting page, single shot on scroll)
 * ========================================================================== */

.pba-groups {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 8px 0;
}

.pba-groups .pba-chip-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 7px;
  min-height: 26px;
}
.pba-groups .pba-chip {
  display: inline-flex; align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--pba-paper);
  border: 1px solid var(--pba-accent-mid);
  color: var(--pba-accent);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(0, 120, 212, .25);
}
.pba-groups.is-play .pba-chip {
  animation: pba-chip-drop .9s cubic-bezier(.4, 0, .6, 1) 1 forwards;
}
.pba-groups.is-play .pba-c1 { animation-delay: .2s; }
.pba-groups.is-play .pba-c2 { animation-delay: .55s; }
.pba-groups.is-play .pba-c3 { animation-delay: .9s; }
.pba-groups.is-play .pba-c4 { animation-delay: 1.25s; }
@keyframes pba-chip-drop {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(58px) scale(.85); opacity: 0; }
}
.pba-groups.is-done .pba-chip { opacity: 0; }

.pba-groups .pba-group-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  width: 210px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pba-card-grad);
  border: 1px solid var(--pba-rule);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 36px -16px rgba(28, 25, 23, .20);
}
.pba-groups .pba-group-icon { width: 22px; height: 22px; color: var(--pba-accent); }
.pba-groups .pba-guard-label {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pba-ink-mute); font-weight: 500;
}
.pba-groups .pba-group-ring {
  position: absolute; inset: -6px;
  border-radius: 18px;
  border: 1.5px solid var(--pba-accent);
  opacity: 0;
  pointer-events: none;
}
.pba-groups.is-play .pba-group-ring {
  animation: pba-group-ping 1.4s cubic-bezier(.16, 1, .3, 1) 2;
  animation-delay: 1.9s;
}
@keyframes pba-group-ping {
  0%   { transform: scale(.97); opacity: .6; }
  100% { transform: scale(1.12); opacity: 0; }
}

.pba-groups .pba-dock {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px;
  margin-top: 6px;
  min-height: 18px;
}
.pba-groups .pba-dock-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pba-accent-soft);
  border: 1px solid var(--pba-accent-mid);
  color: var(--pba-accent);
  font-size: 8.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0; transform: scale(.7);
  transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pba-groups.is-play .pba-dock-chip,
.pba-groups.is-done .pba-dock-chip { opacity: 1; transform: scale(1); }
.pba-groups.is-play .pba-d1 { transition-delay: .75s; }
.pba-groups.is-play .pba-d2 { transition-delay: 1.1s; }
.pba-groups.is-play .pba-d3 { transition-delay: 1.45s; }
.pba-groups.is-play .pba-d4 { transition-delay: 1.8s; }

.pba-groups .pba-member-row {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
}
.pba-groups .pba-member {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pba-card-grad);
  border: 1px solid var(--pba-rule);
  color: var(--pba-ink-mute);
  transition: border-color .5s ease, color .5s ease;
}
.pba-groups .pba-member svg { width: 18px; height: 18px; }
.pba-groups .pba-member-check {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pba-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 120, 212, .4);
  opacity: 0; transform: scale(.4);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.dark .pba-groups .pba-member-check { color: #0C0C0C; }
.pba-groups .pba-member-check svg { width: 9px; height: 9px; }
.pba-groups.is-play .pba-member,
.pba-groups.is-done .pba-member { border-color: var(--pba-accent-mid); color: var(--pba-ink-soft); }
.pba-groups.is-play .pba-member-check,
.pba-groups.is-done .pba-member-check { opacity: 1; transform: scale(1); }
.pba-groups.is-play .pba-m1 .pba-member-check { transition-delay: 2.5s; }
.pba-groups.is-play .pba-m2 .pba-member-check { transition-delay: 2.7s; }
.pba-groups.is-play .pba-m3 .pba-member-check { transition-delay: 2.9s; }
.pba-groups.is-play .pba-m1,
.pba-groups.is-play .pba-m2,
.pba-groups.is-play .pba-m3 { transition-delay: 2.4s; }

/* ==========================================================================
 * Reduced motion — every scene renders a calm end state
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pia-biz-anim .pba-mini-wave span,
  .pia-biz-anim .pba-cloud-glyph,
  .pia-biz-anim .pba-pulse,
  .pia-biz-anim .pba-led,
  .pia-biz-anim .pba-gate::before,
  .pia-biz-anim .pba-server-card::before,
  .pba-guard .pba-gpulse,
  .pba-guard .pba-gate-shield::before,
  .pba-groups .pba-chip,
  .pba-groups .pba-group-ring {
    animation: none !important;
  }
}