/* The Emotion Dictionary, alive layer (Lever A and B).
   The emotion colour does more work, and the connective pages gain a soft
   atmosphere. All motion respects the reduced-motion setting. */

/* ---- Lever A: the emotion colour, a little more present on cards ---- */
.az-card .name::before,
.related-card .name::before,
.card .name::before {
  content: ""; display: inline-block; border-radius: 50%; vertical-align: 1px;
  background: var(--card-color, var(--accent, #8a8690));
}
.az-card .name::before,
.related-card .name::before {
  width: 7px; height: 7px; margin-right: 9px;
  box-shadow: 0 0 7px color-mix(in srgb, var(--card-color, var(--accent, #8a8690)) 55%, transparent);
}
.card .name::before {
  width: 9px; height: 9px; margin-right: 11px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-color, var(--accent, #8a8690)) 50%, transparent);
}
.az-card::before { opacity: .9; width: 3px; }
.az-card:hover { background: color-mix(in srgb, var(--card-color, var(--accent, #8a8690)) 7%, var(--bg-card)); }
.card:hover { background: color-mix(in srgb, var(--card-color, var(--accent, #8a8690)) 6%, var(--bg-card)); }
.related-card:hover { background: color-mix(in srgb, var(--card-color, var(--accent, #8a8690)) 7%, var(--bg-card)); }

/* ---- Lever A: one colour field behind an entry's hero ---- */
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }
.hero > .ei-hero-field {
  position: absolute; z-index: 0; left: 50%; top: -28px; transform: translateX(-50%);
  width: min(560px, 96vw); height: 300px; pointer-events: none;
  background: radial-gradient(ellipse 58% 58% at 50% 40%,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 40%, transparent 70%);
  filter: blur(7px);
}

/* ---- Lever B: a soft atmosphere and colour-led header on connective pages ---- */
.glossary, .fam-hero { position: relative; }
.glossary > *, .fam-hero > * { position: relative; z-index: 1; }
.ei-aura {
  position: absolute; z-index: 0; pointer-events: none; left: 50%; top: -16%;
  width: 84vmax; height: 84vmax; transform: translateX(-50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--ei-atmos, var(--accent, #C9A227)) 13%, transparent), transparent 68%);
  filter: blur(26px);
}
.ei-eyebrow {
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted, #a8a4a0);
  display: flex; align-items: center; gap: 10px; margin: 10px 0 16px;
}
.ei-breath-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: var(--ei-atmos, var(--accent, #C9A227));
  box-shadow: 0 0 10px var(--ei-atmos, var(--accent, #C9A227));
}

/* ---- breath, gentle and slow, only when motion is welcome ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero > .ei-hero-field { animation: eiHeroBreath 9s ease-in-out infinite; }
  @keyframes eiHeroBreath {
    0%, 100% { opacity: .82; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  }
  .ei-aura { animation: eiAuraDrift 42s ease-in-out infinite; }
  @keyframes eiAuraDrift {
    0%, 100% { transform: translateX(-50%); }
    50% { transform: translate(calc(-50% + 5vw), 4vh); }
  }
  .ei-breath-dot { animation: eiBreathDot 4.6s ease-in-out infinite; }
  @keyframes eiBreathDot {
    0%, 100% { transform: scale(.82); opacity: .7; }
    50% { transform: scale(1.1); opacity: 1; }
  }
}

/* ====================== DEPLOY_112: Lever D and E ====================== */

/* ---- Lever D: the body map responds to your attention ---- */
.body-map-block svg { transition: filter .5s ease; }
.body-map-block:hover svg { filter: brightness(1.16) saturate(1.05); }
.body-map-list .row { transition: background .2s ease, box-shadow .2s ease; }
.body-map-list .row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.body-map-list .row:hover .region { color: var(--accent); }

/* ---- Lever D: the breathing circle guides the breath with a soft glow ---- */
article .presence .p-circle { position: relative; }
.presence .p-circle::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 75%);
}

/* ---- Lever E: a soft colour moment on the tool and landing pages ---- */
body.ei-toned {
  background-image: radial-gradient(ellipse 90% 55% at 50% -4%,
    color-mix(in srgb, var(--ei-atmos, #C9A227) 10%, transparent), transparent 62%);
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .presence .p-circle::before { animation: ei-pcircle-glow 10s ease-in-out infinite; }
  @keyframes ei-pcircle-glow {
    0%, 100% { opacity: 0; transform: scale(.85); }
    50% { opacity: .6; transform: scale(1.12); }
  }
}