/* Orbit design tokens — "Hearthlight". The single source of color/space/motion.
   EVERY component & screen must pull color from here — no hardcoded hex elsewhere. */
:root {
  /* Palette (LOCKED) */
  --cream: #FFF8F2;
  --coral: #FF6F61;
  --soft-pink: #FFB5C8;
  --apricot: #FFC47A;
  --soft-purple: #8B7CF6;
  --deep-purple: #4A3F63;
  --ink: #211A2E;
  --warm-ink: #35263A;

  /* Glass surfaces */
  --glass-dark: rgba(24, 18, 28, .72);
  --glass-light: rgba(255, 248, 242, .72);

  /* The signature O-ring gradient: coral -> pink -> apricot -> violet */
  --o-grad: linear-gradient(135deg, var(--coral) 0%, var(--soft-pink) 40%, var(--apricot) 72%, var(--soft-purple) 100%);

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;

  /* Shadows + glows */
  --shadow-warm: 0 18px 60px rgba(74, 63, 99, .22);
  --glow-coral: 0 0 28px rgba(255, 111, 97, .45);
  --glow-gold: 0 0 28px rgba(255, 196, 122, .45);
  --glow-purple: 0 0 28px rgba(139, 124, 246, .38);

  /* Type families */
  --font-ui: "Heebo", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Frank Ruhl Libre", "Fraunces", Georgia, serif;

  /* Layout */
  --app-max: 452px;
  --nav-h: 76px;

  /* Motion */
  --ease-warm: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 700ms;
}

/* ============================================================
   ORBIT POWER-UP KIT  — additive life layer. Names are API.
   All motion is opacity/transform/shadow only (never layout).
   prefers-reduced-motion is handled GLOBALLY in base.css.
   ============================================================ */

/* --- new tokens the kit leans on --- */
:root{
  --ease-out-soft: cubic-bezier(.16,.84,.44,1);
  --dur-breath: 5.2s;
  --dur-drift: 24s;
  --shadow-lift: 0 2px 8px rgba(74,63,99,.10), 0 14px 40px rgba(74,63,99,.16);
  --sheen-warm: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 66%);
  --glass-top: inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- KEYFRAMES (reference by name) ---------- */
@keyframes orbit-rise   { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
@keyframes orbit-pop    { 0%{opacity:0;transform:scale(.9);} 60%{transform:scale(1.02);} 100%{opacity:1;transform:scale(1);} }
@keyframes orbit-breath { 0%,100%{transform:scale(1);opacity:.94;} 50%{transform:scale(1.03);opacity:1;} }
/* halo-breath animates SHADOW ONLY — never a hard ring (HALO RULE) */
@keyframes orbit-halo   { 0%,100%{box-shadow:0 0 18px 4px var(--halo,rgba(255,111,97,.34));}
                          50%     {box-shadow:0 0 30px 8px var(--halo,rgba(255,111,97,.48));} }
@keyframes orbit-drift  { 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(2%, -1.5%,0) scale(1.04);} }
@keyframes orbit-sheen  { 0%{background-position:-140% 0;} 100%{background-position:140% 0;} }
@keyframes orbit-ember  { 0%,100%{transform:scale(1);opacity:.7;} 50%{transform:scale(1.35);opacity:1;} }

/* ---------- 1. LAYERED DEPTH (kills the flat white card) ---------- */
/* Add to any cream/white card WITHOUT touching its layout. */
.orbit-glass{
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,248,242,.70));
  box-shadow: var(--glass-top), var(--shadow-lift);
}

/* ---------- 2. ENTRANCE CHOREOGRAPHY ---------- */
/* Put .orbit-in on a container; direct children cascade up on mount. */
.orbit-in > *{ animation: orbit-rise var(--dur-med) var(--ease-out-soft) both; }
.orbit-in > *:nth-child(1){animation-delay:.02s;}
.orbit-in > *:nth-child(2){animation-delay:.07s;}
.orbit-in > *:nth-child(3){animation-delay:.12s;}
.orbit-in > *:nth-child(4){animation-delay:.17s;}
.orbit-in > *:nth-child(5){animation-delay:.22s;}
.orbit-in > *:nth-child(6){animation-delay:.27s;}
.orbit-in > *:nth-child(n+7){animation-delay:.30s;}
/* single-element entrance */
.orbit-rise{ animation: orbit-rise var(--dur-med) var(--ease-out-soft) both; }
.orbit-pop { animation: orbit-pop  var(--dur-med) var(--ease-out-soft) both; }

/* ---------- 3. AMBIENT BREATHING / DRIFT / SHIMMER ---------- */
.orbit-breath{ animation: orbit-breath var(--dur-breath) ease-in-out infinite; will-change:transform; }
/* feathered focal glow that breathes — set --halo per use; NEVER a 0 0 0 Npx ring */
.orbit-halo{ animation: orbit-halo var(--dur-breath) ease-in-out infinite; }
/* slow background/scene drift for blurred ambience layers (SCENE-safe: apply to the AMBIENCE div, not the sharp render) */
.orbit-drift{ animation: orbit-drift var(--dur-drift) var(--ease-warm) infinite alternate; will-change:transform; }
/* travelling warm sheen — element must have its own bg; sheen rides on top */
.orbit-sheen{ position:relative; overflow:hidden; }
.orbit-sheen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--sheen-warm); background-size:220% 100%;
  animation: orbit-sheen 9s var(--ease-warm) infinite;
}

/* ---------- 4. LIVE EMBER (presence "here now" dot) ---------- */
.orbit-ember{
  width:8px;height:8px;border-radius:50%;
  background:var(--apricot); box-shadow:0 0 10px 2px rgba(255,196,122,.7);
  animation: orbit-ember 2.6s ease-in-out infinite;
}

/* ---------- 5. TACTILE PRESS FEEDBACK ---------- */
/* add to any tappable pill/tile that only had :active scale before */
.orbit-press{ transition: transform var(--dur-fast) var(--ease-warm), box-shadow var(--dur-fast) var(--ease-warm); }
.orbit-press:active{ transform: scale(.96); }
@media (hover:hover){ .orbit-press:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lift); } }

/* ---------- 6. WARM FOCAL GLOW (static, HALO-legal) ---------- */
.orbit-glow-coral { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--coral) 34%, transparent); }
.orbit-glow-gold  { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--apricot) 34%, transparent); }
.orbit-glow-purple{ box-shadow: 0 0 22px 4px color-mix(in srgb, var(--soft-purple) 32%, transparent); }

/* ---------- 7. TYPE-HIERARCHY ACCENTS ---------- */
/* thin gold underline sweep that draws in once under a heading */
.orbit-kicker{ letter-spacing:.4px; text-transform:none; color: color-mix(in srgb, var(--deep-purple) 70%, var(--soft-purple)); }
.orbit-hairline{ position:relative; }
.orbit-hairline::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-4px; height:2px; width:2.2em;
  background: linear-gradient(90deg, var(--apricot), transparent);
  transform-origin:inset-inline-start; animation: orbit-rise var(--dur-med) var(--ease-warm) both;
}

/* ---------- 8. THE ORBIT O-MARK (fixes all 4 dead .so-empty__o + reuse anywhere) ---------- */
.orbit-o-mark{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center; margin-inline:auto;
  border:6px solid transparent;
  background: linear-gradient(var(--cream),var(--cream)) padding-box,
              var(--o-grad) border-box;
  box-shadow: 0 0 26px 6px color-mix(in srgb, var(--apricot) 30%, transparent);
  animation: orbit-breath 3.6s ease-in-out infinite;
}
.orbit-o-mark > span{
  width:12px;height:12px;border-radius:50%;
  background:var(--coral); box-shadow:var(--glow-coral);
}

/* ============================================================
   PROMOTED STRUCTURAL AVATAR STACK (cmw-face*) — GLOBAL.
   These are structural, not screen-scoped: doorObject()/castFaces()
   render into Home, Search, and every future consumer. Promoting
   the face/stack rules here heals them all (the door-*arch* CSS
   stays screen-scoped in communitiesShared). The __init layer FILLS
   the circle (mirrors .so-av__init) so a missing crop never collapses
   to a thin colored letter-bar.
   ============================================================ */
.cmw-faces{display:flex;flex:none;}
.cmw-face{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;border:2px solid var(--cream);margin-inline-start:-10px;}
.cmw-face:first-child{margin-inline-start:0;}
.cmw-face__init{position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--cream);}
.cmw-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cmw-faces--sm .cmw-face{width:28px;height:28px;margin-inline-start:-9px;}
.cmw-faces--sm .cmw-face:first-child{margin-inline-start:0;}
.cmw-faces--sm .cmw-face__init{font-size:11px;}
.cmw-faces--lg .cmw-face{width:44px;height:44px;margin-inline-start:-13px;}
.cmw-faces--lg .cmw-face:first-child{margin-inline-start:0;}
.cmw-faces--lg .cmw-face__init{font-size:16px;}