/* Operant conditioning lesson. All rules scoped under .oc-* */
.oc-cap { font: 600 12px var(--sans); color: var(--faint); text-align: center; }

/* the pigeon */
.oc-pig { flex: 1; width: 100%; max-width: 400px; margin: 0 auto; padding: 0 16px 4px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.oc-box { position: relative; height: 230px; border-radius: 20px; background: linear-gradient(180deg, rgba(123,92,253,.07), rgba(123,92,253,.16)); border: 1px solid var(--line-strong); overflow: hidden; }
.oc-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: rgba(234,227,215,.06); border-top: 1px solid var(--line); }
.oc-bird { position: absolute; left: 50%; bottom: 22px; width: 140px; margin-left: -80px; }
.oc-bird img { display: block; width: 100%; transform-origin: 50% 92%; will-change: transform; }
.oc-spin { position: absolute; left: 50%; top: 14px; width: 120px; margin-left: -70px; opacity: 0; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.oc-now { position: absolute; left: 14px; top: 12px; padding: 4px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); font: 800 14px var(--sans); color: var(--text); opacity: .35; transition: opacity .2s; }
.oc-now.on { opacity: 1; }
.oc-tray { position: absolute; right: 14px; bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.oc-tray i { width: 50px; height: 18px; border-radius: 0 0 25px 25px; background: linear-gradient(180deg, #C98C1B, #8A5E12); box-shadow: inset 0 5px 0 #E7B65A; }
.oc-tray span { font: 700 12px var(--sans); color: var(--dim); }
.oc-tray.fed i { animation: ocFed .6s ease-out; }
@keyframes ocFed { 0% { box-shadow: inset 0 5px 0 #E7B65A, 0 0 0 0 rgba(252,192,80,.9); } 100% { box-shadow: inset 0 5px 0 #E7B65A, 0 0 0 18px rgba(252,192,80,0); } }
.oc-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.oc-b { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.oc-bt { width: 100%; height: 46px; border-radius: 8px; background: rgba(234,227,215,.06); display: flex; align-items: flex-end; overflow: hidden; }
.oc-bt i { display: block; width: 100%; background: var(--violet); border-radius: 6px 6px 0 0; transition: height .4s cubic-bezier(.2,.8,.2,1), background .3s; }
.oc-b:last-child .oc-bt i { background: var(--gold); }
.oc-b.hot .oc-bt i { box-shadow: 0 0 12px rgba(252,192,80,.7); }
.oc-b span { font: 700 12px var(--sans); color: var(--dim); white-space: nowrap; }
.btn.oc-feed { font-size: 18px; }

/* food on a timer */
.oc-timer { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 360px; margin: 0 auto; }
.oc-clock { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font: 700 14px var(--sans); color: var(--text); }
.oc-clock svg { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.oc-birds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.oc-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oc-mini img { width: 78px; transform-origin: 50% 90%; }
.oc-mini em { min-height: 32px; font: 800 12.5px var(--sans); font-style: normal; color: var(--gold); text-align: center; opacity: 0; transition: opacity .4s; }
.oc-timer.on .oc-mini em { opacity: 1; }
.oc-timer.on .oc-mini:nth-child(1) img { animation: ocTurn 1.2s ease-in-out 2; }
.oc-timer.on .oc-mini:nth-child(2) img { animation: ocPoke .6s ease-in-out 4; }
.oc-timer.on .oc-mini:nth-child(3) img { animation: ocSwing 1s ease-in-out 2; }
@keyframes ocTurn { 50% { transform: scaleX(-1); } }
@keyframes ocPoke { 50% { transform: rotate(-22deg) translate(6px, -6px); } }
@keyframes ocSwing { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* two dogs */
.oc-dogs { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 360px; margin: 0 auto; }
.oc-dog { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.oc-dl { display: flex; flex-direction: column; align-items: center; width: 92px; flex: none; text-align: center; }
.oc-dl img { height: 70px; width: auto; transform-origin: 50% 100%; }
.oc-dl img.beg { animation: ocBeg .5s ease-in-out infinite; }
@keyframes ocBeg { 50% { transform: translateY(-5px) rotate(-3deg); } }
.oc-dl b { font: 800 14px var(--sans); color: var(--text); }
.oc-dl span { font: 600 12px/1.2 var(--sans); color: var(--dim); }
.oc-dbars { flex: 1; height: 72px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; align-items: end; }
.oc-dbars i { display: block; height: 0; border-radius: 4px 4px 0 0; background: var(--violet-bright); transition: height .25s; }
.oc-dbars i.zero { background: rgba(234,227,215,.18); }
.oc-quit { position: absolute; right: 12px; top: 8px; padding: 1px 8px; border-radius: 8px; font: 800 12px var(--sans); font-style: normal; color: var(--dim); border: 1px solid var(--line-strong); opacity: 0; transition: opacity .3s; }
.oc-dog.quit .oc-quit { opacity: 1; }
.oc-dog.quit .oc-dl img { filter: grayscale(.6) brightness(.8); }

.oc-nobars .oc-dbars, .oc-nobars .oc-cap { visibility: hidden; }

/* the loud night */
.oc-loud { display: flex; justify-content: center; }
.oc-ld { position: relative; }
.oc-ld img { height: 190px; width: auto; transform-origin: 50% 100%; }
.oc-ld img.beg { animation: ocBeg .4s ease-in-out infinite; }
.oc-woof { position: absolute; right: -36px; top: 6px; padding: 4px 10px; border-radius: 12px; background: var(--gold); color: #2B1E05; font: 900 16px var(--sans); letter-spacing: .06em; transform: rotate(8deg); animation: ocWoof .8s ease-in-out infinite; }
@keyframes ocWoof { 50% { transform: rotate(-4deg) scale(1.08); } }
.oc-futs { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; }
.oc-fut { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); }
.oc-fut b { font: 800 14px var(--sans); color: var(--text); }
.oc-fut .oc-dbars { flex: none; height: 64px; }
.oc-fut .oc-dbars i.peak { background: var(--gold); }
.oc-fut.mine { border-color: var(--violet-bright); box-shadow: 0 0 14px rgba(169,155,255,.3); }

@media (max-height: 700px) {
  .oc-box { height: 190px; }
  .oc-bird { width: 112px; margin-left: -64px; }
  .oc-bt { height: 34px; }
  .oc-mini img { width: 64px; }
  .oc-dl img { height: 56px; }
  .oc-dbars { height: 58px; }
  .oc-ld img { height: 150px; }
}