/* "Коучинг за родители" as balance (parts/coaching.php): the Munari mobile whose arms swing and keep their balance
   (the strings stay upright: every hanging part turns back as much as its arm turns), a gust when it is touched, the
   cards hanging on a string and swaying a little, and a tablet that rings with a video call. */

.coach { position: relative; padding: 30px 0 80px; overflow: hidden; }
.bg .coach .coach__lead { font-family: 'Neucha', Arial, sans-serif; }

/* ---------- The heading and the mobile ---------- */
.coach__top { display: flex; align-items: center; gap: 40px; }
.coach .coach__lead { flex: 1; min-width: 0; margin: 0; font: 400 34px/1.4 'Cabin Sketch', Arial, sans-serif; color: #8763be; opacity: 0; transform: translateY(30px); transition: opacity .8s, transform 1s cubic-bezier(.34, 1.3, .64, 1); }
.coach .coach__lead.is-in { opacity: 1; transform: none; }
.coach__mobile { position: relative; flex: none; width: 400px; height: 330px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(-60px); transition: opacity .8s .2s, transform 1.4s cubic-bezier(.34, 1.4, .64, 1) .2s; }
.coach__mobile.is-in { opacity: 1; transform: none; }
.mob__all { position: absolute; inset: 0; transform-origin: 50% 0; }
.mob__all.is-gust { animation: mob-gust 2.8s ease-out; }
@keyframes mob-gust { 0% { rotate: 0deg; } 14% { rotate: 9deg; } 34% { rotate: -7deg; } 54% { rotate: 4.5deg; } 74% { rotate: -2deg; } 100% { rotate: 0deg; } }
/* the Munari mobile: striped black and white arms, each hung where it balances, with black and white shapes and a
   glass sphere on their threads */
.mob__top { position: absolute; left: calc(50% + 10px); top: 0; width: 2px; height: 60px; margin-left: -1px; background: #9aa5ad; }
.mob__top::before { content: ''; position: absolute; left: -5px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #9aa5ad; }
/* an arm turns to and fro round the point where it hangs (--o); its hanging parts turn back by as much */
.mob__arm { position: absolute; height: 7px; border-radius: 4px; background: repeating-linear-gradient(90deg, #26292d 0 16px, #fff 16px 32px); box-shadow: 0 0 0 1.5px #26292d, 0 4px 6px -3px rgba(0, 0, 0, .25); transform-origin: var(--o, 50%) 0; animation: mob-sway var(--t) ease-in-out infinite alternate; }
.mob__arm--a { left: calc(50% - 180px); width: 270px; top: 60px; --o: 70.4%; --t: 5.2s; --a: 5deg; }
.mob__arm--b { left: -82px; width: 160px; top: var(--len); --o: 51.25%; --t: 3.8s; --a: 9deg; animation-delay: -1.2s; }
.mob__arm--c { left: -62px; width: 100px; top: var(--len); --o: 62%; --t: 3s; --a: 12deg; animation-delay: -.7s; }
.mob__hang { position: absolute; top: 4px; width: 0; height: 0; animation: mob-back var(--t) ease-in-out infinite alternate; }
.mob__arm--b > .mob__hang { animation-delay: -1.2s; }
.mob__arm--c > .mob__hang { animation-delay: -.7s; }
.mob__hang--l { left: 8px; }
.mob__hang--r { right: 8px; }
@keyframes mob-sway { from { rotate: calc(var(--a) * -1); } to { rotate: var(--a); } }
@keyframes mob-back { from { rotate: var(--a); } to { rotate: calc(var(--a) * -1); } }
.mob__line { position: absolute; left: -.5px; top: 0; width: 1px; height: var(--len); background: #8d979e; }
/* the glass sphere: clear, with the light in it and a little rainbow where the light comes through */
.mob__sphere { position: absolute; left: 0; top: var(--len); width: 66px; height: 66px; margin-left: -33px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, .35) 14%, rgba(205, 228, 242, .22) 42%, rgba(140, 175, 200, .32) 72%, rgba(90, 125, 155, .55) 100%); box-shadow: inset -6px -8px 14px rgba(70, 100, 130, .25), inset 4px 4px 8px rgba(255, 255, 255, .6), 0 12px 16px -10px rgba(40, 60, 80, .35); }
.mob__sphere::after { content: ''; position: absolute; right: 15%; bottom: 17%; width: 20px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, rgba(255, 87, 54, .45), rgba(255, 228, 0, .45), rgba(122, 208, 104, .45), rgba(82, 170, 232, .45)); filter: blur(1px); animation: mob-glint 3.6s ease-in-out infinite alternate; }
@keyframes mob-glint { from { opacity: .3; translate: -3px 2px; } to { opacity: 1; translate: 3px -2px; } }
/* the black and white shapes turn slowly on their threads */
.mob__shape { position: absolute; left: 0; top: var(--len); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18)); animation: mob-turn var(--spin, 9s) linear infinite; }
.mob__shape::before { content: ''; position: absolute; inset: 0; }
@keyframes mob-turn { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(.12); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.12); } }
.mob__shape--tri { width: 58px; height: 52px; margin-left: -29px; --spin: 11s; }
.mob__shape--tri::before { background: repeating-linear-gradient(0deg, #26292d 0 6px, #fff 6px 12px); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mob__shape--square { width: 46px; height: 46px; margin-left: -23px; --spin: 13s; animation-delay: -4s; }
.mob__shape--square::before { background: repeating-linear-gradient(45deg, #26292d 0 5px, #fff 5px 10px); box-shadow: inset 0 0 0 2px #26292d; }
.mob__shape--ring { width: 44px; height: 44px; margin-left: -22px; --spin: 8s; animation-delay: -2s; }
.mob__shape--ring::before { border-radius: 50%; background: repeating-radial-gradient(circle, #26292d 0 4px, #fff 4px 8px); box-shadow: 0 0 0 2px #26292d; }

/* ---------- The cards hang on a string and sway a little ---------- */
.coach__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; padding-top: 40px; }
.coach__card { position: relative; padding: 30px 32px; border-radius: 28px; background: #fff; box-shadow: 0 22px 36px -22px rgba(60, 40, 20, .5); border-top: 6px solid var(--c); transform-origin: 50% -40px; opacity: 0; transform: translateY(-40px); transition: opacity .7s calc(var(--k) * .15s), transform 1.1s cubic-bezier(.34, 1.4, .64, 1) calc(var(--k) * .15s); }
.coach__card.is-in { opacity: 1; transform: none; animation: coach-sway 4.5s ease-in-out calc(1.2s + var(--k) * .6s) infinite alternate; }
.coach__cards .coach__card::before { content: ''; position: absolute; left: 50%; top: -46px; width: 2px; height: 40px; background: #9aa5ad; }
.coach__cards .coach__card::after { content: ''; position: absolute; left: 50%; top: -52px; width: 12px; height: 12px; margin-left: -5px; border-radius: 50%; background: var(--c); }
@keyframes coach-sway { from { rotate: -.8deg; } to { rotate: .8deg; } }
.coach__card:hover { animation-play-state: paused; }
.coach .coach__card p { margin: 0; font-size: 17px; line-height: 1.8; color: #3c4741; }

/* ---------- The call: a tablet that rings ---------- */
.coach__call { display: flex; align-items: center; margin-top: 70px; }
.coach__tablet { position: relative; z-index: 1; flex: none; width: 340px; height: 236px; margin-right: -30px; border-radius: 26px; background: #2f3640; box-shadow: inset 0 0 0 3px #48525e, 0 26px 40px -22px rgba(30, 30, 40, .6); opacity: 0; transform: rotate(-8deg) scale(.88); transition: opacity .8s, transform 1.1s cubic-bezier(.34, 1.4, .64, 1); }
.coach__tablet.is-in { opacity: 1; transform: rotate(-3deg); animation: tab-ring 4.2s ease-in-out 1.4s infinite; }
@keyframes tab-ring { 0%, 16%, 100% { rotate: 0deg; } 2% { rotate: 2.5deg; } 4% { rotate: -2.5deg; } 6% { rotate: 2.5deg; } 8% { rotate: -2.5deg; } 10% { rotate: 1.5deg; } 12% { rotate: -1deg; } }
.tab__screen { position: absolute; inset: 14px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #cfeafc, #f2fbff); }
.tab__them { position: absolute; left: 50%; top: 44%; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; background: #fff url('../images/montessorihouse.svg') no-repeat center 62% / 80%; box-shadow: 0 6px 14px -6px rgba(30, 80, 130, .5); }
.tab__them::before, .tab__them::after { content: ''; position: absolute; inset: 0; border: 3px solid rgba(82, 170, 232, .7); border-radius: 50%; animation: tab-pulse 2s ease-out infinite; }
.tab__them::after { animation-delay: 1s; }
@keyframes tab-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
.tab__them i { position: absolute; right: 4px; bottom: 6px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #7ad068; }
.tab__me { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 62px; height: 46px; border-radius: 10px; background: #ffe1d8; color: #ff5736; font-size: 24px; line-height: 1; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .3); }
.tab__wave { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.tab__wave i { width: 5px; height: 8px; border-radius: 3px; background: #52aae8; animation: tab-bar .7s ease-in-out infinite alternate; }
.tab__wave i:nth-child(2) { animation-delay: -.3s; } .tab__wave i:nth-child(3) { animation-delay: -.55s; } .tab__wave i:nth-child(4) { animation-delay: -.15s; } .tab__wave i:nth-child(5) { animation-delay: -.45s; }
@keyframes tab-bar { to { height: 28px; } }
.tab__btn { position: absolute; left: 50%; bottom: 12px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: #7ad068; animation: tab-call 1.6s ease-out infinite; }
@keyframes tab-call { from { box-shadow: 0 0 0 0 rgba(122, 208, 104, .7); } to { box-shadow: 0 0 0 16px rgba(122, 208, 104, 0); } }
.coach__card--call { z-index: 2; flex: 1; min-width: 0; padding: 34px 40px 34px 64px; transform-origin: 50% 50%; transform: translateX(60px); }
.coach__card--call.is-in { animation: none; }

/* ---------- Smaller screens ---------- */
@media only screen and (max-width: 1100px) {
	.coach .coach__lead { font-size: 29px; }
	.coach__mobile { width: 340px; height: 340px; }
	.mob__all { scale: .86; }
	.coach__cards { grid-template-columns: 1fr 1fr; }
	.coach .coach__card p { font-size: 16px; }
}
@media only screen and (max-width: 768px) {
	.coach__top { flex-direction: column; gap: 0; }
	.coach .coach__lead { font-size: 25px; }
	.coach__mobile { width: 300px; height: 240px; margin-top: 16px; }
	.mob__all { scale: .78; }
	.coach__cards { grid-template-columns: 1fr; gap: 64px; margin-top: 30px; }
	.coach__card { padding: 24px 22px; }
	.coach__call { flex-direction: column; margin-top: 60px; }
	/* (the card under it hid the bottom of the tablet: they no longer overlap) */
	.coach__tablet { width: 100%; max-width: 330px; height: 220px; margin: 0 0 22px; }
	.coach__card--call { width: 100%; padding: 40px 22px 24px; transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
	.coach *, .coach *::before, .coach *::after { animation: none !important; transition: none !important; }
	.coach .coach__lead, .coach__mobile, .coach__card, .coach__tablet { opacity: 1 !important; transform: none !important; }
}