/* Addiction explorer: a four-stage animated synapse (the drug, the adaptation, the iboga reset, the root).
   Shared by the addiction articles; driven by js/addiction-motion.js. Transform/opacity only. */
.addx { --addx-drug: #7B6FA8; --addx-progress: 0; }
.addx__steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; padding: 1.25rem; border-bottom: 1px solid var(--sci-line); }
.addx__steps button { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; padding: .8rem .6rem; text-align: left; border: 1px solid var(--sci-line); border-radius: 9px; background: var(--color-bg-card); color: var(--color-text-2); transition: background .3s, border-color .3s, color .3s; }
.addx__steps button:hover { border-color: color-mix(in srgb, var(--color-ember) 45%, var(--sci-line)); color: var(--color-text); }
.addx__steps button[aria-pressed="true"] { border-color: var(--color-red); background: linear-gradient(135deg,var(--color-bg-card),var(--color-cream)); color: var(--color-text); }
.addx__number { font-size: .55rem; line-height: 1.8; color: var(--color-red); }
.addx__steps b { display: block; font-size: .8rem; font-weight: 500; line-height: 1.4; }
.addx__steps small { display: block; margin-top: .35rem; font-size: .6rem; line-height: 1.4; }
.addx__main { display: grid; grid-template-columns: 1fr 1.1fr; }
.addx__visual { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.25rem 0; border-right: 1px solid var(--sci-line); background: radial-gradient(ellipse at 50% 55%,var(--color-cream),transparent 70%),var(--color-bg); overflow: hidden; }
.addx__visual-top { display: flex; justify-content: space-between; gap: 1rem; padding: 0 1.2rem; color: var(--color-text-2); text-transform: uppercase; letter-spacing: .07em; font-size: .5rem; }
.addx__visual > svg { width: 100%; height: auto; margin-block: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.addx__visual svg * { transform-box: fill-box; }
.addx__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; padding: 0 1rem; margin: 0; list-style: none; font-size: .58rem; color: var(--color-text-2); }
.addx__legend li { display: flex; align-items: center; gap: .35rem; margin: 0; }
.addx__legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-gold); }
.addx__legend .addx__key-drug { background: var(--addx-drug); border-radius: 2px; transform: rotate(45deg); }
.addx__legend .addx__key-iboga { background: var(--color-ember); }

/* the synapse */
.addx__pre { fill: color-mix(in srgb, var(--color-cream) 70%, white); stroke: color-mix(in srgb, var(--color-text) 30%, transparent); stroke-width: 1.2; }
.addx__post { fill: color-mix(in srgb, var(--color-cream) 45%, white); stroke: color-mix(in srgb, var(--color-text) 30%, transparent); stroke-width: 1.2; }
.addx__vesicle { fill: var(--color-bg-card); stroke: var(--color-gold); stroke-width: 1; }
.addx__tag { fill: var(--color-text-2); font: 500 9px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; stroke: none; }
.addx__rec { fill: var(--color-bg-card); stroke: var(--color-text-2); stroke-width: 1.3; transform-origin: 50% 100%; transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out); }
.addx__rec--extra { opacity: 0; transform: scale(.2); }
.addx__pump { fill: var(--color-bg-card); stroke: var(--color-text-2); stroke-width: 1.3; }
.addx__pump-plug { fill: var(--addx-drug); stroke: none; opacity: 0; transition: opacity 1.2s; }
.addx__nt { fill: var(--color-gold); stroke: none; animation: addxFall 4.2s linear infinite; }
.addx__nt:nth-child(2n) { animation-duration: 5.1s; animation-delay: -1.6s; }
.addx__nt:nth-child(3n) { animation-duration: 3.7s; animation-delay: -2.4s; }
.addx__drug { fill: var(--addx-drug); stroke: none; transform-origin: center; transition: opacity 1.2s, transform 1.4s var(--ease-out); }
.addx__drug-loose { animation: addxDrift 3.4s ease-in-out infinite; }
.addx__drug-loose:nth-child(2n) { animation-delay: -1.2s; animation-duration: 4.1s; }
.addx__iboga { fill: var(--color-ember); stroke: none; opacity: 0; transition: opacity 1.2s; }
.addx__iboga circle { animation: addxDrift 3s ease-in-out infinite; }
.addx__iboga circle:nth-child(2n) { animation-delay: -1.4s; }
.addx__wave { fill: none; stroke: var(--color-ember); stroke-width: 1.4; opacity: 0; transform-origin: center; }
.addx__sprout { stroke: var(--color-ember); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out) .4s; }
.addx__synapse { transition: opacity 1.4s; }

/* the root: fire, harp strings, the ring that closes */
.addx__soul { opacity: 0; transition: opacity 1.6s; }
.addx__ring-base { stroke: var(--color-border); stroke-width: 1; }
.addx__ring { stroke: var(--color-ember); stroke-width: 2.2; stroke-dasharray: .78 .22; transform-origin: center; transform: rotate(-90deg); transition: stroke-dasharray 3s var(--ease-out) .6s; }
.addx__self { fill: var(--color-cream); stroke: var(--color-ember); stroke-width: 1.3; }
.addx__flame { fill: url(#addx-fire); stroke: none; transform-origin: 50% 100%; animation: addxFlicker 1.8s ease-in-out infinite; }
.addx__flame--b { animation-duration: 2.3s; animation-delay: -.7s; opacity: .8; }
.addx__logs { stroke: var(--color-text-2); stroke-width: 2; }
.addx__string { stroke: var(--color-gold); stroke-width: 1; transform-origin: center; animation: addxString 1.4s ease-in-out infinite; }
.addx__string:nth-child(2) { animation-delay: -.35s; }
.addx__string:nth-child(3) { animation-delay: -.7s; }
.addx__string:nth-child(4) { animation-delay: -1.05s; }
.addx__soul-label { fill: var(--color-text-2); font: 500 9px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; stroke: none; }

/* stage 1: the brain adapts (down = receptors removed, up = extra receptors grown) */
.addx[data-stage="1"][data-adapt="down"] .addx__rec--fade { opacity: .12; transform: scale(.35); }
.addx[data-stage="1"][data-adapt="up"] .addx__rec--extra { opacity: 1; transform: none; }
.addx[data-stage="0"] .addx__pump-plug, .addx[data-stage="1"] .addx__pump-plug { opacity: 1; }
.addx__nts { transition: opacity 1.2s; }
.addx[data-stage="1"] .addx__nts { opacity: .35; }
/* stage 2: iboga; the drug is gone, the system rebuilds */
.addx[data-stage="2"] .addx__drug, .addx[data-stage="3"] .addx__drug { opacity: 0; transform: translateY(-18px) scale(.6); }
.addx[data-stage="2"] .addx__iboga { opacity: 1; }
.addx[data-stage="2"] .addx__wave { animation: addxWave 3.2s var(--ease-out) infinite; }
.addx[data-stage="2"] .addx__sprout, .addx[data-stage="3"] .addx__sprout { stroke-dashoffset: 0; }
/* stage 3: the root */
.addx[data-stage="3"] .addx__synapse { opacity: .1; }
.addx[data-stage="3"] .addx__soul { opacity: 1; }
.addx[data-stage="3"] .addx__ring { stroke-dasharray: 1 0; }

.addx__visual * { animation-play-state: paused; }
.addx[data-moving="true"] .addx__visual * { animation-play-state: running; }

.addx__period { padding: 0 1.2rem; text-align: center; }
.addx__period > span { display: block; font: 400 1.4rem/1.2 var(--font-display); letter-spacing: -.025em; }
.addx__notes { min-width: 0; padding: 1.5rem 1.3rem; }
.addx__notes section + section { margin-top: 1.5rem; }
.addx.is-ready .addx__notes { display: grid; }
.addx.is-ready .addx__notes section { grid-area: 1/1; margin: 0; visibility: hidden; opacity: 0; transition: opacity .9s, visibility .9s; }
.addx.is-ready .addx__notes section[data-active="true"] { visibility: visible; opacity: 1; }
.article__body .addx .addx__eyebrow { margin-bottom: .7rem; font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-red); }
.addx__notes h4 { margin: 0 0 .8rem; font: 400 clamp(1.4rem,2vw,1.75rem)/1.13 var(--font-display); letter-spacing: -.025em; }
.article__body .addx .addx__body { font-size: .875rem; line-height: 1.7; color: var(--color-text-2); }
.article__body .addx .addx__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.addx__tags li { margin: 0; padding: .25rem .45rem; border: 1px solid var(--color-border); border-radius: 5px; font-size: .625rem; line-height: 1.5; color: var(--color-text-2); }
.article__body .addx figcaption { margin: 0; padding: 1rem 1.4rem; border-top: 1px solid var(--sci-line); font-size: .7rem; line-height: 1.65; color: var(--color-text-2); }

@keyframes addxFall { 0% { transform: translateY(-34px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } }
@keyframes addxDrift { 50% { transform: translate(3px,-5px) rotate(20deg); } }
@keyframes addxWave { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes addxFlicker { 0%,100% { transform: scaleY(1) skewX(0); } 35% { transform: scaleY(1.12) skewX(-3deg); } 70% { transform: scaleY(.93) skewX(2deg); } }
@keyframes addxString { 50% { transform: scaleY(.6); opacity: .5; } }

@media (max-width: 650px) {
  .addx__steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; padding: 1rem; }
  .addx__steps button { min-height: 66px; padding: .65rem; }
  .addx__main { grid-template-columns: 1fr; }
  .addx__visual { border-right: 0; border-bottom: 1px solid var(--sci-line); }
  .addx__visual > svg { max-height: 270px; }
  .addx__notes { padding: 1.3rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .addx * { transition: none !important; animation: none !important; } }