/* Food additive lesson. All rules scoped under .fad-* */
@keyframes fadIn { from { opacity: 0; translate: 0 12px; } }
@keyframes fadShake { 0%, 100% { rotate: 0deg; translate: 0 0; } 15% { rotate: -14deg; translate: -8px -6px; } 35% { rotate: 12deg; translate: 8px -10px; } 55% { rotate: -10deg; translate: -6px -4px; } 75% { rotate: 8deg; translate: 4px -2px; } }
@keyframes fadJiggle { 50% { translate: .6px -.6px; } }
@keyframes fadPop { 0% { scale: .2; opacity: 0; } 70% { scale: 1.12; opacity: 1; } 100% { scale: 1; opacity: 1; } }

/* the jar */
.fad-bench { width: 100%; max-width: 360px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.fad-jar { width: 150px; padding: 0; border: 0; background: none; cursor: pointer; animation: fadIn .5s ease-out both; }
.fad-jar:disabled { cursor: default; opacity: 1; }
.fad-jar svg { display: block; width: 100%; height: auto; overflow: visible; }
.fad-jar.fad-shake { animation: fadShake .9s ease-in-out; transform-origin: 50% 90%; }
.fad-glass { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.55); stroke-width: 3; }
.fad-lid { fill: #c9a24a; stroke: #8a6a22; stroke-width: 2; }
.fad-shine { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 4; stroke-linecap: round; }
.fad-vin { fill: #c76a52; opacity: .55; }
.fad-oil { fill: #f2b632; }
.fad-cream { fill: #f3dc8c; opacity: 0; transition: opacity 1.2s; }
.fad-drop { fill: #f2b632; }
.fad-blob { fill: #ffb81c; stroke: #e08a00; stroke-width: 1.5; }
.fad-creamy .fad-cream { opacity: .85; }
.fad-creamy .fad-drop { fill: #ffd76a; animation: fadJiggle 1.4s ease-in-out infinite; }
.fad-yolk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; min-width: 96px; border: 0; background: none; color: var(--text); font: 800 14px var(--sans); cursor: pointer; transition: translate .6s cubic-bezier(.5,0,.75,0), scale .6s, opacity .6s; animation: fadIn .5s .15s ease-out backwards; }
.fad-yolk:disabled { cursor: default; color: var(--text); opacity: 1; }
.fad-yolk img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.fad-yolk.fad-in { translate: -150px -10px; scale: .3; opacity: 0; }

/* where lecithin sits */
.fad-zoom { position: relative; width: 100%; max-width: 340px; }
.fad-zs { display: block; width: 100%; height: auto; }
.fad-water { fill: rgba(199,106,82,.28); stroke: var(--line); }
.fad-big { fill: #f2b632; stroke: #c98a12; stroke-width: 2; }
.fad-zl { fill: var(--dim); font: 700 13px var(--sans); text-anchor: end; }
.fad-mol line { stroke: #8a5a00; stroke-width: 3; stroke-linecap: round; }
.fad-mol circle { fill: #fff; stroke: #8a5a00; stroke-width: 2; }
.fad-spots { position: absolute; inset: 0; display: block; }
.fad-spots > .choice { position: absolute; translate: -50% -50%; min-height: 44px; padding: 6px 10px; font-size: 13.5px; font-weight: 800; white-space: nowrap; text-align: center; }
.fad-spots > .choice:nth-child(1) { left: 50%; top: 15%; }
.fad-spots > .choice:nth-child(2) { left: 50%; top: 55%; }
.fad-spots > .choice:nth-child(3) { left: 20%; top: 88%; }
.fad-spots > .choice { transition: opacity .4s; }
.fad-lined .fad-spots > .choice { opacity: 0; }

/* the codes */
.fad-codes { width: 100%; max-width: 340px; }
.fad-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fad-tiles > .choice { position: relative; display: block; min-height: 82px; padding: 0; text-align: center; overflow: hidden; }
.fad-f, .fad-b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: opacity .45s, translate .45s; }
.fad-f b, .fad-b b { font: 900 22px var(--sans); color: var(--text); }
.fad-b b { font-size: 17px; color: var(--gold); }
.fad-f small, .fad-b small { font: 700 13px var(--sans); color: var(--dim); }
.fad-b { opacity: 0; translate: 0 18px; }
.fad-flip .fad-f { opacity: 0; translate: 0 -18px; }
.fad-flip .fad-b { opacity: 1; translate: 0 0; }

/* kombu */
.fad-kombu { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.fad-kombu img { width: 100%; max-width: 420px; height: auto; object-fit: contain; animation: fadIn .6s ease-out both; }

/* the shakers */
.fad-broth { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fad-bowl img { width: 200px; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.fad-shelf { width: 100%; }
.fad-shakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fad-shakers > .choice { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 0 8px; min-height: 92px; border-radius: 14px 14px 18px 18px; overflow: hidden; }
.fad-cap { display: block; width: 100%; height: 16px; background: repeating-linear-gradient(90deg, #b8bfcc 0 6px, #8f97a6 6px 8px); }
.fad-lb { display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.fad-lb b { font: 900 20px var(--sans); }
.fad-lb small { font: 700 13px var(--sans); color: var(--dim); }

/* the limit */
.fad-dose { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fad-grid { display: grid; grid-template-columns: repeat(10, 16px); gap: 4px; }
.fad-cube { display: block; width: 16px; height: 16px; border-radius: 4px; background: #e6edf7; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); animation: fadPop .3s ease-out backwards; transition: opacity .6s, scale .6s; }
.fad-cube.fad-gone { opacity: .1; scale: .6; }
.fad-cube.fad-last { background: var(--gold); box-shadow: 0 0 12px rgba(252,192,80,.8); scale: 1.25; }
.fad-dl { font: 800 14px var(--sans); color: var(--dim); }

/* the cans */
.fad-canwrap { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fad-cans { display: grid; grid-template-columns: repeat(7, 40px); gap: 4px; justify-content: center; }
.fad-cans { min-height: 108px; }
.fad-can { width: 40px; height: 52px; object-fit: contain; animation: fadPop .3s ease-out backwards; }
.fad-can.fad-maybe { opacity: .5; }
.fad-cancap { font: 700 14px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.fad-cancap b { font: 900 22px var(--sans); color: var(--gold); }
.fad-shown .fad-cancap { opacity: 1; }

@media (max-height: 700px) {
  .fad-jar { width: 124px; }
  .fad-yolk img { width: 76px; height: 76px; }
  .fad-bowl img { width: 150px; }
  .fad-tiles > .choice { min-height: 70px; }
  .fad-shakers > .choice { min-height: 82px; }
  .fad-can { width: 34px; height: 44px; }
  .fad-cans { grid-template-columns: repeat(7, 34px); }
}