/* Salt lesson. All rules scoped under .slt-* */

/* the dam, full bleed, drifting in on the goats */
.slt-dam { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.slt-dam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; transform-origin: 20% 78%; animation: sltIn 6s cubic-bezier(.3,.6,.3,1) both; }
@keyframes sltIn { from { transform: scale(1); } to { transform: scale(1.55); } }

/* the goats, then the one licking the wall */
.slt-goats { position: relative; width: min(100%, 300px); aspect-ratio: 621 / 640; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.slt-goats img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 16% 62%; transition: transform 1.2s cubic-bezier(.3,.7,.2,1); }
.slt-goats.zoom img { transform: scale(2.6); }
.slt-tag { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 6px 12px; border-radius: 10px; background: rgba(10,14,26,.82); border: 1px solid var(--gold); font: 800 13px var(--sans); color: var(--text); white-space: nowrap; opacity: 0; transition: opacity .4s .9s; }
.slt-goats.zoom .slt-tag { opacity: 1; }
@media (max-height: 700px) { .slt-goats { width: min(100%, 210px); } }

/* the nerve */
.slt-sc { width: 100%; display: flex; justify-content: center; }
.slt-nerve { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.slt-tube { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; }
.slt-na { fill: #b79bff; stroke: #e6dcff; stroke-width: 1; transition: cy .18s, opacity .5s; }
.slt-na.in { fill: var(--gold); stroke: #fff4d6; }
.slt-na.gone { opacity: 0; }
.slt-key circle { fill: #b79bff; stroke: #e6dcff; }
.slt-key text, .slt-end { font: 700 14px var(--sans); fill: var(--dim); }
.slt-pulse { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 10px rgba(252,192,80,.9)); }
.slt-pulse.on { opacity: 1; }
.slt-hand rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: stroke .3s, fill .3s; }
.slt-hand text { font: 800 14px var(--sans); fill: var(--text); }
.slt-hand.lit rect { stroke: var(--gold); fill: rgba(252,192,80,.18); }
.slt-hand.dead rect { stroke: var(--line); fill: transparent; }
.slt-hand.dead text { fill: var(--faint); }
.slt-hit { fill: transparent; cursor: pointer; }

/* the food */
.slt-food { display: flex; justify-content: center; gap: 14px; width: 100%; }
.slt-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; padding: 10px 10px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text); font-family: var(--sans); cursor: pointer; }
.slt-card.done { cursor: default; border-color: var(--gold); }
.slt-card img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(123,92,253,.25)); }
.slt-card b { font: 800 15px var(--sans); }
.slt-bar { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.slt-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: #b79bff; transition: width .9s cubic-bezier(.3,.7,.2,1); }
.slt-mg { font: 800 18px var(--sans); font-variant-numeric: tabular-nums; color: var(--dim); }
.slt-card.done .slt-mg { color: var(--text); }
.slt-note { margin-top: 8px; font-size: 13px; color: var(--faint); text-align: center; }
.slt-mini .slt-card { width: 130px; padding: 8px; }
.slt-mini .slt-card img { width: 64px; height: 64px; }
@media (max-height: 700px) { .slt-card img { width: 72px; height: 72px; } .slt-mini .slt-card img { width: 48px; height: 48px; } }

/* the tax */
.slt-coin { display: flex; justify-content: center; }
.slt-coin img { width: min(100%, 300px); height: auto; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }
@media (max-height: 700px) { .slt-coin img { width: 220px; } }