/* Viral vector lesson. All rules scoped under .vv-* */

.vv-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vv-sc > svg { display: block; width: 100%; height: auto; max-height: 44vh; overflow: visible; }
.vv-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.vv-hero { width: min(88%, 330px); }
.vv-hero img { width: 100%; display: block; }
.vv-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.vv-t.dim { fill: var(--dim); }
.vv-t.sm { font-size: 12px; fill: var(--dim); }
.vv-t.gold { fill: var(--gold); font-weight: 800; }
.vv-t.start { text-anchor: start; }

/* the virus */
.vv-hex { fill: rgba(216,85,85,.20); stroke: #FF8A8A; stroke-width: 2.5; }
.vv-spk { stroke: #FF8A8A; stroke-width: 2.5; stroke-linecap: round; }
.vv-gn rect { fill: var(--violet-bright); }
.vv-v.vv-empty .vv-gn, .vv-in.vv-off { opacity: 0; transition: opacity .4s; }
.vv-cell { fill: rgba(123,92,253,.08); stroke: var(--violet-bright); stroke-width: 2; }
.vv-vlab { transition: opacity .3s; }
.vv-vlab.vv-off { opacity: 0; }
.vv-hit { fill: rgba(252,192,80,.001); cursor: pointer; }
.vv-tapme { animation: vvNudge 1.8s ease-in-out 3; transform-box: view-box; }
@keyframes vvNudge { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.vv-kidg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vv-kidg.on { animation: vvPop .3s ease-out both; }
@keyframes vvPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* keep the shell, load the gene */
.vv-swap .vv-big .vv-gn { transition: opacity .5s, transform .5s; transform-box: fill-box; transform-origin: center; }
.vv-swap.vv-strip .vv-big .vv-gn { opacity: 0; transform: scale(.4); }
.vv-gold { opacity: 0; transition: opacity .5s; }
.vv-swap.vv-load .vv-gold { opacity: 1; }
.vv-gbar { fill: rgba(252,192,80,.22); stroke: var(--gold); stroke-width: 2; }
.vv-swap.vv-load .vv-hex { fill: rgba(252,192,80,.10); }
.vv-slab { transition: opacity .3s; }

/* one vector, one cell */
.vv-dose { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.vv-lane { display: flex; flex-direction: column; gap: 6px; }
.vv-lane span { font-size: 12.5px; color: var(--dim); line-height: 1.3; }
.vv-lrow { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; align-content: flex-start; }
.vv-lrow i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.vv-d1 { background: var(--gold); box-shadow: 0 0 0 3px rgba(252,192,80,.25); }
.vv-dn { background: #FF8A8A; animation: vvIn .25s ease-out both; }
.vv-dv { background: var(--gold); animation: vvIn .25s ease-out both; }
@keyframes vvIn { from { opacity: 0; transform: scale(.4); } }

/* cells dividing */
.vv-dc { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2; }
.vv-ddna { fill: var(--gold); }
.vv-dring { fill: none; stroke: var(--gold); stroke-width: 3; transition: opacity .6s; }
.vv-div.vv-mark .vv-laneA .vv-ddna { filter: drop-shadow(0 0 5px rgba(252,192,80,.8)); }
.vv-div.vv-fade .vv-laneB .vv-dc { stroke: var(--faint); fill: rgba(110,105,96,.12); transition: stroke .6s, fill .6s; }
.vv-div.vv-fade .vv-laneB .vv-dring { opacity: .3; }

/* the two uses */
.vv-tcr { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; }
.vv-ar { fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.vv-use.vv-grow .vv-ar { opacity: 1; }
.vv-mg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vv-mg.on { animation: vvPop .3s ease-out both; }
.vv-sclera { fill: #F2EEE6; stroke: #CFC6B4; stroke-width: 2; }
.vv-iris { fill: #6E8BA8; }
.vv-pupil { fill: #14202E; }
.vv-glow circle { fill: none; stroke: var(--gold); stroke-width: 0; opacity: 0; transition: opacity .6s, stroke-width .6s; }
.vv-eye.vv-lit .vv-glow circle { opacity: .9; stroke-width: 6; }
.vv-eye.vv-lit .vv-iris { fill: #8FB4D2; transition: fill .6s; }

/* antibodies on the shell */
.vv-ab path { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; }
.vv-abs { opacity: 0; transition: opacity .5s; }
.vv-imm.vv-grab .vv-abs { opacity: 1; }
.vv-imm.vv-grab .vv-common { opacity: .55; transition: opacity .5s; }
.vv-chimp { transition: filter .5s; }
.vv-imm.vv-through .vv-chimp { filter: drop-shadow(0 0 8px rgba(252,192,80,.75)); }
.vv-imm.vv-through .vv-common .vv-hex { stroke: var(--faint); }

@media (max-height: 700px) {
  .vv-sc > svg { max-height: 40vh; }
  .vv-hero { width: min(72%, 250px); }
  .vv-lrow i { width: 10px; height: 10px; }
}