/* Coffee lesson. All rules scoped under .cof-* */

/* the night */
.cof-night { width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cof-night > span { font: 600 12px var(--sans); color: var(--faint); }
.cof-ph { position: relative; width: 100%; border-radius: 14px; overflow: hidden; }
.cof-ph img { display: block; width: 100%; animation: cofZoom 9s ease-out both; filter: brightness(.82) saturate(1.05); }
@keyframes cofZoom { from { transform: scale(1.12); filter: brightness(.35); } }
.cof-glow { position: absolute; left: 28%; top: 52%; width: 140px; height: 140px; margin: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,60,.45), transparent 65%); animation: cofFlicker 1.3s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes cofFlicker { from { opacity: .55; scale: .94; } to { opacity: 1; scale: 1.05; } }
.cof-steam { position: absolute; bottom: 30%; width: 14px; height: 50px; border-radius: 50%; background: linear-gradient(0deg, rgba(255,255,255,.35), transparent); filter: blur(4px); animation: cofSteam 3s ease-in infinite; }
.cof-steam.a { left: 79%; }
.cof-steam.b { left: 83%; animation-delay: 1.4s; }
@keyframes cofSteam { from { transform: translateY(14px) scaleY(.6); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-40px) scaleY(1.2); opacity: 0; } }

/* the map */
.cof-mapbox { position: relative; width: 100%; max-width: 330px; margin: 0 auto; }
.cof-map { display: block; width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.cof-land, .cof-land2 { fill: #2b2a24; }
.cof-sea { fill: #0f1a33; stroke: #3d4a6b; stroke-width: 1.5; stroke-linejoin: round; }
.cof-land2 { stroke: #3d4a6b; stroke-width: 1.5; stroke-linejoin: round; }
.cof-city { opacity: .22; transition: opacity .4s; }
.cof-city.on { opacity: 1; }
.cof-dot { fill: var(--faint); }
.cof-city.on .cof-dot { fill: var(--gold); }
.cof-halo { fill: rgba(252,192,80,.0); }
.cof-city.on .cof-halo { fill: rgba(252,192,80,.28); animation: cofPing .9s ease-out 1; transform-box: fill-box; transform-origin: center; }
@keyframes cofPing { from { transform: scale(2.4); opacity: 0; } }
.cof-city text { font: 800 23px var(--sans); fill: var(--text); paint-order: stroke; stroke: #0a0e1a; stroke-width: 5px; }
.cof-year { position: absolute; left: 8px; bottom: 8px; display: flex; flex-direction: column; padding: 4px 10px; border-radius: 10px; background: rgba(10,14,26,.82); border: 1px solid var(--line-strong); }
.cof-year span { font: 700 11.5px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.cof-year b { font: 800 22px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }

/* the coffeehouse */
.cof-house { position: relative; width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cof-house > img { display: block; width: 100%; border-radius: 14px; transition: filter .8s; }
.cof-house.dim > img { filter: brightness(.45); }
.cof-house.talk > img { max-height: 150px; object-fit: cover; object-position: 50% 30%; }
.cof-cap { font: 600 12px var(--sans); color: var(--faint); text-align: center; }
.cof-talk { width: 100%; }
.cof-talk .choices.cof-bubs { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cof-talk .choice { position: relative; min-height: 44px; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--raised); border: 1px solid var(--line-strong); justify-content: flex-start; text-align: left; }
.cof-talk .choice:nth-child(2) { align-self: flex-end; border-radius: 16px 16px 4px 16px; }
.cof-talk .choice.right { border-color: var(--mint); background: rgba(63,214,154,.1); }
.cof-talk .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.1); }
.cof-bt { font: 600 14px/1.3 var(--sans); color: var(--text); }
.cof-procl { position: absolute; left: 50%; top: 10px; width: 230px; margin-left: -115px; padding: 10px 14px; background: #efe6cf; color: #2a1d0e; border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.5); text-align: center; opacity: 0; transform: translateY(-30px) rotate(-6deg) scale(1.3); transition: opacity .3s, transform .35s cubic-bezier(.3,1.4,.5,1), filter .5s; }
.cof-procl.in { opacity: 1; transform: rotate(-3deg); }
.cof-procl.torn { opacity: .4; filter: grayscale(1); transform: rotate(8deg) translateY(30px) scale(.9); }
.cof-procl small { display: block; font: 700 11.5px var(--serif); letter-spacing: .1em; text-transform: uppercase; }
.cof-procl b { display: block; font: 700 16px/1.2 var(--serif); }
.cof-cry { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.cof-cry span { align-self: flex-start; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); border: 1px solid var(--line-strong); font: 700 13.5px var(--sans); color: var(--text); animation: cofPop .35s cubic-bezier(.3,1.4,.5,1) both; }
.cof-cry span:nth-child(2) { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
@keyframes cofPop { from { opacity: 0; transform: scale(.6); } }

@media (max-height: 700px) {
  .cof-mapbox { max-width: 270px; }
  .cof-house { max-width: 300px; }
  .cof-procl { top: 4px; }
  .cof-house.talk > img { max-height: 110px; }
  .cof-procl b { font-size: 14.5px; }
}