/* Economics art, polished waterfall: sales rise, then product, ads and delivery each take their bite from the top down,
   leaving what is kept, which lights up mint. */
.art--fall { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.fl { --col: 70px; --gap: 18px; position: relative; }
.fl-plot { position: relative; display: grid; grid-template-columns: repeat(5, var(--col)); gap: var(--gap); height: 170px; }
/* faint guide lines behind the bars */
.fl-plot::before { content: ""; position: absolute; inset: 0 0 -1px; pointer-events: none;
  background: linear-gradient(rgba(250, 250, 248, 0.06), rgba(250, 250, 248, 0.06)) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 41.5px, rgba(250, 250, 248, 0.035) 41.5px 42.5px); }
.fl-c { position: relative; }
.fl-b { position: absolute; left: 0; right: 0; top: var(--t, 0%); height: var(--h); border-radius: 7px; }
/* the dashed level line carried over to the next column */
.fl-c:not(:last-child)::after { content: ""; position: absolute; left: 100%; width: var(--gap); top: var(--lv); border-top: 1px dashed rgba(250, 250, 248, 0.22); }

.fl-b--sales { background: linear-gradient(180deg, rgba(250, 250, 248, 0.26), rgba(250, 250, 248, 0.1));
  box-shadow: inset 0 1px 0 rgba(250, 250, 248, 0.3), inset 0 0 0 0.5px rgba(250, 250, 248, 0.12); }
.fl-b--cut { background: repeating-linear-gradient(135deg, rgba(250, 250, 248, 0.13) 0 2px, transparent 2px 7px), rgba(250, 250, 248, 0.03);
  box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.16); }
.fl-b--keep { background: linear-gradient(180deg, #9af8dc, #5fdcb8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 44px -6px rgba(122, 244, 208, 0.6); }

.fl-ls { display: grid; grid-template-columns: repeat(5, var(--col)); gap: var(--gap); margin-top: 10px; }
.fl-l { font-size: 12px; color: var(--ink-3); text-align: center; white-space: nowrap; }
.fl-l--keep { color: var(--growth); font-weight: 500; }

/* sequence, played once (script adds .play): sales grow up, each cost drops in from the level above, the kept bar rises and glows */
.art--fall .fl-b--sales, .art--fall .fl-b--keep { transform-origin: 50% 100%; transform: scaleY(0); }
.art--fall .fl-b--cut { transform-origin: 50% 0; transform: scaleY(0); opacity: 0; }
.art--fall .fl-c::after, .art--fall .fl-l, .art--fall .art-note { opacity: 0; }
.art--fall.play .fl-b--sales { animation: flGrow .8s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
.art--fall.play .fl-b--cut { animation: flDrop .6s cubic-bezier(.3, 1.2, .5, 1) var(--d) forwards; }
.art--fall.play .fl-b--keep { animation: flGrow .9s cubic-bezier(.2, .8, .2, 1) 2.55s forwards; }
.art--fall.play .fl-c::after { animation: flFade .4s ease calc(var(--d) - .15s) forwards; }
.art--fall.play .fl-l { animation: flFade .5s ease var(--d) forwards; }
.art--fall.play .art-note { animation: flFade .6s ease 3.2s forwards; }
@keyframes flGrow { to { transform: scaleY(1); } }
@keyframes flDrop { to { transform: scaleY(1); opacity: 1; } }
@keyframes flFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .art--fall .fl-b--sales, .art--fall .fl-b--keep, .art--fall .fl-b--cut, .art--fall.play .fl-b--sales, .art--fall.play .fl-b--keep, .art--fall.play .fl-b--cut { transform: none; opacity: 1; animation: none; }
  .art--fall .fl-c::after, .art--fall .fl-l, .art--fall .art-note, .art--fall.play .fl-c::after, .art--fall.play .fl-l, .art--fall.play .art-note { opacity: 1; animation: none; }
}
@media (max-width: 1100px) { .art--fall { align-items: flex-start; } }
@media (max-width: 860px) {
  .fl { --col: 48px; --gap: 9px; }
  .fl-plot { height: 150px; }
  .fl-l { font-size: 11px; }
}