/* Hyperpalatable food lesson. All rules scoped under .hyp-* */
@keyframes hypIn { from { opacity: 0; translate: 0 12px; } }
@keyframes hypStir { 0% { rotate: 0deg; } 25% { rotate: -6deg; } 60% { rotate: 5deg; } 100% { rotate: 0deg; } }
@keyframes hypStamp { 0% { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }

/* the tasting lab */
.hyp-lab { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hyp-top { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hyp-glass { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: hypIn .5s ease-out both; }
.hyp-glass img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.hyp-glass.hyp-stir img { animation: hypStir .5s ease-in-out; }
.hyp-spoons { font: 800 13px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.hyp-panel { display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; }
.hyp-face svg { display: block; width: 44px; height: 44px; }
.hyp-head { fill: #f6c64f; stroke: #b9862a; stroke-width: 1.5; transition: fill .3s; }
.hyp-sour .hyp-head { fill: #d8d27a; }
.hyp-eye { fill: #3b2a0e; }
.hyp-mouth { fill: none; stroke: #3b2a0e; stroke-width: 2.4; stroke-linecap: round; transition: d .3s; }
.hyp-face { animation: hypIn .4s ease-out backwards; }
.hyp-face:nth-child(2) { animation-delay: .05s; } .hyp-face:nth-child(3) { animation-delay: .1s; } .hyp-face:nth-child(4) { animation-delay: .15s; }
.hyp-face:nth-child(5) { animation-delay: .2s; } .hyp-face:nth-child(6) { animation-delay: .25s; } .hyp-face:nth-child(7) { animation-delay: .3s; } .hyp-face:nth-child(8) { animation-delay: .35s; }

.hyp-chart { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: flex-end; }
.hyp-chart svg { display: block; width: 100%; height: auto; }
.hyp-chart small, .hyp-note { font: 600 12px var(--sans); color: var(--dim); }
.hyp-axis { stroke: var(--line-strong); stroke-width: 2; }
.hyp-at { fill: var(--dim); font: 700 13px var(--sans); text-anchor: middle; }
.hyp-tick { fill: var(--faint); font: 700 12px var(--sans); text-anchor: middle; }
.hyp-curve { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.hyp-dot { fill: var(--gold); stroke: #05070e; stroke-width: 2; }

/* Dr Pepper's 61 */
.hyp-cups { display: grid; grid-template-columns: repeat(11, 22px); gap: 6px; justify-content: center; }
.hyp-cup { display: block; width: 22px; height: 28px; border-radius: 3px 3px 7px 7px; background: linear-gradient(#7a1e2c, #4a0f19); box-shadow: inset 0 4px 0 rgba(255,255,255,.25); animation: hypIn .3s ease-out backwards; }
.hyp-cup.hyp-diet { background: linear-gradient(#c7ccd6, #8f97a6); }
.hyp-tasting .hyp-cup { animation: hypStir .5s ease-in-out; }
.hyp-tasting .hyp-cup:nth-child(3n+1) { animation-delay: .15s; } .hyp-tasting .hyp-cup:nth-child(3n+2) { animation-delay: .3s; }
.hyp-cupkey { display: flex; gap: 14px; font: 700 13px var(--sans); color: var(--dim); }
.hyp-cupkey span { display: flex; align-items: center; gap: 5px; }
.hyp-cupkey i { width: 12px; height: 14px; border-radius: 2px 2px 4px 4px; background: #7a1e2c; }
.hyp-cupkey i.hyp-diet { background: #c7ccd6; }
.hyp-tests { font: 700 15px var(--sans); color: var(--dim); }
.hyp-tests b { font: 900 30px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }

/* potato to chips */
.hyp-fry { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hyp-food { position: relative; width: 190px; height: 150px; }
.hyp-food img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition: opacity .8s, scale .8s; }
.hyp-done { opacity: 0; scale: .8; }
.hyp-fried .hyp-raw { opacity: 0; scale: 1.15; }
.hyp-fried .hyp-done { opacity: 1; scale: 1; }
.hyp-stamp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; padding: 4px 10px; border: 3px solid var(--violet-bright); border-radius: 8px; background: rgba(18,24,41,.85); color: var(--violet-bright); font: 900 17px var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.hyp-stamped .hyp-stamp { animation: hypStamp .5s cubic-bezier(.2,.8,.2,1) forwards; }
.hyp-bars { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.hyp-bars small { font: 600 12px var(--sans); color: var(--dim); text-align: right; }
.hyp-bar { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; font: 800 14px var(--sans); color: var(--text); }
.hyp-bar i { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.08); }
.hyp-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 7px; background: linear-gradient(90deg, #ffd27a, var(--gold)); transition: width 1s ease-out; }
.hyp-bar[data-k="salt"] b { background: linear-gradient(90deg, #dfe6f5, #b9c6e2); }
.hyp-bar em { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--text); }

/* sort cards */
.hyp-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); font: 800 16px var(--sans); color: var(--text); text-align: center; animation: hypIn .35s ease-out both; max-width: 260px; }
.hyp-card img { width: 96px; height: 96px; object-fit: contain; }
.hyp-card.hyp-ok { border-color: var(--mint); }
.hyp-card.hyp-no { border-color: var(--red); }
.hyp-why { font: 600 13px var(--sans); color: var(--dim); }

/* the shelf */
.hyp-store { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
.hyp-yr { font: 700 15px var(--sans); color: var(--dim); margin-bottom: 14px; }
.hyp-yr b { font: 900 34px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.hyp-yr span { color: var(--text); font-weight: 800; }
.hyp-shelf { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; justify-items: center; align-items: end; padding: 0 6px; }
.hyp-plank { width: 100%; height: 10px; margin: 0 0 18px; border-radius: 4px; background: #6b4a2c; box-shadow: 0 6px 0 #4a321d; }
.hyp-prod { position: relative; display: block; width: 44px; height: 58px; border-radius: 6px; animation: hypIn .4s ease-out backwards; }
.hyp-can { width: 38px; height: 50px; border-radius: 8px / 5px; }
.hyp-bag { height: 62px; border-radius: 10px 10px 6px 6px; clip-path: polygon(6% 0, 94% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.hyp-jar { width: 40px; height: 48px; border-radius: 6px 6px 12px 12px; box-shadow: inset 0 8px 0 rgba(0,0,0,.25); }
.hyp-c0 { background: #e2553f; } .hyp-c1 { background: #4f8fd6; } .hyp-c2 { background: #f0b43c; } .hyp-c3 { background: #5aa86a; } .hyp-c4 { background: #9b6bd8; }
.hyp-prod::after { content: ''; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 2px solid #05070e; scale: 0; transition: scale .3s cubic-bezier(.34,1.56,.64,1); }
.hyp-prod.hyp-hp::after { scale: 1; }
.hyp-prod:not(.hyp-hp) { opacity: .55; }
.hyp-key { display: flex; align-items: center; gap: 6px; margin-top: 0; font: 700 13px var(--sans); color: var(--dim); }
.hyp-key i { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }

/* the owners */
.hyp-tob { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hyp-tob img { width: 100%; max-width: 300px; height: auto; max-height: 150px; object-fit: contain; }
.hyp-odds { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.hyp-odds b { display: block; font: 900 26px/1.1 var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.hyp-odds.hyp-shown { opacity: 1; }

@media (max-height: 700px) {
  .hyp-glass img { width: 80px; height: 80px; }
  .hyp-panel { grid-template-columns: repeat(4, 40px); }
  .hyp-face svg { width: 40px; height: 40px; }
  .hyp-food { width: 160px; height: 120px; }
  .hyp-cups { grid-template-columns: repeat(11, 20px); gap: 5px; }
  .hyp-cup { width: 20px; height: 25px; }
  .hyp-card img { width: 80px; height: 80px; }
  .hyp-tob img { max-height: 120px; }
}