/* Cavendish Banana lesson. All rules scoped under .cav-* */
.cav-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cav-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; line-height: 1.3; }

/* the cut */
.cav-cut { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.cav-half { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.cav-cut.open .cav-half.l { transform: translateX(-46px) rotate(-10deg); }
.cav-cut.open .cav-half.r { transform: translateX(46px) rotate(10deg); }
.cav-knife { transform: translateY(-80px); opacity: 0; transition: transform .45s cubic-bezier(.5,0,.3,1), opacity .2s; }
.cav-cut.cut .cav-knife { transform: translateY(20px); opacity: 1; }
.cav-cut.open .cav-knife { transform: translateY(-140px); opacity: 0; transition-duration: .5s; }
.cav-face { transform-box: fill-box; transform-origin: center; transform: scale(.15); opacity: 0; transition: transform .55s cubic-bezier(.3,1.3,.6,1), opacity .3s; }
.cav-cut.open .cav-face { transform: none; opacity: 1; }
.cav-speck { fill: #3b2c1a; transition: r .4s, fill .4s; }
.cav-hit { fill: transparent; cursor: pointer; }
.cav-cut.found .cav-speck, .cav-fig svg.found .cav-speck { fill: #7a4a12; }
.cav-cut.found .cav-hit { fill: rgba(252, 192, 80, .16); stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; }

.cav-two { display: flex; gap: 14px; justify-content: center; align-items: flex-start; width: 100%; }
.cav-fig { margin: 0; flex: 0 1 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cav-fig svg, .cav-fig img { width: 100%; max-width: 150px; height: 160px; object-fit: cover; border-radius: 14px; }
.cav-fig svg { background: var(--surface); }
.cav-fig figcaption { font: 700 13px var(--sans); color: var(--dim); }

/* the shoot */
.cav-yard { position: relative; width: 100%; max-width: 340px; height: 230px; }
.cav-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 13px; background: linear-gradient(#6b4a2b, #4a321c); }
.cav-mom { position: absolute; left: 2%; bottom: 10px; height: 210px; width: auto; }
.cav-hole { position: absolute; right: 9%; bottom: 8px; width: 84px; height: 20px; border-radius: 50%; border: 2px dashed rgba(252, 192, 80, .8); background: rgba(20, 12, 4, .6); }
.cav-pup { position: absolute; left: 38%; bottom: 8px; width: 64px; height: 84px; display: flex; align-items: flex-end; justify-content: center; touch-action: none; cursor: grab; z-index: 2; }
.cav-pup img { height: 74px; width: auto; pointer-events: none; transition: transform .2s; }
.cav-pup.held img { transform: scale(1.12) translateY(-6px); }
.cav-pup.gone { opacity: 0; transition: opacity .4s; }
.cav-kid { position: absolute; right: calc(9% - 24px); bottom: 10px; height: 150px; width: auto; transform-origin: 50% 100%; transform: scale(.15); }

.cav-farm { display: grid; grid-template-columns: repeat(5, 58px); gap: 2px 8px; justify-content: center; padding: 8px 10px 12px; border-radius: 16px; background: linear-gradient(transparent 60%, rgba(107, 74, 43, .55)); }
.cav-fp { width: 58px; height: 66px; object-fit: contain; animation: cav-pop .45s cubic-bezier(.3,1.3,.6,1) backwards; }
@keyframes cav-pop { from { opacity: 0; transform: scale(.3) translateY(14px); } }

/* two farms */
.cav-farms { display: flex; gap: 10px; width: 100%; max-width: 350px; }
.cav-pl { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cav-pl-h { font: 800 13px var(--sans); color: var(--text); }
.cav-soil { position: relative; width: 100%; padding: 6px 4px 8px; border-radius: 14px; background: linear-gradient(#2a2016, #3d2c1a); border: 1px solid rgba(201, 140, 27, .35); overflow: hidden; cursor: pointer; }
.cav-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2px; }
.cav-gp { width: 100%; height: 44px; object-fit: contain; transform-origin: 50% 100%; transition: filter .5s, transform .5s, opacity .5s; }
.cav-gp.k1 { filter: hue-rotate(-75deg) saturate(1.4); }
.cav-gp.k2 { filter: hue-rotate(40deg) brightness(.9); transform: scale(1.12); }
.cav-gp.k3 { filter: hue-rotate(150deg) saturate(.8); transform: scale(.86); }
.cav-gp.dead { filter: grayscale(.9) sepia(.9) brightness(.55); transform: rotate(9deg) scale(.88); opacity: .8; }
.cav-blot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(rgba(158, 102, 40, .85), rgba(158, 102, 40, 0) 70%); transform: scale(.2); transition: transform 1.8s ease-out; }
.cav-blot.on { transform: scale(16); }
.cav-dead { font: 600 13px var(--sans); color: var(--dim); min-height: 18px; }
.cav-dead b { color: var(--text); font-weight: 800; }

/* Gros Michel */
.cav-photo { margin: 0; width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cav-photo img { width: 100%; height: 230px; object-fit: cover; object-position: 50% 30%; border-radius: 16px; }
.cav-photo figcaption { font-size: 12.5px; color: var(--faint); text-align: center; }
@media (max-height: 700px) { .cav-photo img { height: 180px; } }

/* the map */
.cav-map { position: relative; width: 100%; max-width: 360px; }
.cav-map img { width: 100%; display: block; }
.cav-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #c9852a; box-shadow: 0 0 0 0 rgba(201, 133, 42, .7); transform: scale(0); transition: transform .4s cubic-bezier(.3,1.5,.6,1); }
.cav-dot.on { transform: scale(1); animation: cav-ping 1.4s ease-out 1; }
.cav-dot.last { background: var(--gold); width: 16px; height: 16px; margin: -8px 0 0 -8px; }
@keyframes cav-ping { from { box-shadow: 0 0 0 0 rgba(201, 133, 42, .8); } to { box-shadow: 0 0 0 18px rgba(201, 133, 42, 0); } }
.cav-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; width: 100%; max-width: 340px; }
.cav-li { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 8px; background: var(--surface); font-size: 13px; animation: cav-pop .35s ease-out backwards; }
.cav-li b { font-weight: 800; color: var(--text); }
.cav-li span { color: var(--dim); }
.cav-li.last { background: rgba(252, 192, 80, .16); }
.cav-li.last span { color: var(--gold); font-weight: 700; }

@media (max-height: 700px) {
  .cav-yard { height: 200px; }
  .cav-mom { height: 180px; }
  .cav-kid { height: 130px; }
  .cav-fp { height: 54px; }
  .cav-fig svg, .cav-fig img { height: 140px; }
  .cav-gp { height: 38px; }
}