/* Chemsex motion figure (js/chemsex-motion.js): Tina, mephedrone and G on a dark scene, then adaptation, the iboga window and the root */
.chemx { --cx-tina: 0; --cx-meph: 0; --cx-adapt: 0; --cx-win: 0; --cx-root: 1; }
.chemx svg { display: block; width: 100%; height: auto; }
.cx__synapse, .cx__g, .cx__root { opacity: 0; }
.chemx[data-stage="5"] .cx__root { opacity: 1; }
.cx__pre, .cx__post { fill: rgba(255,214,180,.07); stroke: rgba(255,214,180,.45); stroke-width: 1.4; }
.cx__vesicle { fill: none; stroke: rgba(255,200,130,.6); stroke-width: 1.2; }
.cx__tag, .cx__note, .cx__lg text, .cx__alcohol text { fill: rgba(255,232,210,.78); font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cx__note { font-size: 10px; letter-spacing: .03em; text-transform: none; }
.cx__note--hot { fill: #FF9A6A; }
.cx__dat rect, .cx__sert rect { fill: #6E8FA6; }
.cx__arrow { fill: none; stroke: #FF9A6A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cx__dat { opacity: calc(.35 + .65 * max(var(--cx-tina), var(--cx-meph))); }
.cx__dat .cx__arrow, .cx__dat .cx__note { opacity: max(var(--cx-tina), var(--cx-meph)); }
.cx__sert { opacity: var(--cx-meph); }
.cx__rec { stroke: rgba(255,214,180,.7); stroke-width: 1.1; fill: transparent; transition: fill .3s; }
.cx__dopa { fill: #FFC24A; }
.cx__sero { fill: #C3A6FF; }
.cx__meth { fill: #8FB4C6; }
.cx__meph { fill: #F28DB2; }
.cx__nori { fill: #FF6A1F; filter: drop-shadow(0 0 3px rgba(255,120,40,.8)); }
.cx__axis { stroke: rgba(255,214,180,.3); stroke-width: 1; }
.cx__redose-line { fill: none; stroke: #F28DB2; stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cx__redose { opacity: 0; }
.cx__lg { opacity: .35; transition: opacity .3s; }
.cx__lg circle, .cx__lg path { stroke: none; }
.cx__lg--dopa circle { fill: #FFC24A; } .cx__lg--sero circle { fill: #C3A6FF; } .cx__lg--meth path { fill: #8FB4C6; } .cx__lg--meph path { fill: #F28DB2; } .cx__lg--nori circle { fill: #FF6A1F; } .cx__lg--g path { fill: #5FD3C0; }
.chemx[data-stage="0"] .cx__lg--dopa, .chemx[data-stage="0"] .cx__lg--meth,
.chemx[data-stage="1"] .cx__lg--dopa, .chemx[data-stage="1"] .cx__lg--sero, .chemx[data-stage="1"] .cx__lg--meph,
.chemx[data-stage="3"] .cx__lg--dopa, .chemx[data-stage="4"] .cx__lg--dopa, .chemx[data-stage="4"] .cx__lg--nori,
.chemx[data-stage="2"] .cx__lg--g { opacity: 1; }
.cx__trace { fill: none; stroke: #5FD3C0; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(95,211,192,.55)); }
.cx__grec { fill: none; stroke: rgba(255,214,180,.75); stroke-width: 1.4; stroke-linecap: round; }
.cx__gmol { fill: #5FD3C0; }
.cx__zone--1 { fill: #9FCF45; } .cx__zone--2 { fill: #F2B81F; } .cx__zone--3 { fill: #D7261E; }
.cx__marker-line { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.cx__alcohol { opacity: 0; }
.cx__alcohol rect { fill: rgba(215,38,30,.25); stroke: #D7261E; }
.cx__alcohol text { font-size: 10px; letter-spacing: .02em; text-transform: none; fill: #FFD0C4; }
.cx__ring { fill: none; stroke: rgba(255,214,180,.4); stroke-width: 1.4; }
.cx__flame { filter: drop-shadow(0 0 14px rgba(255,120,40,.7)); transform-box: fill-box; transform-origin: 50% 100%; }
.chemx[data-stage="5"] .cx__flame { animation: cx-flicker 2.4s ease-in-out infinite; }
@keyframes cx-flicker { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.96, 1.05); } }
.cx__person { fill: #FFF3C9; opacity: .9; }
.cx__word { fill: #FFC24A; font-family: var(--font-display); font-size: 22px; opacity: 0; transition: opacity 1.2s; }
.chemx[data-stage="5"] .cx__word { opacity: 1; }
.chemx[data-stage="5"] .cx__word:nth-of-type(2) { transition-delay: .5s; }
.chemx[data-stage="5"] .cx__word:nth-of-type(3) { transition-delay: 1s; }
.chemx__stages button { flex-direction: row; }
.chemx__stages b { font-weight: 500; }
@media (min-width: 768px) { .mfig__stages.chemx__stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx__tag, .cx__lg text { font-size: 15px; } .cx__note, .cx__alcohol text { font-size: 13px; } .cx__word { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .chemx[data-stage="5"] .cx__flame { animation: none; } .cx__word { transition: none; } }