/* Home – the words over the house scene and the testimonials a bird brings as letters (parts/home-hero.php).
   The letter is tied to the bird's back leg: it comes rolled up, unrolls when the bird hovers, rolls back into a
   scroll when the bird takes off (up and to the left), and the next bird swoops in from the right. */

.main-header:not(.inner-page) .wide-wrapper { position: relative; }

/* ---------- The words ---------- */
.hero-note { position: absolute; z-index: 6; left: max(20px, calc(50% - 620px)); top: 150px; width: 430px; color: #fff; }
.hero-note__title { margin: 0 0 12px; font: 400 56px/1 'Cabin Sketch', Arial, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0, 60, 120, .4); animation: note-in .8s .1s both; }
.hero-note__title em { font-style: normal; color: #fff; }
.hero-note__lead { margin: 0 0 22px; font: 400 18px/1.55 'Open Sans', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0, 60, 120, .45); animation: note-in .8s .3s both; }
.hero-note__actions { display: flex; flex-wrap: wrap; animation: note-in .8s .5s both; }
.hero-note__actions .btn { margin: 0 12px 10px 0; }
.hero-note__actions .btn.btn-red, .hero-note__actions .btn.btn-yellow { color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 90, .25); }
/* "Препоръки / Testimonials" (2026-11-11, the client: "в цвят сиво като вратата на къщата, да не е бял и черен" – it
   was yellow with white words and a black arrow): the grey of the house's doors (montessorihouse.svg: the doors are
   #b99d97 and #a7847d – the darker one, so the white words read well; on hover #917974, a darker grey of the same
   drawing), white words and the white arrow of the plain .btn */
.hero-note__actions .btn.btn-door { background-color: #a7847d; color: #fff; text-shadow: 0 1px 2px rgba(60, 30, 25, .45); }
.hero-note__actions .btn.btn-door:hover, .hero-note__actions .btn.btn-door:focus-visible { background-color: #917974; }

/* ---------- The post: two carriers take turns, one is always on the way ---------- */
/* the post spans the whole header and clips the flight, so the birds never widen the page */
/* (--ct: where the bird hovers; the post reaches down to the arrows under the letter) */
.post { --ct: 166px; position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: calc(var(--ct) + 414px); overflow: hidden; pointer-events: none; }
.carrier { position: absolute; right: max(20px, calc(50% - 640px)); top: var(--ct); width: 300px; height: 72px; transform: translate(110vw, -140px); }

/* the arrows under the letter (2026-11-11, the client: the letters come only when an arrow is clicked): the same
   round white buttons as over the question balloons; they show once the first letter has come */
.post-nav { position: absolute; z-index: 2; right: max(20px, calc(50% - 640px)); top: calc(var(--ct) + 356px); display: flex; justify-content: center; gap: 16px; width: 300px; pointer-events: none; opacity: 0; transition: opacity .6s; }
.post.is-ready .post-nav { opacity: 1; }
.post-nav__btn {
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: #fff; color: #3c4741; cursor: pointer; pointer-events: auto; box-shadow: 0 8px 16px -10px rgba(0, 30, 70, .55);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s, opacity .3s;
}
.post-nav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.post-nav__btn:hover { transform: translateY(-3px) scale(1.07); background: #ff5736; color: #fff; }
.post-nav__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff5736; }
/* (while a bird is on its way the arrows wait) */
.post.is-busy .post-nav__btn { opacity: .55; cursor: default; }
/* the flights are linear between many keyframes: the slowing down and speeding up sit in the keyframes
   themselves, so the bird never stops and starts between them */
.carrier.is-here { animation: fly-in 2.4s linear both; }
/* off it goes: up and away to the left, faster and faster, while the letter rolls up */
.carrier.is-gone { animation: fly-off 1.8s linear .1s both; }
.carrier.no-move { animation: none; }

/* the bird: the picture, two legs; the back leg carries the letter */
.carrier__bird { position: absolute; left: 50%; top: 0; width: 96px; height: 54px; margin-left: -48px; animation: bird-bob 2.2s ease-in-out infinite; }
.carrier__bird img { position: relative; z-index: 1; display: block; width: 100%; height: auto; transform-origin: 50% 32%; animation: wings .42s ease-in-out infinite alternate; }
.carrier.is-open .carrier__bird img { animation-duration: 1.4s; }
/* the legs hang from the belly, behind the wing: tucked back in flight, dangling while the bird hovers */
.leg { position: absolute; z-index: 0; top: 38px; width: 2.5px; height: 15px; border-radius: 2px; background: #d9772f; transform-origin: 50% 0; transform: rotate(-42deg); transition: transform .9s cubic-bezier(.34, 1.3, .64, 1); }
.leg::after { content: ''; position: absolute; left: -6px; bottom: -1px; width: 8px; height: 2.5px; border-radius: 2px; background: #d9772f; transform-origin: 100% 50%; transform: rotate(-12deg); }
.leg--front { left: 59px; }
.leg--back { left: 67px; top: 37px; }
.carrier.is-open .leg--front { transform: rotate(2deg); animation: leg-dangle 1.7s ease-in-out .9s infinite; }
.carrier.is-open .leg--back { transform: rotate(-4deg); animation: leg-dangle-back 1.7s ease-in-out .9s infinite; }

/* the string hangs from the back foot and swings like a pendulum while the bird hovers */
.carrier__tie { position: absolute; left: 1px; top: 15px; width: 0; height: 0; transform-origin: 0 0; }
.carrier.is-open .carrier__tie { animation: tie-sway 3.4s ease-in-out infinite; }
.carrier__string { position: absolute; left: -1px; top: 0; width: 2px; height: 20px; background: #4a3b2c; opacity: .6; }

/* the letter: carried as a small scroll the size of the bird; when the bird hovers it grows and unrolls */
.letter {
	position: absolute; left: -150px; top: 20px; width: 300px; display: grid; grid-template-rows: 0fr;
	padding: 7px 0 23px; background: #fff; border-radius: 14px;
	box-shadow: 0 14px 34px -12px rgba(0, 40, 90, .5);
	transform-origin: 50% 0; transform: scale(.3);
	transition: grid-template-rows .9s cubic-bezier(.55, 0, .3, 1), transform .9s cubic-bezier(.5, 0, .4, 1);
}
.carrier.is-open .letter { grid-template-rows: 1fr; transform: scale(1); pointer-events: auto; transition-timing-function: cubic-bezier(.3, .8, .35, 1), cubic-bezier(.34, 1.25, .5, 1); }
.letter__in { min-height: 0; overflow: hidden; padding: 0 22px; }
.letter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(90deg, #ff5736 0 16px, #fff 16px 22px, #52aae8 22px 38px, #fff 38px 44px); }
.letter__text { margin: 14px 0 10px; font: 400 15px/1.5 'Open Sans', sans-serif; color: #333; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.letter__from { display: block; margin: 0 0 6px; font: 400 23px/1.1 'Cabin Sketch', Arial, sans-serif; font-style: normal; color: #ff5736; overflow-wrap: anywhere; }
/* Cabin Sketch has no Cyrillic letters: on the Bulgarian pages the names are in Neucha, like the site's headings */
.bg .letter__from, .bg .sheet__from { font-family: 'Neucha', Arial, sans-serif; }
/* the size of the name follows its length (hero.js): long family names stay on two tidy lines */
.letter__from[data-size="m"] { font-size: 19px; }
.letter__from[data-size="s"] { font-size: 16px; line-height: 1.2; }
.letter__from[data-size="xs"] { font-size: 14px; line-height: 1.25; }
.letter__more { padding: 0; border: 0; background: none; color: #3a93d6; font: 700 14px/1.3 'Open Sans', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.letter__more:hover { color: #ff5736; }
.letter__more[hidden] { display: none; }
/* the roll at the bottom edge: the paper curls around it, its ends show the spiral */
.letter__roll {
	position: absolute; z-index: 2; left: -5px; right: -5px; bottom: 0; height: 30px; border-radius: 15px;
	background: linear-gradient(180deg, #ffffff 0%, #f8f3e7 26%, #cfc5ad 66%, #ece6d5 100%);
	box-shadow: 0 -6px 10px -5px rgba(0, 30, 70, .35), 0 9px 16px -8px rgba(0, 30, 70, .55);
	transition: opacity .25s;
}
.letter__roll::before, .letter__roll::after { content: ''; position: absolute; top: 0; width: 30px; height: 30px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #cdc3a9 0 1.5px, #fdfaf1 1.5px 4.5px); box-shadow: inset 0 0 0 1px #c4b99c; }
.letter__roll::before { left: -3px; }
.letter__roll::after { right: -3px; }
.carrier.is-open .letter__roll { opacity: 0; transition: opacity .3s .55s; }

.feather { position: absolute; left: 50%; top: 44px; width: 10px; height: 18px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #cfd4da; opacity: 0; }
.feather--2 { margin-left: 26px; } .feather--3 { margin-left: -34px; }
.carrier.is-open .feather { animation: feather 2.4s ease-in forwards; }
.carrier.is-open .feather--2 { animation-delay: .3s; } .carrier.is-open .feather--3 { animation-delay: .55s; }

/* ---------- The whole letter: a sheet of paper that drops in, with the bird on its corner ---------- */
.sheet { border: 0; padding: 0; background: transparent; width: min(720px, 100vw - 24px); max-width: none; max-height: none; overflow: visible; }
.sheet::backdrop { background: rgba(14, 50, 95, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet__paper {
	position: relative; max-height: 84vh; overflow: auto; padding: 46px 52px 44px;
	background: #fffdf6 repeating-linear-gradient(transparent 0 33px, rgba(82, 170, 232, .16) 33px 35px) 0 66px / 100% 100% no-repeat;
	border-radius: 20px; box-shadow: 0 34px 60px -20px rgba(0, 30, 70, .55);
	transform-origin: 50% 0; animation: sheet-in .9s cubic-bezier(.34, 1.3, .64, 1) both, sheet-sway 7s ease-in-out 1s infinite alternate;
}
.sheet__paper::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 20px 20px 0 0; background: repeating-linear-gradient(90deg, #ff5736 0 18px, #fff 18px 26px, #52aae8 26px 44px, #fff 44px 52px); }
.sheet__bird { position: absolute; right: 30px; top: -2px; width: 76px; animation: sheet-bird .9s .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.sheet__bird img { display: block; width: 100%; height: auto; transform-origin: 50% 32%; animation: wings .5s .45s ease-in-out 6 alternate; }
.sheet__close { position: absolute; left: 14px; top: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #ff5736; color: #fff; font: 400 28px/1 'Cabin Sketch', Arial, sans-serif; cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.sheet__close:hover { transform: rotate(90deg) scale(1.08); }
.sheet__kicker { margin: 0 0 4px 50px; font: 400 17px/1.2 'Neucha', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #52aae8; }
.sheet__from { margin: 0 0 22px 50px; font: 400 40px/1.05 'Cabin Sketch', Arial, sans-serif; color: #ff5736; overflow-wrap: anywhere; }
.sheet__from[data-size="m"] { font-size: 33px; }
.sheet__from[data-size="s"] { font-size: 27px; line-height: 1.15; }
.sheet__from[data-size="xs"] { font-size: 23px; line-height: 1.2; }
.sheet__text { font: 400 17px/1.95 'Open Sans', sans-serif; color: #333; animation: note-in .7s .5s both; }
.sheet__text p { margin: 0 0 1em; }
.sheet__text p:last-child { margin-bottom: 0; }
/* under the letter: the reviews on Google and Facebook (parts/review-links.php), two small round links */
.sheet .reviews { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 26px 0 0; padding: 18px 0 0; border-top: 2px dotted #e3d8c4; list-style: none; animation: note-in .7s .7s both; }
.sheet .reviews__link { display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #f6f0e4; color: #3c4741; font: 600 14px/1.2 'Open Sans', Arial, sans-serif; text-decoration: none; transition: background .25s, translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.sheet .reviews__link:hover, .sheet .reviews__link:focus-visible { background: #efe4d0; translate: 0 -2px; }
.sheet .reviews__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(70, 40, 20, .12); }
.sheet .reviews__icon svg { display: block; width: 24px; height: 24px; }
.sheet.is-closing .sheet__paper { animation: sheet-out .5s ease-in forwards; }
.sheet.is-closing .sheet__bird { animation: sheet-bird-off .5s ease-in forwards; }

@keyframes note-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wings { from { transform: scaleY(1); } to { transform: scaleY(.68); } }
@keyframes bird-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes tie-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes leg-dangle { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(8deg); } }
@keyframes leg-dangle-back { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(-7deg); } }
@keyframes feather { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate(-46px, 170px) rotate(320deg); } }
/* a swoop down from the top right that levels out at the end */
@keyframes fly-in {
	0% { transform: translate(110vw, -140px) rotate(-7deg); }
	25% { transform: translate(68vw, -112px) rotate(-7deg); }
	45% { transform: translate(40vw, -84px) rotate(-6deg); }
	62% { transform: translate(22vw, -58px) rotate(-5deg); }
	76% { transform: translate(11vw, -32px) rotate(-3deg); }
	87% { transform: translate(4.5vw, -13px) rotate(-1deg); }
	95% { transform: translate(1.2vw, -3px) rotate(0deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
/* up and away to the left: the arc gets steeper and the bird faster the further it goes */
@keyframes fly-off {
	0% { transform: translate(0, 0) rotate(0deg); }
	12% { transform: translate(-1.2vw, -4px) rotate(2deg); }
	24% { transform: translate(-4.5vw, -15px) rotate(5deg); }
	38% { transform: translate(-11vw, -40px) rotate(9deg); }
	52% { transform: translate(-22vw, -82px) rotate(13deg); }
	66% { transform: translate(-40vw, -150px) rotate(16deg); }
	80% { transform: translate(-66vw, -240px) rotate(18deg); }
	100% { transform: translate(-130vw, -420px) rotate(18deg); }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-70vh) rotate(-7deg); } 70% { opacity: 1; transform: translateY(12px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(60vh) rotate(6deg); } }
@keyframes sheet-sway { from { rotate: -.5deg; } to { rotate: .5deg; } }
@keyframes sheet-bird { from { opacity: 0; transform: translate(-180px, -240px); } to { opacity: 1; transform: translate(0, -44px); } }
@keyframes sheet-bird-off { to { opacity: 0; transform: translate(-200px, -260px); } }

@media only screen and (max-width: 1320px) {
	.hero-note { top: 170px; }
	.post { --ct: 201px; }
}
@media only screen and (max-width: 1110px) {
	.hero-note { position: static; width: auto; max-width: 600px; margin: 0 auto; padding: 6px 20px 8px; text-align: center; }
	.hero-note__title { font-size: 46px; }
	.hero-note__actions { justify-content: center; }
	.hero-note__actions .btn { margin: 0 6px 10px; }
	.post { position: relative; top: auto; width: 100%; height: 340px; margin: 0; }
	.carrier { right: 50%; top: 20px; width: 340px; margin-right: -170px; }
	/* the house comes first under the words: the birds wait under it (hero.js moves the post into the slot) */
	.main-header .post { display: none; }
	.post-slot { position: relative; z-index: 4; }
	.post-slot .post { height: 400px; }
	/* under the house: the arrows under the letter, in the middle */
	.post-nav { top: auto; bottom: 8px; right: 50%; width: 340px; margin-right: -170px; }
}
.post-slot:empty { display: none; }

/* ---------- The rest of the home page on a phone (2026-11-05: "other things overlap and look bad") ---------- */
@media only screen and (max-width: 1110px) {
	/* "Защо Монтесори": the trees of the wide picture behind it stood on the titles – plain ground here */
	.whymontessori .terrain { background-image: none; }
}
@media only screen and (max-width: 767px) {
	.whymontessori .terrain { padding-top: 50px; }
	/* the house whole and in the middle (its left wing was cut off on a narrow phone) */
	.montessori-house { margin-left: -350px; }
}
@media only screen and (max-width: 380px) {
	.montessori-house { transform: scale(.47); }
}
@media only screen and (max-width: 767px) {
	/* "Възрастови групи": the words in the middle like the groups under them, and room at the bottom where the two fish
	   swim across, each the way it looks (fish-1 to the right, fish-2 to the left) instead of standing on the words */
	.water { padding-bottom: 150px; }
	.water .text { text-align: center; }
	.water .text .btn { margin-left: auto; margin-right: auto; }
	.water .fish-1, .water .fish-2 { top: auto; left: 0; margin: 0; transform: none; transform-origin: 0 100%; }
	.water .fish-1 { bottom: 26px; scale: .48; animation: m-fish-right 15s linear infinite; }
	.water .fish-2 { display: block; bottom: 70px; scale: .3; animation: m-fish-left 21s linear -8s infinite; }
	@keyframes m-fish-right { from { translate: -160px 0; } 25% { translate: 18vw -10px; } 50% { translate: 45vw 4px; } 75% { translate: 72vw -8px; } to { translate: 105vw 0; } }
	@keyframes m-fish-left { from { translate: 105vw 0; } 30% { translate: 66vw 8px; } 60% { translate: 30vw -6px; } to { translate: -160px 0; } }
	/* the legend of the calendar: two tidy columns of small symbols instead of big uneven rows */
	.calendar-tabs .legend-title { display: block; margin: 14px 0 8px; padding: 0 14px; font-size: 18px; }
	/* the names one after another (a word is never cut: "Благотворителност" did not fit half of a narrow phone) */
	.calendar-tabs .legend-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0 14px 10px; }
	.calendar-tabs .legend-list li { display: flex; align-items: center; gap: 4px; width: auto; margin: 0; padding: 0; font-size: 14px; line-height: 1.25; white-space: nowrap; }
	.calendar-tabs .legend-list li::before { display: none; }
	.calendar-tabs .legend-list .event-icon { flex: none; margin: -4px; scale: .72; }
}
@media (prefers-reduced-motion: reduce) {
	.water .fish-1, .water .fish-2 { animation: none; }
}
@media only screen and (max-width: 567px) {
	.hero-note__title { font-size: 38px; }
	.hero-note__lead { font-size: 16px; }
	.letter__text { font-size: 14px; -webkit-line-clamp: 5; }
	.sheet__paper { padding: 38px 24px 36px; }
	.sheet__kicker, .sheet__from { margin-left: 46px; }
	.sheet__from { font-size: 30px; }
	.sheet__text { font-size: 16px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
	.carrier { transform: none; opacity: 0; transition: opacity .3s; }
	.carrier.is-here { animation: none; opacity: 1; }
	.carrier.is-gone { animation: none; opacity: 0; }
	.letter, .leg, .letter__roll { transition: none; }
	.carrier__bird, .carrier__bird img, .carrier__tie, .leg, .feather, .sheet__paper, .sheet__bird img { animation: none !important; }
}