/* "Монтесори вкъщи" as a house (parts/athome.php): the roof comes down with its smoking chimney, every question is
   a room whose lamp lights up and whose curtains open when the reader comes in, the photos hang on a wall and the
   ground floor's door opens to a warm light. */

.home { position: relative; padding: 20px 0 0; overflow: hidden; }
.bg .home__title, .bg .room__q { font-family: 'Neucha', Arial, sans-serif; }
.home__title { margin: 30px auto 10px; font: 400 40px/1.25 'Cabin Sketch', Arial, sans-serif; text-align: center; color: #3c4741; opacity: 0; transform: translateY(20px); transition: opacity .8s, transform .8s; }
.home__title.is-in { opacity: 1; transform: none; }
.home__intro { max-width: 900px; margin-top: 20px; padding: 30px 40px; border-radius: 30px; background: #fff; box-shadow: 0 24px 40px -26px rgba(60, 40, 20, .5); text-align: center; opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .9s cubic-bezier(.34, 1.3, .64, 1); }
.home__intro.is-in { opacity: 1; transform: none; }
.home__intro p { margin: 0 0 10px; font-size: 19px; line-height: 1.7; color: #3c4741; }
.home__intro p:first-child { font: 400 27px/1.35 'Cabin Sketch', Arial, sans-serif; color: #3c4741; }
.bg .home__intro p:first-child { font-family: 'Neucha', Arial, sans-serif; }
.home__intro p:last-child { margin-bottom: 0; }

/* ---------- The house ---------- */
.home__house { position: relative; max-width: 1080px; margin-top: 60px; }
/* the roof: red tiles, a round attic window and the chimney on the right slope */
.home__roof { position: relative; z-index: 2; height: 190px; margin: 0 -50px -2px; opacity: 0; transform: translateY(-80px); transition: opacity .6s, transform 1s cubic-bezier(.34, 1.5, .64, 1); }
.home__roof.is-in { opacity: 1; transform: none; }
.home__tiles { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(0deg, #ff5736 0 20px, #e04424 20px 23px); }
.home__attic { position: absolute; left: 50%; top: 82px; width: 66px; height: 66px; margin-left: -33px; border-radius: 50%; border: 6px solid #fff; background: linear-gradient(90deg, transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(#bfe6fb, #8fd0f5); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.home__chimney { position: absolute; right: 22%; top: 36px; width: 46px; height: 90px; background: repeating-linear-gradient(0deg, #c4532f 0 12px, #a8432a 12px 14px); box-shadow: inset 0 8px 0 #8f3a24; }
.home__smoke { position: absolute; left: 50%; top: -6px; }
.home__smoke i { position: absolute; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: rgba(214, 205, 196, .95); opacity: 0; animation: home-puff 3.4s ease-out infinite; }
.home__smoke i:nth-child(2) { animation-delay: 1.13s; } .home__smoke i:nth-child(3) { animation-delay: 2.26s; }
@keyframes home-puff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(40px, -90px) scale(2.4); opacity: 0; } }

/* the walls and the floors */
.home__body { position: relative; z-index: 1; border: 12px solid #e8b04b; border-top: 0; background: #fff6dc; box-shadow: 0 30px 50px -30px rgba(60, 40, 20, .55); }
.room { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 40px 44px 46px 30px; border-bottom: 12px solid #e8b04b; opacity: .35; transition: opacity .8s, background-color 1.2s; }
.room.is-right { grid-template-columns: 1fr 220px; padding: 40px 30px 46px 44px; }
.room.is-right .room__deco { order: 2; }
.room.is-in { opacity: 1; background-color: #fffbef; }
.room:last-child { border-bottom: 0; }
.room__text { align-self: center; }
.room__q { margin: 0 0 14px; font: 400 28px/1.3 'Cabin Sketch', Arial, sans-serif; color: var(--c); }
.room__text p { margin: 0 0 12px; font-size: 17px; line-height: 1.75; color: #3c4741; }
.room__text p:last-child { margin-bottom: 0; }
.room__deco { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 54px; }

/* the lamp hangs from the ceiling, swings a little and lights up */
.room__lamp { position: absolute; left: 50%; top: -40px; width: 0; height: 0; transform-origin: 0 0; animation: home-swing calc(3.2s + var(--k) * .3s) ease-in-out infinite alternate; }
.room__cord { position: absolute; left: -1px; top: 0; width: 2px; height: 56px; background: #6b5546; }
.room__shade { position: absolute; left: -26px; top: 54px; width: 52px; height: 26px; border-radius: 26px 26px 4px 4px; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15); }
.room__glow { position: absolute; left: -9px; top: 74px; width: 18px; height: 18px; border-radius: 50%; background: #d9d2c8; transition: background .5s .4s, box-shadow .5s .4s; }
.room__glow::after { content: ''; position: absolute; left: 50%; top: 8px; width: 170px; height: 150px; margin-left: -85px; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(255, 228, 0, .45), rgba(255, 228, 0, 0)); opacity: 0; transition: opacity .8s .5s; pointer-events: none; }
.room.is-in .room__glow { background: #ffe400; box-shadow: 0 0 18px 6px rgba(255, 228, 0, .7); }
.room.is-in .room__glow::after { opacity: 1; }
.room.is-in .room__lamp.is-off .room__glow { background: #d9d2c8; box-shadow: none; transition-delay: 0s; }
.room.is-in .room__lamp.is-off .room__glow::after { opacity: 0; transition-delay: 0s; }
@keyframes home-swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* the window: a piece of sky with a passing cloud, the curtains open */
.room__window { position: relative; display: block; width: 150px; height: 128px; margin-top: 70px; border: 8px solid #fff; border-radius: 10px 10px 4px 4px; box-shadow: 0 0 0 3px #e8b04b, 0 8px 14px -6px rgba(60, 40, 20, .4); overflow: hidden; }
.room__window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)); }
.room__sky { position: absolute; inset: 0; background: linear-gradient(#6fbdf6, #cfeafc); }
.room__sky b { position: absolute; top: 22px; left: -70px; width: 60px; height: 22px; border-radius: 12px; background: #fff; animation: home-cloud 14s linear infinite; animation-delay: calc(var(--k) * -4s); }
.room__sky b::before { content: ''; position: absolute; left: 12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
@keyframes home-cloud { to { transform: translateX(240px); } }
.room__curtain { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, var(--c) 0 8px, color-mix(in srgb, var(--c) 80%, #000) 8px 10px); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1) .3s; }
.room__curtain--l { left: 0; transform-origin: 0 50%; }
.room__curtain--r { right: 0; transform-origin: 100% 50%; }
.room.is-in .room__curtain { transform: scaleX(.28); }

/* the front door opens to a warm light, a mat lies in front of it */
.room__door { position: relative; display: block; width: 120px; height: 200px; margin-top: 60px; border: 8px solid #c58a3c; border-bottom: 0; border-radius: 60px 60px 0 0; }
.room__inside { position: absolute; inset: 0; border-radius: 52px 52px 0 0; background: radial-gradient(circle at 50% 60%, #fff3b0, #ffd54f 60%, #ffb300); }
.room__leaf { position: absolute; inset: 0; border-radius: 52px 52px 0 0; background: linear-gradient(90deg, #a96f3a, #c4864a 50%, #a96f3a); box-shadow: inset 0 0 0 8px rgba(0, 0, 0, .08); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.5, 0, .2, 1) .6s, filter 1.4s .6s; }
.room__leaf b { position: absolute; right: 14px; top: 52%; width: 12px; height: 12px; border-radius: 50%; background: #ffd54f; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
.room.is-in .room__leaf { transform: scaleX(.22) skewY(-8deg); filter: brightness(.8); }
.room__mat { position: absolute; left: -14px; right: -14px; bottom: -14px; height: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg, #ff5736 0 10px, #ff7b05 10px 20px); }

/* the photos on their own wall, each on a nail */
.room--photos { display: flex; justify-content: center; gap: 50px; padding: 50px 30px 56px; }
.frame { position: relative; flex: none; width: 300px; margin: 0; padding: 12px; background: #fff; box-shadow: 0 0 0 6px #c58a3c, 0 20px 30px -16px rgba(60, 40, 20, .6); transform-origin: 50% -40px; transform: rotate(calc(var(--k) * 4deg - 2deg)); }
.room--photos.is-in .frame { animation: home-hang 1.2s cubic-bezier(.3, .7, .4, 1) calc(var(--k) * .2s), home-sway calc(4s + var(--k) * .6s) ease-in-out 1.4s infinite alternate; }
.frame img { display: block; width: 100%; height: 210px; object-fit: cover; }
.frame__nail { position: absolute; left: 50%; top: -40px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #8c8c8c; }
.frame__nail::before, .frame__nail::after { content: ''; position: absolute; top: 5px; width: 2px; height: 50px; background: #6b5546; }
.frame__nail::before { left: 4px; transform-origin: 50% 0; transform: rotate(38deg); }
.frame__nail::after { left: 4px; transform-origin: 50% 0; transform: rotate(-38deg); }
@keyframes home-hang { 0% { transform: rotate(18deg); } 40% { transform: rotate(-8deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(calc(var(--k) * 4deg - 2deg)); } }
@keyframes home-sway { from { transform: rotate(calc(var(--k) * 4deg - 2deg)); } to { transform: rotate(calc(var(--k) * 4deg - 4.5deg)); } }

/* the ground the house stands on */
.home__ground { position: relative; height: 90px; margin-top: -30px; background: url('../images/background-grass-top.svg') repeat-x center top / 960px 35px, linear-gradient(transparent 28px, #7ad068 28px); }
.home__flowers { position: absolute; bottom: 30px; width: 244px; height: 88px; background: url('../images/flowers.svg') no-repeat center bottom / contain; transform-origin: 50% 100%; animation: home-sway-f 4s ease-in-out infinite alternate; }
.home__flowers--l { left: calc(50% - 760px); }
.home__flowers--r { right: calc(50% - 760px); transform: scaleX(-1); animation-name: home-sway-r; }
@keyframes home-sway-f { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }
@keyframes home-sway-r { from { transform: scaleX(-1) skewX(-3deg); } to { transform: scaleX(-1) skewX(3deg); } }

/* ---------- Smaller screens ---------- */
@media only screen and (max-width: 1100px) {
	.home__roof { margin: 0 -20px -2px; height: 160px; }
	.home__flowers { display: none; }
	.frame { width: 260px; }
}
@media only screen and (max-width: 768px) {
	.home__title { font-size: 30px; }
	.home__intro { padding: 22px; }
	.home__intro p { font-size: 17px; } .home__intro p:first-child { font-size: 23px; }
	.home__roof { height: 110px; margin: 0 -10px -2px; }
	.home__attic { top: 50px; width: 44px; height: 44px; margin-left: -22px; border-width: 4px; }
	.home__chimney { top: 18px; width: 34px; height: 64px; right: 18%; }
	.home__body { border-width: 8px; }
	.room, .room.is-right { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px 30px; border-bottom-width: 8px; }
	.room.is-right .room__deco { order: 0; }
	.room__deco { flex-direction: row; justify-content: center; padding-top: 50px; }
	.room__window { width: 120px; height: 100px; margin-top: 30px; }
	/* (its mat lay on the title under it) */
	.room__door { width: 90px; height: 150px; margin-top: 30px; margin-bottom: 26px; }
	.room__q { font-size: 24px; }
	.room__text p { font-size: 16px; }
	.room--photos { flex-direction: column; align-items: center; gap: 70px; padding-top: 60px; }
	.frame { width: 250px; }
	.frame img { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
	.home *, .home *::before, .home *::after { animation: none !important; transition: none !important; }
	.home__title, .home__intro, .home__roof, .room { opacity: 1 !important; transform: none !important; }
	.room .room__curtain { transform: scaleX(.28); } .room .room__leaf { transform: scaleX(.22) skewY(-8deg); }
}