/* "Блог" and every article (archive-mch_article.php, single-mch_article.php, inc/blog.php): letters that came as paper
   planes. Above them a strip of sky where now and then a paper plane flies across from left to right (its nose to the
   right), leaving a dotted trail. Each article's plane glides in and lands, the date is stamped beside it and the
   letter unfolds; a click folds it up and the plane takes off before the article opens. Beside an article's text a
   paper plane flies down a strip of sky as far as the reader has got: nose down while they read on, nose up when they
   scroll back. */

@property --open { syntax: '<number>'; inherits: true; initial-value: 1; }

.bl { position: relative; padding: 0 0 110px; overflow-x: clip; }
.bl-wrap, .bl-read { padding: 0 30px; }
.bl-none { text-align: center; }

/* ---------- The sky at the top, a paper plane flying across it ---------- */
.bl-sky { position: relative; height: 140px; margin: -50px 0 14px; overflow: hidden; pointer-events: none; }
.bl-sky__clouds { position: absolute; left: 0; top: 18px; width: 3720px; height: 110px; background: url('../images/clouds2.svg') repeat-x 0 0 / 960px 110px; opacity: .9; animation: bl-drift 90s linear infinite; }
@keyframes bl-drift { to { transform: translateX(-960px); } }
.bl-sky__flyer { position: absolute; z-index: 2; left: 0; top: 0; width: 76px; height: 49px; opacity: 0; offset-rotate: auto; offset-anchor: center; }
.bl-sky__flyer .bl-plane__svg { display: block; width: 100%; height: 100%; }
.bl-trail { position: absolute; z-index: 1; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #9ccbea; pointer-events: none; }

/* ---------- The list: a plane and its letter ---------- */
.bl .bl-list { display: grid; gap: 70px; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.bl .bl-list > li { margin: 0; padding: 0; }
.bl .bl-list > li::before { display: none; }
.bl-item { --c: #f58a22; position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 18px; }

.bl-plane { position: relative; display: block; height: 236px; text-decoration: none; }
/* its shadow where it has landed */
.bl-plane::before { content: ''; position: absolute; left: 30px; top: 128px; width: 124px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 66, 36, .22), transparent); transition: opacity .6s .8s; }
.bl-js .bl-item:not(.is-in) .bl-plane::before { opacity: 0; }
.bl-plane__fly { position: absolute; left: 16px; top: 34px; width: 152px; height: 98px; transition: translate .9s cubic-bezier(.4, 0, .7, .4), rotate .9s ease-in, opacity .6s .3s; }
.bl-plane__svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* landed, it still floats a little on the air */
.bl-item.is-in .bl-plane__svg { animation: bl-hover 3.4s ease-in-out calc(1.4s + var(--k) * -0.7s) infinite alternate; }
@keyframes bl-hover { from { transform: translateY(-2px) rotate(-2deg); } to { transform: translateY(3px) rotate(1.5deg); } }
.bl-item:hover .bl-plane__fly { translate: 8px -6px; rotate: -5deg; transition: translate .5s cubic-bezier(.34, 1.4, .64, 1), rotate .5s cubic-bezier(.34, 1.4, .64, 1); }

/* the date on a round stamp (the old blog's date circles) */
/* (bigger again on 2026-11-12 – the client: "кръгчето с датата трябваше да стане по-голямо") */
.bl-tag { position: absolute; left: 62px; top: 106px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 124px; height: 124px; border-radius: 50%; background: var(--c); color: #fff; font: 700 17px/1.1 'Open Sans', Arial, sans-serif; text-align: center; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .38); rotate: -8deg; }
.bl-tag::before { content: ''; position: absolute; inset: 6px; border: 2px dashed rgba(255, 255, 255, .65); border-radius: 50%; }
.bl-tag b { font-size: 44px; line-height: .95; }
.bl-tag span:last-child { opacity: .85; }

/* the letter, unfolded out of the plane: --open 0 folded up at the top, 1 open to its full length; the two creases stay */
.bl-letter { position: relative; }
.bl-letter__paper { position: relative; padding: 34px 44px 40px; border-top: 5px solid var(--c); border-radius: 4px 4px 10px 10px; background: linear-gradient(transparent calc(33.3% - 1px), rgba(150, 120, 80, .09) 33.3%, rgba(255, 255, 255, .8) calc(33.3% + 1px), transparent calc(33.3% + 2px)), linear-gradient(transparent calc(66.6% - 1px), rgba(150, 120, 80, .09) 66.6%, rgba(255, 255, 255, .8) calc(66.6% + 1px), transparent calc(66.6% + 2px)), radial-gradient(ellipse at 50% 40%, #fffdf8 55%, #f8eedb); box-shadow: 0 30px 40px -32px rgba(70, 40, 20, .5); clip-path: inset(-10px -10px calc((1 - var(--open)) * 100%) -10px); }
.bl .bl-meta { margin: 0 0 8px; font: 700 12px/1.4 'Open Sans', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9aa3a0; }
.bl .bl-title { margin: 0 0 14px; font: 400 30px/1.25 'Cabin Sketch', Arial, sans-serif; color: #3c4741; }
.bl .bl-title a { color: inherit; text-decoration: none; transition: color .3s; }
.bl .bl-title a:hover { color: var(--c); }
.bl .bl-excerpt { margin: 0 0 18px; font: 400 16px/1.7 'Open Sans', Arial, sans-serif; color: #3c4741; }
.bl a.bl-more { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.2 'Open Sans', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--c); text-decoration: none; }
.bl a.bl-more::after { content: '→'; font-size: 18px; transition: translate .3s; }
.bl a.bl-more:hover::after { translate: 6px 0; }
.bg .bl .bl-title, .bg .bl .bl-trip__title, .bg .bl .bl-text h3 { font-family: 'Neucha', Arial, sans-serif !important; }

/* ---------- The entrance: the plane glides in and lands, the date is stamped, the letter unfolds ---------- */
.bl-js .bl-item:not(.is-in) .bl-plane__fly { opacity: 0; }
.bl-js .bl-item:not(.is-in) .bl-tag { opacity: 0; }
.bl-js .bl-item:not(.is-in) .bl-letter { --open: 0; }
.bl-js .bl-item.is-in .bl-plane__fly { animation: bl-glide 1.3s cubic-bezier(.25, .7, .35, 1) backwards; }
@keyframes bl-glide {
	0% { opacity: 0; translate: -230px -120px; rotate: 16deg; }
	15% { opacity: 1; }
	70% { translate: 8px 4px; rotate: 6deg; }
	86% { translate: -2px -3px; rotate: -2deg; }
	100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
.bl-js .bl-item.is-in .bl-tag { animation: bl-stamp .55s cubic-bezier(.3, 1.6, .5, 1) .95s backwards; }
@keyframes bl-stamp { from { opacity: 0; scale: 1.8; } 60% { opacity: 1; } to { opacity: 1; scale: 1; } }
.bl-item.is-in .bl-letter { transition: --open 1s cubic-bezier(.3, .7, .3, 1) 1.1s; }

/* a click: the letter folds up and the plane takes off up and to the right before the article opens */
.bl-item.is-leaving .bl-letter { --open: 0; transition: --open .45s cubic-bezier(.6, 0, .8, .4); }
.bl-item.is-leaving .bl-plane__fly, .bl-js .bl-item.is-leaving .bl-plane__fly { animation: none; translate: 180px -110px; rotate: -24deg; opacity: 0; transition: translate .55s cubic-bezier(.5, 0, .9, .5), rotate .3s, opacity .3s .25s; }

/* ---------- One article ---------- */
.bl-read { position: relative; max-width: 1000px; }
.bl--single .bl-item { grid-template-columns: 150px minmax(0, 1fr); }
.bl--single .bl-plane { height: 222px; }
.bl--single .bl-plane__fly { left: -6px; width: 140px; height: 90px; }
.bl--single .bl-plane::before { left: 0; top: 118px; }
.bl--single .bl-tag { left: 28px; top: 100px; width: 118px; height: 118px; }
/* (a long letter: its creases would run through the text) */
.bl--single .bl-letter__paper { padding: 50px 64px 56px; background: radial-gradient(ellipse at 50% 40%, #fffdf8 55%, #f8eedb); }
.bl--single .bl-title { font-size: 40px; margin-bottom: 26px; }
.bl-text { position: relative; font: 400 17px/1.8 'Open Sans', Arial, sans-serif; color: #3c4741; }
.bl-text::after { content: ''; display: table; clear: both; }
.bl-text * { font-family: inherit; }
.bl .bl-text p { margin: 0 0 18px; font-size: 17px; line-height: 1.8; color: #3c4741; }
.bl .bl-text a { color: #2e8fd6; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.bl .bl-text h3 { margin: 34px 0 12px; font: 400 26px/1.25 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: var(--c); }
.bl .bl-text img { max-width: 100%; height: auto; border-radius: 6px; }
.bl .bl-text img.alignleft { float: left; max-width: 42%; margin: 6px 26px 14px 0; }
.bl .bl-text img.alignright { float: right; max-width: 42%; margin: 6px 0 14px 26px; }
/* the title photo (the panel's "Заглавна снимка") and photos between the paragraphs (2026-11-11) */
.bl-cover { margin: 0 0 24px; }
.bl-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 26px -22px rgba(70, 40, 20, .6); }
.bl--list .bl-cover { margin: 0 0 18px; }
.bl--list .bl-cover img { max-height: 300px; }
.bl .bl-text .mch-figure { clear: both; margin: 28px 0 30px; }
.bl .bl-text .mch-figure img { display: block; margin: 0 auto; border-radius: 10px; }
.bl .bl-text .mch-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; font-style: italic; color: #7b8580; text-align: center; }

/* the strip of sky beside the text and the paper plane flying down it (wide screens) */
.bl-depth { position: absolute; left: -114px; top: 240px; bottom: 30px; display: none; width: 60px; border-radius: 30px; background: linear-gradient(#bfe3fb, #e4f4fe 50%, #bfe3fb); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 10px 20px -12px rgba(20, 60, 110, .45); overflow: hidden; pointer-events: none; }
/* little clouds drifting up past the plane as it flies down */
.bl-depth__clouds { position: absolute; inset: 0; background: radial-gradient(ellipse 14px 7px at 30% 50%, #fff 90%, transparent) 0 0 / 60px 110px, radial-gradient(ellipse 10px 5px at 72% 50%, #fff 90%, transparent) 0 50px / 60px 150px; animation: bl-rise 12s linear infinite; }
@keyframes bl-rise { to { background-position: 0 -330px, 0 -400px; } }
.bl-depth__diver { position: absolute; left: 50%; top: 22px; width: 64px; height: 41px; margin-left: -32px; --c: #f58a22; rotate: 90deg; translate: 0 var(--y, 0px); transition: rotate .45s cubic-bezier(.34, 1.3, .64, 1); }
.bl-depth__diver .bl-plane__svg { width: 100%; height: 100%; }
.bl-depth__diver.is-up { rotate: -90deg; }

/* the newer and the older article, each with its plane (the newer one flies to the left, the older to the right) */
.bl-trip { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1000px; margin: 64px auto 44px; }
.bl-trip__go { --c: #52aae8; display: flex; align-items: center; gap: 18px; min-height: 104px; padding: 16px 26px 16px 14px; border-radius: 12px; background: #fffaf0; box-shadow: 0 18px 30px -24px rgba(70, 40, 20, .55); color: #3c4741; text-decoration: none; transition: translate .4s cubic-bezier(.34, 1.5, .64, 1); }
.bl-trip__go--older { --c: #ff7b05; grid-column: 2; }
.bl-trip__go:hover { translate: 0 -4px; }
.bl-trip__plane { flex: 0 0 auto; width: 62px; height: 40px; transition: translate .4s cubic-bezier(.34, 1.4, .64, 1); }
.bl-trip__plane .bl-plane__svg { width: 100%; height: 100%; }
.bl-trip__go--newer .bl-trip__plane { scale: -1 1; }
.bl-trip__go--older:hover .bl-trip__plane { translate: 6px -4px; }
.bl-trip__go--newer:hover .bl-trip__plane { translate: -6px -4px; }
.bl-trip__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bl-trip__main b { font: 700 12px/1.2 'Open Sans', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.bl-trip__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 400 20px/1.3 'Cabin Sketch', Arial, sans-serif; }
.bl-back { margin: 0; text-align: center; }

/* ---------- Screens ---------- */
@media only screen and (min-width: 1100px) {
	.bl-depth { display: block; }
}
@media only screen and (max-width: 1099px) {
	/* the plane lands above its letter */
	.bl-item, .bl--single .bl-item { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.bl-plane, .bl--single .bl-plane { width: 260px; height: 124px; }
	.bl-plane__fly, .bl--single .bl-plane__fly { left: 6px; top: 6px; width: 132px; height: 85px; }
	.bl-plane::before, .bl--single .bl-plane::before { left: 18px; top: 90px; width: 108px; }
	.bl-tag, .bl--single .bl-tag { left: 146px; top: 10px; width: 104px; height: 104px; font-size: 15px; }
	.bl-tag b { font-size: 37px; }
}
@media only screen and (max-width: 768px) {
	.bl { padding-bottom: 80px; }
	.bl-wrap, .bl-read { padding: 0 16px; }
	.bl-sky { height: 110px; margin-bottom: 6px; }
	.bl-sky__flyer { width: 56px; height: 36px; }
	.bl .bl-list { gap: 46px; }
	.bl-letter__paper, .bl--single .bl-letter__paper { padding: 26px 22px 30px; }
	.bl .bl-title { font-size: 25px; }
	.bl--single .bl-title { font-size: 30px; }
	.bl .bl-text p, .bl-text { font-size: 16px; }
	.bl .bl-text img.alignleft, .bl .bl-text img.alignright { float: none; max-width: 100%; margin: 4px 0 18px; }
	.bl-trip { grid-template-columns: 1fr; gap: 18px; margin-top: 46px; }
	.bl-trip__go--older { grid-column: auto; }
	.bl-trip__title { font-size: 18px; }
	/* a phone: the beginning of each article in six lines, so the next letter is not a long scroll away */
	.bl .bl-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; font-size: 15px; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
	.bl *, .bl *::before, .bl *::after { animation: none !important; transition: none !important; }
	.bl-sky__flyer, .bl-depth { display: none !important; }
}