/* ════════════════════════════════════════════════════════════════════
   mirror-shared.css · SINGLE SOURCE OF TRUTH for the Mirror arc system
   ────────────────────────────────────────────────────────────────────
   Loaded by BOTH the dashboard (templates/mirror_mvp/mirror_dashboard.html)
   and the Explorer page (templates/public/explore.html), AFTER each page's
   inline <style> so these rules win. Edit the arc / depth-ring look HERE
   once and both pages update. Do not re-inline these rules per page.

   Two-temperature system (locked): gold = earned/active/light,
   violet/amethyst = depth/atmosphere, arc-stage color = active stage.
   ════════════════════════════════════════════════════════════════════ */

/* ── Depth rings (avatar hub: violet depth + gold progress) ── */
@keyframes cxRingReveal{from{stroke-dashoffset:var(--cx-circumference);}to{stroke-dashoffset:var(--cx-target);}}
@keyframes cxGoldBloom{0%,100%{opacity:1;}50%{opacity:.72;filter:drop-shadow(0 0 8px rgba(200,167,106,.80));}}
@keyframes cxRingFlash{0%{filter:drop-shadow(0 0 0 rgba(139,121,201,0));}40%{filter:drop-shadow(0 0 12px rgba(139,121,201,.70));}100%{filter:drop-shadow(0 0 0 rgba(139,121,201,0));}}
.cx-depth-ring-track{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);}
.cx-tick{stroke:rgba(139,121,201,.18);stroke-width:1.2;stroke-linecap:round;}
.cx-depth-legend{display:flex;justify-content:center;gap:16px;margin-top:6px;flex-wrap:wrap;}
.cx-depth-legend-item{display:flex;align-items:center;gap:5px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,167,106,.70);}
.cx-depth-swatch{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* ── Arc spiral tracker ── */
@keyframes cxSpiralPulse{0%,100%{opacity:.90;}50%{opacity:1;filter:drop-shadow(0 0 10px rgba(139,121,201,.98));}}
@keyframes cxRingEmit{0%{r:5.5;opacity:.60;}100%{r:16;opacity:0;}}
.cx-arc-spiral-wrap{
  margin:1.2rem 0;
  padding:18px 20px 24px;
  background:
    radial-gradient(ellipse 100% 70% at 50% 85%, rgba(var(--arc-rgb,139,121,201),.16) 0%, transparent 75%),
    linear-gradient(135deg, rgba(30,24,50,.48) 0%, rgba(16,12,24,.65) 100%);
  border:1.5px solid rgba(var(--arc-rgb,139,121,201),.20);
  border-left:3px solid rgba(var(--arc-rgb,139,121,201),.50);
  border-radius:14px;
  overflow:visible;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative;
}
.cx-arc-spiral-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 100% 0%, rgba(var(--arc-rgb,139,121,201),.04) 0%, transparent 60%);
  border-radius:14px;pointer-events:none;
}
.cx-arc-spiral-wrap:hover,
.cx-arc-spiral-wrap:active{
  background:
    radial-gradient(ellipse 100% 70% at 50% 85%, rgba(var(--arc-rgb,139,121,201),.24) 0%, transparent 75%),
    linear-gradient(135deg, rgba(40,32,62,.55) 0%, rgba(22,16,32,.75) 100%);
  box-shadow:
    0 0 40px rgba(var(--arc-rgb,139,121,201),.22),
    0 0 80px rgba(var(--arc-rgb,139,121,201),.08),
    inset 0 0 32px rgba(var(--arc-rgb,139,121,201),.08);
  border-color:rgba(var(--arc-rgb,139,121,201),.40);
  border-left-color:rgba(var(--arc-rgb,139,121,201),.72);
}
.cx-arc-eye{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.30em;text-transform:uppercase;color:rgba(200,167,106,.82);margin-bottom:6px;}
.cx-arc-svg{width:100%;max-width:280px;display:block;margin:0 auto;overflow:visible;}
.cx-arc-bg{fill:none;stroke:rgba(139,121,201,.12);stroke-width:1.5;stroke-linecap:round;}
.cx-arc-seg{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:var(--slen);stroke-dashoffset:var(--slen);transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);}
.cx-arc-seg.seg-done{stroke:var(--seg-color,rgba(139,121,201,.55));opacity:.78;}
.cx-arc-seg.seg-active{stroke:var(--arc-color,rgba(200,167,106,.9));}
.cx-arc-seg.seg-future{stroke:rgba(139,121,201,.15);}
.cx-arc-dot{transition:all .4s ease;}
.cx-arc-dot.dot-done{fill:rgba(139,121,201,.62);}
.cx-arc-dot.dot-active{fill:var(--arc-color,rgba(200,167,106,.9));animation:cxSpiralPulse 2.2s ease-in-out infinite;}
.cx-arc-dot.dot-future{fill:rgba(139,121,201,.18);}
.cx-arc-emit{fill:none;stroke:var(--arc-color,rgba(200,167,106,.9));stroke-width:.8;opacity:.55;}
.cx-arc-emit.e1{animation:cxRingEmit 2.2s ease-out .3s infinite;}
.cx-arc-emit.e2{animation:cxRingEmit 2.2s ease-out .9s infinite;}
.cx-arc-lbl{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;dominant-baseline:central;transition:fill .3s ease;}
.cx-arc-lbl.done{fill:rgba(139,121,201,.65);opacity:.82;}
.cx-arc-lbl.active{fill:rgba(200,167,106,.98);font-size:12px;letter-spacing:.12em;filter:drop-shadow(0 0 4px rgba(200,167,106,.55));font-weight:600;}
.cx-arc-lbl.future{fill:rgba(139,121,201,.28);opacity:.55;}
.cx-arc-cap{margin-top:12px;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.88rem;color:rgba(243,238,230,.70);}
.cx-arc-cap-stage{font-family:'Cinzel',serif;font-style:normal;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;filter:drop-shadow(0 0 6px rgba(200,167,106,.18));}

@media(prefers-reduced-motion:reduce){
  .cx-arc-dot.dot-active,.cx-arc-emit.e1,.cx-arc-emit.e2{animation:none!important;}
}

/* ── Codex mandala · ambient cosmic depth behind the RELATIONAL FIELD
   (its center + five orbiting nodes mirror YOU + the arc stages) ── */
.relational-map-wrap{position:relative;}
.relational-map-wrap > svg{position:relative;z-index:1;}
.cx-arc-mandala{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(118%,480px);aspect-ratio:1;height:auto;   /* square + centered on the YOU node at every width */
  z-index:0;pointer-events:none;
  opacity:.55;                       /* tune here · 1 source, both pages follow */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 78%);
}
@media(prefers-reduced-motion:reduce){.cx-arc-mandala{opacity:.32;}}

/* ── Seal constellation · clear the "Seals · earned/in progress" title on mobile (no squish/overlap) ── */
.cx-seal-header{margin-bottom:10px;}
@media(max-width:600px){
  .cx-seal-header{margin-bottom:16px;}
  .cx-seal-constellation{margin-top:2rem;}
}

/* ── Popup must sit ABOVE the fixed nav/topbar so the close X is never covered (mobile) ── */
.relfield-overlay{z-index:3000;}
.relfield-modal-header{z-index:3;}
.seal-popup-overlay{z-index:3000;}