/* Stress hormone lesson. All rules scoped under .sh-* */

.sh-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sh-relay, .sh-day { width: 100%; max-width: 380px; display: block; overflow: visible; }

/* the relay: nodes are dim until the step that shows them, gold while they fire */
.sh-nd rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .3s, stroke .3s, opacity .3s; }
.sh-nd text { font: 700 13px var(--sans); fill: var(--text); text-anchor: middle; transition: opacity .3s; }
.sh-pit, .sh-out, .sh-a1, .sh-a2 { opacity: .25; transition: opacity .3s; }
.sh-core, .sh-nerve { opacity: .25; transition: opacity .3s; }
.sh-relay.show-core .sh-core, .sh-relay.show-nerve .sh-nerve { opacity: 1; }
.sh-relay.show-relay .sh-pit, .sh-relay.show-relay .sh-out, .sh-relay.show-relay .sh-a1, .sh-relay.show-relay .sh-a2 { opacity: 1; }
.sh-core rect { fill: rgba(216, 85, 85, .16); stroke: #FF8A8A; }
.sh-out rect { fill: rgba(252, 192, 80, .12); stroke: var(--gold); }
.sh-ar { stroke: var(--dim); stroke-width: 2.5; fill: none; marker-end: none; }
.sh-nerve { fill: none; stroke: #FF8A8A; stroke-width: 2.5; stroke-dasharray: 5 4; }
.sh-gl { font: 600 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.sh-relay.go-brain .sh-brain rect, .sh-relay.go-pit .sh-pit rect { stroke: var(--gold); fill: rgba(252, 192, 80, .2); }
.sh-relay.go-brain .sh-a1, .sh-relay.go-pit .sh-a2 { stroke: var(--gold); }
.sh-relay.go-out .sh-out rect { fill: rgba(252, 192, 80, .35); }
.sh-relay.go-nerve .sh-nerve { animation: shFlow .5s linear infinite; }
.sh-relay.go-nerve .sh-core rect { fill: rgba(216, 85, 85, .4); }
@keyframes shFlow { to { stroke-dashoffset: -18; } }
.sh-relay.stress .sh-nerve { animation-iteration-count: 6; }
/* the loop back to the brain */
.sh-fb { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0; transition: opacity .3s; }
.sh-fbt { font: 700 13px var(--sans); fill: var(--violet-bright); opacity: 0; transition: opacity .3s; }
.sh-relay.show-fb .sh-fb { opacity: .45; }
.sh-relay.go-fb .sh-fb { opacity: 1; stroke: #FF8A8A; stroke-dasharray: none; }
.sh-relay.go-fb .sh-fbt { opacity: 1; fill: #FF8A8A; }
.sh-relay.dimmed .sh-brain rect, .sh-relay.dimmed .sh-pit rect, .sh-relay.dimmed .sh-out rect { fill: var(--raised); stroke: var(--line); }
.sh-relay.dimmed .sh-a1, .sh-relay.dimmed .sh-a2 { opacity: .25; }

/* the clock chart */
.sh-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.sh-tk { font: 600 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.sh-unit { text-anchor: end; font-size: 12px; }
.sh-tk0 { text-anchor: start; }
.sh-lg { font: 700 13px var(--sans); }
.sh-lga { fill: #FF8A8A; }
.sh-lgc { fill: var(--gold); }
.sh-la { fill: none; stroke: #FF8A8A; stroke-width: 3; stroke-linejoin: round; }
.sh-lc { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; }
.sh-lc2 { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; opacity: .5; }
.sh-stress { fill: rgba(216, 85, 85, .12); opacity: 0; transition: opacity .3s; }
.sh-relay.stress .sh-stress { opacity: 1; }
.sh-clock { font: 700 13px var(--sans); fill: var(--text); text-anchor: end; }

/* the cream */
.sh-cream { display: flex; align-items: center; justify-content: center; gap: 14px; }
.sh-cream img { width: 150px; display: block; filter: drop-shadow(0 16px 26px rgba(123, 92, 253, .3)); }
.sh-skin { position: relative; width: 130px; height: 130px; border-radius: 26px; background: #E6A27F; overflow: hidden; }
.sh-skin i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(214, 40, 40, .95), rgba(214, 40, 40, 0) 70%); transition: opacity 1s; }
.sh-skin i:nth-child(1) { left: 12px; top: 14px; width: 64px; height: 64px; }
.sh-skin i:nth-child(2) { left: 56px; top: 40px; width: 70px; height: 70px; }
.sh-skin i:nth-child(3) { left: 8px; top: 64px; width: 56px; height: 56px; }
.sh-skin span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 13px var(--sans); color: #2A0E08; transition: opacity .4s; }
.sh-s2 { opacity: 0; }
.calm .sh-skin i { opacity: .12; }
.calm .sh-s1 { opacity: 0; }
.calm .sh-s2 { opacity: 1; }

/* the doctor's test */
.sh-wrap { position: relative; width: 100%; max-width: 380px; }
.sh-pill { position: absolute; left: 44%; top: 17%; display: flex; align-items: center; gap: 6px; transform: translate(24px, 0); opacity: 0; transition: opacity .3s, transform .5s; }
.sh-pill i { width: 26px; height: 13px; border-radius: 7px; background: linear-gradient(90deg, #fff 50%, var(--violet-bright) 50%); }
.sh-pill span { font-size: 13px; font-weight: 700; color: var(--violet-bright); }
.sh-pill.in { opacity: 1; transform: translate(0, 0); }
.sh-g { width: 100%; max-width: 360px; }

/* the day */
.sh-night { fill: rgba(123, 92, 253, .1); }
.sh-nt { font: 600 13px var(--sans); fill: var(--violet-bright); text-anchor: middle; }
.sh-wake { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sh-wt { font: 700 13px var(--sans); fill: var(--gold); }
.sh-wtr { text-anchor: end; }
.sh-dl { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; }
.sh-dg { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; opacity: .45; }
.sh-dlab { font: 600 12px var(--sans); fill: var(--dim); text-anchor: end; }

/* the sleepers */
.sh-born { width: 100%; max-width: 360px; }
.sh-bs { width: 100%; display: block; overflow: visible; }
.sh-b1 { fill: none; stroke: var(--gold); stroke-width: 3.5; }
.sh-b2 { fill: none; stroke: var(--violet-bright); stroke-width: 3; }
.sh-bl1, .sh-bl2 { font: 700 13px var(--sans); opacity: 0; transition: opacity .3s; }
.sh-bl1 { fill: var(--gold); }
.sh-bl2 { fill: var(--violet-bright); }
.sh-born.on .sh-bl1, .sh-born.on .sh-bl2 { opacity: 1; }
.sh-cap { font-size: 13px; color: var(--dim); text-align: center; margin-top: 4px; }

@media (max-height: 700px) {
  .sh-cream img { width: 110px; }
  .sh-skin { width: 110px; height: 110px; }
  .sh-relay { max-width: 330px; }
}