/* Coffea lesson. All rules scoped under .cfa-* */
.cfa-sc { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.cfa-cap { text-align: center; font: 600 12.5px var(--sans); color: var(--dim); margin-top: 2px; }

/* the leaf */
.cfa-leaf { display: block; width: 100%; max-height: 250px; overflow: visible; }
.cfa-blade { fill: #2f6b3c; stroke: #5fae6b; stroke-width: 2; }
.cfa-rib { fill: none; stroke: #79c486; stroke-width: 2; opacity: .7; }
.cfa-speck { fill: var(--gold); animation: cfaGlint 1.8s ease-in-out infinite alternate; }
@keyframes cfaGlint { from { opacity: .55; } to { opacity: 1; } }
.cfa-bite circle { fill: var(--bg); opacity: 0; transition: opacity .25s; }
.cfa-sc.bit .cfa-bite circle { opacity: 1; }
.cfa-cat circle { fill: #8fd66e; stroke: #3f7d2c; stroke-width: 2; }
.cfa-cat circle.h { fill: #6cbf4f; }
.cfa-cat circle.e { fill: #10200c; stroke: none; }
.cfa-cat { animation: cfaCrawl 2.4s cubic-bezier(.3,.6,.3,1) both; transition: transform 1.2s ease-in, opacity 1.2s, filter .6s; }
@keyframes cfaCrawl { from { transform: translateX(110px); } }
.cfa-sc.bit .cfa-cat { animation: none; filter: saturate(.3) brightness(.8); }
.cfa-sc.drop .cfa-cat { transform: translate(20px, 150px) rotate(40deg); opacity: 0; }

/* photo */
.cfa-photo { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cfa-photo img { width: 100%; border-radius: 14px; display: block; }
.cfa-photo span { font: 600 12.5px var(--sans); color: var(--dim); }

/* the meadow */
.cfa-mead { height: 290px; }
.cfa-hive { position: absolute; left: 4px; top: 0; display: flex; align-items: center; gap: 6px; }
.cfa-hive svg { width: 38px; height: 38px; }
.cfa-hive path { fill: var(--gold-deep); stroke: var(--gold); stroke-width: 2; }
.cfa-hive span { font: 700 12.5px var(--sans); color: var(--dim); }
.cfa-flrow { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 6px; }
.cfa-fl { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 14px; background: transparent; border: 2px solid transparent; color: var(--text); font-family: var(--sans); cursor: pointer; transition: border-color .3s, background .3s; }
.cfa-fl svg { width: 100px; height: 132px; transition: filter .5s, opacity .5s; }
.cfa-fl b { font: 800 13px var(--sans); }
.cfa-out { min-height: 32px; font: 600 12px/1.3 var(--sans); color: var(--dim); text-align: center; }
.cfa-pet ellipse { fill: #f4efe4; stroke: #d6cdb9; stroke-width: 1; }
.cfa-ctr { fill: var(--gold); }
.cfa-drop { fill: rgba(169, 214, 255, .35); stroke: rgba(169, 214, 255, .8); stroke-width: 1.5; }
.cfa-dots circle { fill: var(--gold); }
.cfa-fl.tried { background: rgba(255,255,255,.03); border-color: var(--line); }
.cfa-fl.mem { border-color: var(--mint); background: rgba(63,214,154,.08); }
.cfa-fl.mem .cfa-out { color: var(--mint); }
.cfa-fl.faded svg { opacity: .55; }
.cfa-fl:disabled { cursor: default; opacity: 1; }
.cfa-bee { position: absolute; left: 0; top: 0; width: 44px; height: 32px; transition: transform .8s cubic-bezier(.4,.1,.3,1); z-index: 3; pointer-events: none; }
.cfa-bee svg { width: 100%; height: 100%; display: block; }
.cfa-bee.sip svg { animation: cfaSip .35s ease-in-out 2 alternate; }
@keyframes cfaSip { to { transform: translateY(6px) rotate(8deg); } }
.cfa-bee.spit svg { animation: cfaSpit .25s ease-out 2; }
@keyframes cfaSpit { 50% { transform: translateX(-6px) rotate(-14deg); } }

/* leaf vs nectar */
.cfa-two { display: flex; justify-content: center; gap: 18px; width: 100%; }
.cfa-half { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px; padding: 10px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cfa-half svg { width: 96px; height: 110px; }
.cfa-half b { font: 800 14px var(--sans); color: var(--text); }
.cfa-half span { font: 600 12.5px var(--sans); color: var(--dim); text-align: center; }

/* the feeders */
.cfa-yard { height: 236px; }
.cfa-hive.big { top: 92px; flex-direction: column; gap: 2px; }
.cfa-hive.big svg { width: 54px; height: 54px; }
.cfa-fd { position: absolute; right: 0; width: 156px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.cfa-fd.top { top: 4px; }
.cfa-fd.bot { bottom: 4px; border-color: var(--gold); }
.cfa-fd i { width: 100%; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(169,214,255,.75) 100%, transparent 0); border: 1px solid rgba(169,214,255,.6); transition: background-size 1s; background-size: 100% 100%; background-repeat: no-repeat; }
.cfa-yard.dry .cfa-fd i { background-size: 0% 100%; }
.cfa-fd b { font: 700 12.5px/1.25 var(--sans); color: var(--text); }
.cfa-st { font: 800 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cfa-dot { position: absolute; left: 50px; top: 106px; width: 26px; height: 19px; animation: cfaTripTop 2.2s ease-in-out infinite; transition: opacity .6s; }
.cfa-dot svg { width: 100%; height: 100%; display: block; }
.cfa-dot.bot { animation-name: cfaTripBot; }
.cfa-dot.quit { opacity: 0; }
.cfa-dot.quit.now { transition: none; }
@keyframes cfaTripTop { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--fx, 128px), -78px); } }
@keyframes cfaTripBot { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--fx, 128px), 78px); } }

@media (max-height: 700px) {
  .cfa-mead { height: 262px; }
  .cfa-fl svg { width: 90px; height: 118px; }
  .cfa-leaf { max-height: 210px; }
  .cfa-yard { height: 214px; }
  .cfa-hive.big { top: 80px; }
  .cfa-half svg { height: 88px; }
}