/* "Монтесори уикенд" as a weekend morning in the class room (parts/weekend.php): the sun comes up in the window and
   its light falls on the floor while the pink tower is built cube by cube (a click knocks it down, and it is built
   again) on a plain rug; the other paragraphs are cards below. */

.wkd { position: relative; padding: 40px 0 70px; overflow: hidden; }
.wkd__row { display: flex; align-items: center; margin-bottom: 60px; }
.wkd__more { margin-bottom: 50px; }

/* ---------- The cards ---------- */
.wkd__card { position: relative; z-index: 2; flex: 1; min-width: 0; padding: 34px 40px; border-radius: 30px; background: #fff; box-shadow: 0 24px 40px -26px rgba(60, 40, 20, .5); border-left: 8px solid #f39bb9; opacity: 0; transform: translateX(-50px); transition: opacity .7s, transform 1s cubic-bezier(.34, 1.3, .64, 1); }
.wkd__more .wkd__card { max-width: 980px; margin: 0 auto; border-left-color: #52aae8; }
.wkd__more .wkd__card--last { border-left-color: #7ad068; }
.wkd__card.is-in { opacity: 1; transform: none; }
.wkd .wkd__card p { margin: 0; font-size: 18px; line-height: 1.8; color: #3c4741; }

/* ---------- The room: the window, the light on the floor and the pink tower on the rug ---------- */
.wkd__room { position: relative; z-index: 1; flex: none; width: 460px; height: 440px; margin-left: -30px; border-radius: 32px; overflow: hidden; background: linear-gradient(#fff6ec, #fde9d6); box-shadow: 0 26px 44px -24px rgba(90, 50, 30, .45); opacity: 0; transform: scale(.88) rotate(2deg); transition: opacity .8s .2s, transform 1.1s cubic-bezier(.34, 1.4, .64, 1) .2s; --u: 6px; }
.wkd__room.is-in { opacity: 1; transform: none; }
/* the wooden floor */
.wkd__room::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: repeating-linear-gradient(90deg, transparent 0 86px, rgba(120, 70, 30, .14) 86px 88px), linear-gradient(#e7c095, #d9a979); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .25); }
.wkd__window { position: absolute; z-index: 1; left: 42px; top: 46px; width: 190px; height: 160px; border: 10px solid #fff; border-radius: 12px 12px 4px 4px; background: linear-gradient(#7cc6fb, #d3ecfd); overflow: hidden; box-shadow: 0 8px 0 -2px #e9d3bd, 0 14px 24px -10px rgba(90, 50, 30, .3); }
.wkd__window::before, .wkd__window::after { content: ''; position: absolute; z-index: 3; background: #fff; }
.wkd__window::before { left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; }
.wkd__window::after { left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; }
.wkd__sun { position: absolute; z-index: 1; right: 14px; top: 26px; width: 66px; height: 68px; background: url('../images/sun.svg') no-repeat center / contain; transform: translateY(130px); transition: transform 3s cubic-bezier(.3, .6, .3, 1) .6s; }
.wkd__room.is-in .wkd__sun { transform: none; animation: wkd-turn 24s linear 3.6s infinite; }
@keyframes wkd-turn { to { rotate: 360deg; } }
.wkd__cloud { position: absolute; z-index: 2; left: 0; top: 14px; width: 840px; height: 40px; background: url('../images/clouds1.svg') repeat-x 0 0 / 420px 42px; animation: wkd-drift 34s linear infinite; }
.wkd__cloud--b { top: 86px; height: 28px; background-size: 300px 30px; width: 600px; opacity: .7; animation-duration: 52s; }
@keyframes wkd-drift { to { transform: translateX(-50%); } }
/* the morning light from the window on the floor */
.wkd__light { position: absolute; z-index: 1; left: 52px; top: 206px; width: 300px; height: 234px; opacity: 0; transition: opacity 2.4s 1.4s; pointer-events: none; }
.wkd__light::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255, 252, 230, .7), rgba(255, 252, 230, 0)); clip-path: polygon(0 0, 58% 0, 100% 100%, 34% 100%); animation: wkd-glow 5s ease-in-out infinite alternate; }
.wkd__room.is-in .wkd__light { opacity: 1; }
@keyframes wkd-glow { from { opacity: .45; } to { opacity: 1; } }
/* the work rug: one plain colour */
.wkd__rug { position: absolute; z-index: 2; right: 26px; bottom: 18px; width: 230px; height: 58px; border-radius: 50%; background: #a9d6f2; box-shadow: 0 6px 10px -6px rgba(60, 90, 120, .35); }
/* the pink tower: ten cubes, the biggest at the bottom, each one dropped on the one before */
.wkd__tower { position: absolute; z-index: 3; right: 111px; bottom: 44px; display: flex; flex-direction: column-reverse; align-items: center; width: calc(var(--u) * 10); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.wkd__tower i { display: block; width: calc(var(--n) * var(--u)); height: calc(var(--n) * var(--u)); border-radius: 2px; background: linear-gradient(135deg, #ffd0e0, #f59ab9 60%, #ec82a6); box-shadow: inset -3px -3px 0 rgba(150, 30, 70, .12), inset 2px 2px 0 rgba(255, 255, 255, .5); opacity: 0; transform: translateY(-480px); }
.wkd__tower.is-up i { animation: wkd-drop .62s linear calc(.6s + var(--k) * .3s) forwards; }
@keyframes wkd-drop {
	0% { opacity: 1; transform: translateY(-480px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
	68% { transform: translateY(0) scale(1.08, .88); animation-timing-function: ease-out; }
	84% { transform: translateY(-5px) scale(.98, 1.03); animation-timing-function: ease-in; }
	100% { opacity: 1; transform: none; }
}
/* knocked down: every cube falls off to its own side, then the tower is built again (assets/js/weekend.js) */
.wkd__tower.is-up.is-down i { animation: wkd-fall .75s cubic-bezier(.3, 0, .8, .6) calc((9 - var(--k)) * .03s) forwards; }
@keyframes wkd-fall { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(var(--fx, 60px), 140px) rotate(var(--fr, 90deg)); } }

/* ---------- Smaller screens ---------- */
@media only screen and (max-width: 1100px) {
	.wkd__room { width: 400px; height: 400px; --u: 5.4px; }
	.wkd__tower { right: 92px; }
	.wkd__rug { width: 200px; right: 20px; }
	.wkd__card { padding: 28px 30px; }
	.wkd .wkd__card p { font-size: 17px; }
}
@media only screen and (max-width: 768px) {
	.wkd__row { flex-direction: column; }
	.wkd__card { width: 100%; padding: 24px 22px 40px; transform: translateY(40px); }
	.wkd__more .wkd__card { padding-bottom: 26px; }
	.wkd .wkd__card p { font-size: 16px; }
	.wkd__room { width: 100%; max-width: 420px; height: 380px; margin: -24px 0 0; --u: 5px; }
	.wkd__window { left: 24px; top: 34px; width: 160px; height: 136px; }
	.wkd__light { left: 30px; top: 170px; }
	.wkd__tower { right: 78px; }
	.wkd__rug { width: 180px; height: 50px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.wkd *, .wkd *::before, .wkd *::after { animation: none !important; transition: none !important; }
	.wkd__card, .wkd__room, .wkd__tower i, .wkd__sun, .wkd__light { opacity: 1 !important; transform: none !important; }
}