/* Treatment comparison explainers (addiction-treatment-compared.html): rehab, ibogaine clinic, Bwiti Life.
   Layout reuses the .addx shell (J16-addiction-motion.css); js/compare-models.js sets data-model. */
.cmpx .addx__steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cmpx .addx__visual > svg { max-height: 360px; }
.cmpx svg * { transform-box: fill-box; }
.cmpx__label { fill: var(--color-text-2); font: 500 9px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; stroke: none; }
.cmpx__name { fill: var(--color-text); font: 400 19px/1 var(--font-display); letter-spacing: -.02em; stroke: none; opacity: 0; transition: opacity .8s; }
.cmpx[data-model="rehab"] .cmpx__name--rehab, .cmpx[data-model="clinic"] .cmpx__name--clinic, .cmpx[data-model="bwiti"] .cmpx__name--bwiti { opacity: 1; }

/* rings: body, mind and emotions, spirit, the months after */
.cmpx__track { fill: none; stroke: var(--color-border); stroke-width: 9; }
.cmpx__arc { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset 1.6s var(--ease-out); }
.cmpx__arc--body { stroke: var(--color-text-2); }
.cmpx__arc--mind { stroke: var(--color-gold); transition-delay: .15s; }
.cmpx__arc--spirit { stroke: var(--color-ember); transition-delay: .3s; }
.cmpx__arc--after { stroke: var(--color-red); transition-delay: .45s; }
.cmpx__track--after { stroke-dasharray: .012 .012; stroke-width: 3; }
.cmpx[data-model="rehab"] .cmpx__arc--body { stroke-dashoffset: .15; }
.cmpx[data-model="rehab"] .cmpx__arc--mind { stroke-dashoffset: .4; }
.cmpx[data-model="rehab"] .cmpx__arc--spirit { stroke-dashoffset: .85; }
.cmpx[data-model="rehab"] .cmpx__arc--after { stroke-dashoffset: .5; }
.cmpx[data-model="clinic"] .cmpx__arc--body { stroke-dashoffset: .05; }
.cmpx[data-model="clinic"] .cmpx__arc--mind { stroke-dashoffset: .8; }
.cmpx[data-model="clinic"] .cmpx__arc--spirit { stroke-dashoffset: .92; }
.cmpx[data-model="clinic"] .cmpx__arc--after { stroke-dashoffset: .88; }
.cmpx[data-model="bwiti"] .cmpx__arc--body { stroke-dashoffset: .05; }
.cmpx[data-model="bwiti"] .cmpx__arc--mind { stroke-dashoffset: .1; }
.cmpx[data-model="bwiti"] .cmpx__arc--spirit { stroke-dashoffset: .02; }
.cmpx[data-model="bwiti"] .cmpx__arc--after { stroke-dashoffset: .12; }
.cmpx__key { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; padding: 0 1rem; margin: 0; list-style: none; font-size: .6rem; color: var(--color-text-2); }
.cmpx__key li { display: flex; align-items: center; gap: .35rem; margin: 0; }
.cmpx__key i { width: 14px; height: 4px; border-radius: 2px; }

/* the tree: leaves (what you use), trunk (withdrawal and craving), roots (why you use) */
.cmpx__ground { stroke: var(--color-text-2); stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }
.cmpx__soil { fill: color-mix(in srgb, var(--color-cream) 55%, transparent); stroke: none; }
.cmpx__canopy { fill: #8FA07A; stroke: none; transform-origin: 50% 100%; transition: opacity 1.4s, transform 1.6s var(--ease-out); }
.cmpx__trunk { fill: none; stroke: #8B6F55; stroke-width: 14; stroke-linecap: round; transition: stroke 1.2s; }
.cmpx__glow { fill: none; stroke: var(--color-ember); stroke-width: 2; opacity: 0; transform-origin: center; transition: opacity 1s; }
.cmpx__root { fill: none; stroke: #9C8A78; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 0; transition: stroke 1.4s, opacity 1.4s; opacity: .55; }
.cmpx__root-label { transition: fill 1.2s; }
.cmpx__sprout { fill: #6E9A4F; stroke: none; opacity: 0; transform-origin: 50% 100%; transform: scale(.2); transition: opacity 1.4s .6s, transform 1.8s var(--ease-out) .6s; }
.cmpx__tag-row text { transition: opacity 1s; }
.cmpx[data-model="rehab"] .cmpx__canopy { opacity: .55; transform: scale(.82); }
.cmpx[data-model="rehab"] .cmpx__trunk { stroke: var(--color-gold); }
.cmpx[data-model="clinic"] .cmpx__canopy { opacity: .12; transform: translateY(14px) scale(.7); }
.cmpx[data-model="clinic"] .cmpx__trunk { stroke: var(--color-ember); }
.cmpx[data-model="clinic"] .cmpx__glow { opacity: 1; animation: cmpxPulse 2.4s ease-out infinite; }
.cmpx[data-model="bwiti"] .cmpx__canopy { opacity: 0; transform: translateY(14px) scale(.6); }
.cmpx[data-model="bwiti"] .cmpx__trunk { stroke: var(--color-ember); }
.cmpx[data-model="bwiti"] .cmpx__root { stroke: var(--color-ember); opacity: 1; stroke-dasharray: .07 .05; animation: cmpxFlow 2.6s linear infinite; }
.cmpx[data-model="bwiti"] .cmpx__root-label { fill: var(--color-red); }
.cmpx[data-model="bwiti"] .cmpx__sprout { opacity: 1; transform: none; }

.cmpx .addx__visual * { animation-play-state: paused; }
.cmpx[data-moving="true"] .addx__visual * { animation-play-state: running; }
.cmpx .sci__tools { justify-content: space-between; }
.cmpx__hint { font-size: .65rem; color: var(--color-text-2); }

@keyframes cmpxPulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes cmpxFlow { to { stroke-dashoffset: -.12; } }

@media (max-width: 650px) {
  .cmpx .addx__steps { grid-template-columns: 1fr; }
  .cmpx .addx__steps button { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .cmpx * { transition: none !important; animation: none !important; } }

/* three-column "Addiction" dropdown, anchored left so it opens toward the page */
@media (min-width: 1024px) {
  .site-header__nav ul.site-header__submenu--wide.site-header__submenu--three { width: 46rem; left: -1rem; right: auto; grid-template-columns: 1fr 1.2fr 1fr; }
}

/* detox page: guide links under each substance card */
.detox__guides { margin-top: .9rem; font-size: var(--text-small); line-height: 1.6; color: var(--color-text-2); }
.detox__guides a { color: var(--color-ember); font-weight: 600; text-decoration: none; }
.detox__guides a:hover, .detox__guides a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }