/* Bangladesh Corner. As each event scrolls into view its date pops up, then
   a small drawing of the event plays beside it: bdcorner.js picks the
   drawing and sets .seen, then .play, on the event, and .vis while the
   drawing is on screen. Dates and drawings start hidden only under .anim,
   which the page sets only when motion is allowed, so without it everything
   shows as it ends. */
.bdj-road { --spring: cubic-bezier(.3, 1.5, .5, 1); }
/* The journey's strip never makes the page itself scroll sideways. */
.bdj { overflow-x: clip; }
/* the decade labels are headings, drawn as the line's pills */
.bdj-dec { font: inherit; }
.bdj-card { position: relative; }
.bdj-card time { display: inline-block; position: relative; isolation: isolate; transform-origin: 0 60%; }
.bdj-card time::before { content: ""; position: absolute; inset: -2px -9px; z-index: -1; border-radius: 99px; background: var(--gold); opacity: 0; }
/* an event saved with no year or date at all, before the admin asked for a
   year, leaves no empty line at the top of its card */
.bdj-card time:empty { display: none; }
.bdj-road.anim .bdj-ev:not(.seen) time { opacity: 0; }
.bdj-road.anim .bdj-ev.seen time { animation: bdc-date .65s var(--spring) both; }
.bdj-road.anim .bdj-ev.seen time::before { animation: bdc-glow 1.4s .25s ease-out both; }
/* a date the page went past too fast to pop shows as it ends */
.bdj-road.anim .bdj-ev.still time, .bdj-road.anim .bdj-ev.still time::before { animation: none; }
@keyframes bdc-date { from { opacity: 0; transform: scale(.6); } 50% { opacity: 1; } }
@keyframes bdc-glow { 30% { opacity: .55; } }

/* The drawing: a round medallion in the card's top corner, beside the
   date and title, so the text below keeps the card's full width. */
.bdj-art { float: right; width: 72px; height: 72px; margin: -2px -6px 6px 12px; border-radius: 50%; overflow: hidden; background: #fbf7ef; box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px #e6dcc6, 0 18px 30px -18px rgba(20, 26, 46, .55); }
.bdj-card::after { content: ""; display: block; clear: both; }
.bdj-art svg { display: block; width: 100%; height: 100%; }
.bdj-art text { font-family: var(--fd); font-weight: 700; }
.bdj-road.anim .bdj-ev:not(.play) .bdj-art { opacity: 0; }
.bdj-road.anim .bdj-ev.play .bdj-art { animation: bdc-in .6s var(--spring) both; }
@keyframes bdc-in { from { opacity: 0; transform: scale(.5); } }
@media (max-width: 760px) {
  .bdj-art { width: 60px; height: 60px; margin: -4px -8px 4px 10px; }
}

/* Parts of the drawings. Each starts after its own delay (--d) and only
   moves transform and opacity; most keyframes start from a hidden or
   folded state and end on the part as drawn. */
.ba-pop, .ba-beat, .ba-ripple, .ba-ban, .ba-roll, .ba-gear, .ba-glow, .ba-spark, .ba-star, .ba-bloom, .ba-widen, .ba-blink, .ba-twist, .ba-rollin, .ba-tilt, .ba-puff { transform-box: fill-box; transform-origin: 50% 50%; }
.ba-grow, .ba-light, .ba-flicker, .ba-hop, .ba-fall { transform-box: fill-box; transform-origin: 50% 100%; }
.ba-flip, .ba-reel { transform-box: fill-box; transform-origin: 50% 0; }
.ba-growx, .ba-weavel, .ba-turn, .ba-unfurl, .ba-wave { transform-box: fill-box; transform-origin: 0 50%; }
.ba-weaver, .ba-net { transform-box: fill-box; transform-origin: 100% 50%; }
.ba-leafl { transform-box: fill-box; transform-origin: 100% 100%; }
.ba-leafr { transform-box: fill-box; transform-origin: 0 100%; }
.ba-flap { transform-box: fill-box; transform-origin: 30% 100%; }
/* these turn about the point their group was moved to */
.ba-rays, .ba-burst, .ba-orbit, .ba-swing, .ba-pump, .ba-buzz, .ba-sat, .ba-turnw, .ba-swirl, .ba-pendulum, .ba-spin { transform-box: view-box; transform-origin: 0 0; }
/* parts that are gone once their moment has passed */
.ba-spark, .ba-turn, .ba-grain, .ba-drip, .ba-storm, .ba-out, .ba-flip { opacity: 0; }

.play .ba-pop, .play .ba-leafl, .play .ba-leafr { animation: ba-pop .5s var(--d) var(--spring) both; }
.play .ba-grow { animation: ba-grow .7s var(--d) var(--ease) both; }
.play .ba-growx { animation: ba-growx .45s var(--d) var(--ease) both; }
.play .ba-weavel, .play .ba-weaver { animation: ba-growx .48s var(--d) ease-in-out both; }
.play .ba-widen { animation: ba-widen .45s var(--d) var(--ease) both; }
.play .ba-fade { animation: ba-fade var(--t, .6s) var(--d) ease both; }
.play .ba-seg { animation: ba-fade .14s var(--d) linear both; }
.play .ba-up { animation: ba-up .6s var(--d) var(--spring) both; }
.play .ba-in { animation: ba-in .7s var(--d) var(--ease) both; }
.play .ba-drop { animation: ba-drop .8s var(--d) ease-out both; }
.play .ba-fall { animation: ba-fall .8s var(--d) ease-in both; }
.play .ba-ripple { animation: ba-ripple 1.1s var(--d) ease-out both; }
.play .ba-beat { animation: ba-beat .5s var(--d) ease-in-out var(--n, 1) both; }
.play .ba-star { animation: ba-pop .5s var(--d) var(--spring) both, ba-twinkle 2s calc(var(--d) + .5s) ease-in-out infinite; }
.play .ba-glow { animation: ba-glow 1.2s var(--d) ease-out both; }
.play .ba-breathe { animation: ba-breathe 3.2s var(--d) ease-in-out infinite; }
@keyframes ba-pop { from { transform: scale(0); opacity: 0; } }
@keyframes ba-grow { from { transform: scaleY(0); } }
@keyframes ba-growx { from { transform: scaleX(0); } }
@keyframes ba-widen { from { transform: scaleX(0); opacity: 0; } }
@keyframes ba-fade { from { opacity: 0; } }
@keyframes ba-up { from { transform: translateY(var(--y, 16px)); opacity: 0; } }
@keyframes ba-in { from { transform: translateX(var(--x)); opacity: 0; } }
@keyframes ba-drop { 0% { transform: translateY(-48px); opacity: 0; } 50% { transform: translateY(2px); opacity: 1; } 70% { transform: translateY(-6px); } 100% { transform: none; } }
@keyframes ba-fall { 0% { transform: translateY(-30px); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(1px) scale(1.12, .88); } 100% { transform: none; } }
@keyframes ba-ripple { from { transform: scale(.2); opacity: 1; } }
@keyframes ba-beat { 35% { transform: scale(1.12); } 70% { transform: scale(.97); } }
@keyframes ba-twinkle { 50% { opacity: .45; } }
@keyframes ba-glow { from { transform: scale(.4); opacity: 0; } }
@keyframes ba-breathe { 50% { opacity: .65; } }

/* flags: hoisted or unfurled, then waving */
.play .ba-hoist { animation: ba-hoist 1.6s var(--d) cubic-bezier(.3, .7, .3, 1) both; }
.play .ba-unfurl { animation: ba-unfurl 1s var(--d) var(--ease) both; }
.play .ba-wave { animation: ba-wave 2.8s var(--d) ease-in-out infinite; }
@keyframes ba-hoist { from { transform: translateY(66px); opacity: 0; } 12% { opacity: 1; } }
@keyframes ba-unfurl { from { transform: scaleX(.05); opacity: 0; } 20% { opacity: 1; } }
@keyframes ba-wave { 50% { transform: skewY(-4deg) scaleX(.95); } }
/* sunrise, fireworks, candles and lamps */
.play .ba-rise { animation: ba-rise 1.8s var(--d) var(--ease) both; }
.play .ba-rays { animation: ba-rays 1.6s var(--d) var(--ease) both; }
.play .ba-burst { animation: ba-burst .8s var(--d) var(--ease) both, ba-twinkle 2.2s calc(var(--d) + .8s) ease-in-out infinite; }
.play .ba-spark { animation: ba-spark .5s var(--d) ease-out both; }
.play .ba-light { animation: ba-light .7s var(--d) var(--spring) both; }
.play .ba-flicker { animation: ba-flicker 1.8s var(--d) ease-in-out infinite; }
@keyframes ba-rise { from { transform: translateY(42px); } }
@keyframes ba-rays { from { transform: scale(.4) rotate(-50deg); opacity: 0; } }
@keyframes ba-burst { from { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } }
@keyframes ba-spark { from { transform: scale(0); opacity: 0; } 40% { transform: scale(1.4); opacity: 1; } to { opacity: 0; } }
@keyframes ba-light { from { transform: scale(0); } }
@keyframes ba-flicker { 25% { transform: scale(.93, 1.07) skewX(-3deg); } 50% { transform: scale(1.04, .95); } 75% { transform: scale(.97, 1.04) skewX(3deg); } }
/* book pages, the globe, the plane's arc and coins coming home */
.play .ba-turn { animation: ba-turn var(--t, .8s) var(--d) ease-in-out both; }
.play .ba-spinx { animation: ba-spinx 1.8s var(--d) cubic-bezier(.3, .6, .3, 1) both; }
.play .ba-orbit { animation: ba-orbit 1.9s var(--d) var(--ease) both; }
.play .ba-home { animation: ba-home .8s var(--d) ease-in-out both; }
@keyframes ba-turn { 0% { transform: none; opacity: 1; } 85% { transform: scaleX(-1); opacity: 1; } 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes ba-spinx { from { transform: translateX(-56px); } }
@keyframes ba-orbit { from { transform: rotate(-90deg); } }
@keyframes ba-home { from { transform: translate(34px, -46px) rotate(-30deg); opacity: 0; } 30% { opacity: 1; } }
/* the sewing machine, the glass of saline, the loom */
.play .ba-cloth { animation: ba-cloth 1.8s var(--d) linear both; }
.play .ba-needle { animation: ba-needle .36s var(--d) ease-in-out 5; }
.play .ba-wheel { animation: ba-wheel 1.8s var(--d) linear both; }
.play .ba-grain { animation: ba-grain .7s var(--d) ease-in both; }
.play .ba-sink { animation: ba-sink 1.1s var(--d) ease-in-out both; }
.play .ba-tilt { animation: ba-tilt .6s var(--d) ease-out both; }
.play .ba-shuttle { animation: ba-shuttle 2.2s var(--d) ease-in-out both; }
@keyframes ba-cloth { from { transform: translateX(30px); } }
@keyframes ba-needle { 50% { transform: translateY(5px); } }
@keyframes ba-wheel { from { transform: rotate(-720deg); } }
@keyframes ba-grain { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
@keyframes ba-sink { 0% { transform: translateY(-82px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes ba-tilt { from { transform: rotate(-30deg); } }
@keyframes ba-shuttle { 0% { transform: translate(0, 18px); } 22% { transform: translate(76px, 18px); } 25% { transform: translate(76px, 12px); } 47% { transform: translate(0, 12px); } 50% { transform: translate(0, 6px); } 72% { transform: translate(76px, 6px); } 75% { transform: translate(76px, 0); } 97%, 100% { transform: none; } }
/* water, storms and the dove */
.play .ba-flood { animation: ba-flood 3s var(--d) ease-in-out both; }
.play .ba-drift { animation: ba-drift 1s var(--d) linear 3; }
.play .ba-drift2 { animation: ba-drift2 1.4s var(--d) ease-out both; }
.play .ba-swirl { animation: ba-swirl 2.4s var(--d) cubic-bezier(.2, .6, .3, 1) both; }
.play .ba-storm { animation: ba-storm 2.2s var(--d) linear both; }
.play .ba-rain { animation: ba-rain .45s var(--d) linear 5; }
.play .ba-pump { animation: ba-pump 1s var(--d) ease-in-out both; }
.play .ba-out { animation: ba-out .8s var(--d) ease both; }
.play .ba-drip { animation: ba-drip .6s var(--d) ease-in both; }
.play .ba-fly { animation: ba-fly 1.3s var(--d) var(--ease) both; }
.play .ba-flap { animation: ba-flap .28s var(--d) ease-in-out 5; }
@keyframes ba-flood { 0% { transform: translateY(8px); } 40%, 58% { transform: translateY(-18px); } 100% { transform: none; } }
@keyframes ba-drift { from { transform: translateX(-20px); } }
@keyframes ba-drift2 { from { transform: translateX(-12px); opacity: 0; } }
@keyframes ba-swirl { 0% { transform: rotate(-600deg) scale(1.2); opacity: 1; } 70% { opacity: 1; } }
@keyframes ba-storm { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ba-rain { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
@keyframes ba-pump { 25%, 75% { transform: rotate(-20deg); } 50% { transform: none; } }
@keyframes ba-out { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ba-drip { 0% { transform: none; opacity: 1; } 100% { transform: translateY(var(--y, 20px)); opacity: 0; } }
@keyframes ba-fly { from { transform: translate(46px, -34px); opacity: 0; } 15% { opacity: 1; } }
@keyframes ba-flap { 50% { transform: scaleY(-.3); } }
/* school, mangroves, bridges and trains, hands, the harbour's crane (its
   cable pays out as fast as the container goes down: the same time and
   easing, from the length --k it has with the container --y higher) */
.play .ba-hop { animation: ba-hop 1.3s var(--d) both; }
.play .ba-blink { animation: ba-blink 4s var(--d) infinite; }
.play .ba-glide { animation: ba-glide 1.8s var(--d) cubic-bezier(.2, .7, .25, 1) both; }
.play .ba-shake { animation: ba-shake .5s var(--d) ease-in-out both; }
.play .ba-lower { animation: ba-lower 1.4s var(--d) ease-in-out both; }
.play .ba-reel { animation: ba-reel 1.4s var(--d) ease-in-out both; }
@keyframes ba-lower { from { transform: translateY(var(--y, -20px)); } }
@keyframes ba-reel { from { transform: scaleY(var(--k, .3)); } }
@keyframes ba-hop { 0% { transform: translateY(-36px); opacity: 0; animation-timing-function: ease-in; } 10% { opacity: 1; } 30% { transform: none; animation-timing-function: ease-out; } 33% { transform: scaleY(.9); } 50% { transform: translateY(-14px); animation-timing-function: ease-in; } 66% { transform: none; animation-timing-function: ease-out; } 69% { transform: scaleY(.95); } 82% { transform: translateY(-5px); animation-timing-function: ease-in; } 94%, 100% { transform: none; } }
@keyframes ba-blink { 0%, 44%, 52%, 100% { transform: none; } 48% { transform: scaleY(.1); } }
@keyframes ba-glide { from { transform: translateX(var(--x, -112px)); } }
@keyframes ba-shake { 25%, 75% { transform: translateY(-2.5px); } 50% { transform: translateY(2.5px); } }
/* games */
.play .ba-swing { animation: ba-swing 1.2s var(--d) both; }
.play .ba-hit { animation: ba-hit 1.2s var(--d) both; }
.play .ba-ban { animation: ba-ban .7s var(--d) var(--spring) both; }
.play .ba-bounce { animation: ba-bounce 1.4s var(--d) both; }
.play .ba-roll { animation: ba-roll 1.4s var(--d) ease-out both; }
.play .ba-net { animation: ba-net .5s var(--d) ease-out both; }
.play .ba-glint { animation: ba-glint 1.2s var(--d) ease-out both; }
.play .ba-rollin { animation: ba-rollin .9s var(--d) var(--ease) both; }
@keyframes ba-swing { 0%, 25% { transform: rotate(-110deg); animation-timing-function: ease-in; } 50% { transform: none; animation-timing-function: ease-out; } 70% { transform: rotate(45deg); animation-timing-function: ease-in-out; } 100% { transform: none; } }
@keyframes ba-hit { 0% { transform: translate(-20px, 62px); animation-timing-function: linear; } 50% { transform: translate(28px, 58px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 100% { transform: none; } }
@keyframes ba-ban { from { transform: scale(.3) rotate(-120deg); opacity: 0; } }
@keyframes ba-bounce {
  0% { transform: translate(-84px, -4px); animation-timing-function: ease-out; }
  17% { transform: translate(-64px, -36px); animation-timing-function: ease-in; }
  34% { transform: translate(-44px, 0); animation-timing-function: ease-out; }
  50% { transform: translate(-30px, -20px); animation-timing-function: ease-in; }
  66% { transform: translate(-16px, 0); animation-timing-function: ease-out; }
  80% { transform: translate(-7px, -7px); animation-timing-function: ease-in; }
  100% { transform: none; }
}
@keyframes ba-roll { from { transform: rotate(-720deg); } }
@keyframes ba-net { 40% { transform: scaleX(1.08); } }
@keyframes ba-glint { 0% { opacity: 0; } 40% { opacity: .9; } }
@keyframes ba-rollin { from { transform: translateX(28px) rotate(300deg); opacity: 0; } 30% { opacity: 1; } }
/* phone, helix, hard hat, wheel, flowers */
.play .ba-buzz { animation: ba-buzz .8s var(--d) linear both; }
.play .ba-flash { animation: ba-flash .4s var(--d) ease-in-out 3 both; }
.play .ba-twist { animation: ba-twist 3s calc(var(--i) * -.33s) ease-in-out infinite; }
.play .ba-settle { animation: ba-settle 1.2s var(--d) ease-out both; }
.play .ba-turnw { animation: ba-turnw 2.2s var(--d) cubic-bezier(.2, .6, .3, 1) both; }
.play .ba-bloom { animation: ba-bloom .6s var(--d) var(--spring) both; }
@keyframes ba-buzz { 10%, 30%, 50%, 70% { transform: rotate(-7deg); } 20%, 40%, 60%, 80% { transform: rotate(7deg); } 90%, 100% { transform: none; } }
@keyframes ba-flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .5; } }
@keyframes ba-twist { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes ba-settle { from { transform: translateY(-12px); opacity: 0; } }
@keyframes ba-turnw { from { transform: rotate(-540deg); } }
@keyframes ba-bloom { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
/* satellite, star, medal, factory, building, calendar */
.play .ba-sat { animation: ba-sat 2s var(--d) var(--ease) both; }
.play .ba-spin { animation: ba-spin 1s var(--d) var(--spring) both; }
.play .ba-pendulum { animation: ba-pendulum 1.6s var(--d) ease-in-out both; }
.play .ba-gear { animation: ba-gear 1.8s var(--d) var(--ease) both; }
.play .ba-puff { animation: ba-puff 1.2s var(--d) ease-out both; }
.play .ba-stack { animation: ba-stack .45s var(--d) var(--spring) both; }
.play .ba-flip { animation: ba-flip .6s var(--d) ease-in both; }
@keyframes ba-sat { from { transform: rotate(-42deg); } }
@keyframes ba-spin { from { transform: rotate(-144deg) scale(0); } }
@keyframes ba-pendulum { 0% { transform: rotate(30deg); } 30% { transform: rotate(-16deg); } 55% { transform: rotate(9deg); } 78% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes ba-gear { from { transform: rotate(-200deg); } }
@keyframes ba-puff { from { transform: translateY(10px) scale(.4); opacity: 0; } }
@keyframes ba-stack { from { transform: translateY(-16px); opacity: 0; } }
@keyframes ba-flip { 0% { transform: none; opacity: 1; } 99% { transform: scaleY(0); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }

/* Drawings rest while off screen, and so do the banner's drawing, the closing
   flag and the symbols (.paused). */
.bdj-road .bdj-ev:not(.vis) .bdj-art, .bdj-road .bdj-ev:not(.vis) .bdj-art * { animation-play-state: paused; }
:is(.bdh-art, .bdj-today, .bd-symbols).paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .bdj-road.anim .bdj-ev:not(.seen) time, .bdj-road.anim .bdj-ev:not(.play) .bdj-art { opacity: 1; }
  .bdj-card time, .bdj-card time::before, .bdj-art, .bdj-art * { animation: none !important; }
}
@media print {
  /* on paper the journey reads down the page, the cards in rows */
  .bdj.bdj { height: auto !important; padding: 14pt 0; }
  .bdj .bdj-pin { position: static !important; height: auto !important; overflow: visible !important; display: block !important; padding: 0 !important; }
  .bdj .bdj-road { transform: none !important; flex-wrap: wrap; width: auto; padding: 0; gap: 12pt; }
  .bdj-line, .bdj-node, .bdj-hint { display: none !important; }
  .bdj-dec { width: 100%; height: auto; }
  .bdj-ev, .bdj.alt .bdj-ev { display: block; width: calc(50% - 6pt); margin: 0 !important; break-inside: avoid; }
  .bdj .bdj-card { margin: 0 !important; }
  .bdj.clamp .bdj-card p:not(.bdj-src) { display: block !important; -webkit-line-clamp: none !important; overflow: visible !important; }
  .bdj.clamp .bdj-card .bdj-src { display: block !important; }
  .bdj-more, .bdj-dlg { display: none !important; }
  .bdj-today { margin: 0; }
  .bdj-art { display: none !important; }
  .bdj-card time { opacity: 1 !important; animation: none !important; }
  .bdj-flag *, .sym-art * { animation: none !important; }
}

/* The hero's palms sway about the crown, where their fronds meet. */
.bdh-art .bdh-crown { transform-box: view-box; transform-origin: 0 0; }

/* The symbols' loops, beside those in site.css: the water lily floats as a
   ripple spreads, the jackfruit sways on its stalk, the tiger blinks and the
   mango tree stirs. */
.sym-float { transform-box: fill-box; transform-origin: 50% 100%; animation: sym-float 4.2s ease-in-out infinite alternate; }
.sym-ripple { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: sym-ripple 4.2s ease-out infinite; }
.sym-hang { --sw: 3deg; transform-origin: 74px 12px; animation: sway 3.4s ease-in-out infinite alternate; }
.sym-leaf { --sw: 8deg; transform-box: fill-box; transform-origin: 0 50%; animation: sway 1.7s ease-in-out infinite alternate; }
.sym-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: ba-blink 4.6s 1.2s infinite; }
.sym-rustle { --sw: 2deg; transform-origin: 60px 70px; animation: sway 3.8s ease-in-out infinite alternate; }
@keyframes sym-float { from { transform: translateY(-1.5px) rotate(-2deg); } to { transform: translateY(1px) rotate(2deg); } }
@keyframes sym-ripple { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }