/* "История" as a living timeline (parts/history.php): calendar sheets that drop in and get pinned, years that roll
   like a counter, a line that draws itself with the scroll, the house of the site building itself, balloons for the
   three freedoms and Maria Montessori saying her words from her photo. */

.hist { position: relative; padding: 10px 0 70px; overflow: hidden; }
.bg .hist h2, .bg .hist h3, .bg .sheet__label, .bg .quote__bubble { font-family: 'Neucha', Arial, sans-serif; }
.hist__clouds { position: absolute; z-index: 0; left: 0; top: 0; width: 3840px; height: 330px; background: url('../images/clouds3.svg') repeat-x 0 0 / 1920px 330px; opacity: .55; animation: hist-clouds 120s linear infinite; pointer-events: none; }
@keyframes hist-clouds { from { transform: translateX(0); } to { transform: translateX(-1920px); } }

/* appearing: every part waits for the reader (history.js adds .is-in) */
[data-reveal] { --in: 0; }
[data-reveal].is-in { --in: 1; }

/* ---------- The opening ---------- */
.hist__lead { position: relative; z-index: 1; display: flex; align-items: center; gap: 50px; padding: 30px 0 60px; }
.hist__photo { position: relative; display: block; margin: 0; padding: 12px 12px 14px; background: #fff; box-shadow: 0 24px 40px -22px rgba(60, 40, 20, .6); }
.hist__photo img { display: block; width: 100%; height: auto; filter: sepia(.35); transition: filter 1.2s; }
.hist__photo:hover img { filter: none; }
.hist__photo--lead { flex: none; width: 300px; transform: translateY(-260px) rotate(-14deg); opacity: 0; }
.is-in .hist__photo--lead, .is-in .hist__photo--quote { animation: hist-drop 1.3s cubic-bezier(.3, .7, .4, 1) forwards, hist-sway 6s ease-in-out 1.3s infinite alternate; }
.hist__pin { position: absolute; z-index: 2; left: 50%; top: -10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a85, #ff5736 60%, #c93a1f); box-shadow: 0 3px 4px rgba(0, 0, 0, .3); transform: scale(0); }
.is-in .hist__pin { animation: hist-pin .5s cubic-bezier(.34, 1.56, .64, 1) 1.05s forwards; }
.hist__lead-text { flex: 1; min-width: 0; }
.hist__lead-title { margin: 18px 0 0; font: 400 36px/1.25 'Cabin Sketch', Arial, sans-serif; color: #3c4741; opacity: 0; transform: translateY(20px); transition: opacity .8s .6s, transform .8s .6s; }
.is-in .hist__lead-title { opacity: 1; transform: none; }

/* ---------- The year counter (the years of the sheets and of the opening) ---------- */
.odo { display: inline-flex; gap: 6px; }
.odo__col { display: block; width: 46px; height: 66px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 8px 16px -10px rgba(60, 40, 20, .5), inset 0 -3px 0 #efe6da; }
.odo__col > span { display: block; font: 400 56px/66px 'Neucha', Arial, sans-serif; text-align: center; color: #8763be; transform: translateY(calc(var(--d, 0) * -66px)); transition: transform 1.6s cubic-bezier(.5, -0.15, .3, 1.2); }
.odo__col:nth-child(2) > span { color: #ff5736; transition-delay: .1s; }
.odo__col:nth-child(3) > span { color: #52aae8; transition-delay: .2s; }
.odo__col:nth-child(4) > span { color: #7ad068; transition-delay: .3s; }
.odo--big .odo__col { width: 70px; height: 100px; border-radius: 14px; }
.odo--big .odo__col > span { font-size: 86px; line-height: 100px; transform: translateY(calc(var(--d, 0) * -100px)); }

/* ---------- The line in the middle ---------- */
.hist__flow { position: relative; z-index: 1; }
.hist__line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hist__line line { stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hist__line-bg { stroke: #d9cdbf; stroke-width: 4; stroke-dasharray: 2 14; }
.hist__line-fg { stroke: #ff7b05; stroke-width: 6; stroke-dasharray: var(--len, 10000px); stroke-dashoffset: calc(var(--len, 10000px) * (1 - var(--p, 0))); }
.hist__items { position: relative; margin: 0; padding: 0; list-style: none; }
.hist__item { position: relative; padding: 0 0 50px; }
.hist__dot { position: absolute; z-index: 2; left: 50%; top: 40px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; border: 4px solid #d9cdbf; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, background .3s; }
/* the sheets are half as wide as the timeline: their dot sits on the line, at their inner edge */
.hist__item--year.is-left .hist__dot { left: 100%; }
.hist__item--year.is-right .hist__dot { left: 0; }
.hist__item.is-in .hist__dot { transform: scale(1); }
.hist__item.is-active .hist__dot { border-color: #ff7b05; background: #ffe400; transform: scale(1.35); box-shadow: 0 0 0 8px rgba(255, 123, 5, .15); }

/* ---------- A calendar sheet ---------- */
.hist__item--year { width: 50%; }
.hist__item--year.is-left { padding-right: 60px; }
.hist__item--year.is-right { margin-left: 50%; padding-left: 60px; }
/* the sheets on the two sides overlap in height, so the timeline is not twice as long */
.hist__item--year.is-right + .hist__item--year.is-left, .hist__item--year.is-left + .hist__item--year.is-right { margin-top: -140px; }
.sheet { position: relative; margin: 0; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 22px 40px -24px rgba(60, 40, 20, .55); transform-origin: 50% 0; opacity: 0; transform: translateY(-120px) rotate(var(--r0, -8deg)); }
.is-right .sheet { --r0: 8deg; --r1: 1.2deg; }
.is-left .sheet { --r1: -1.2deg; }
.hist__item--year.is-in .sheet { animation: hist-sheet 1.1s cubic-bezier(.3, .7, .4, 1) forwards, hist-sheet-sway 7s ease-in-out 1.1s infinite alternate; }
.hist__item--year.is-active .sheet { box-shadow: 0 30px 50px -24px rgba(60, 40, 20, .7); }
.sheet__rings { position: absolute; z-index: 2; left: 30px; right: 30px; top: -10px; height: 24px; background: radial-gradient(circle at 50% 70%, #4a3b2c 0 4px, transparent 5px) 0 0 / 34px 24px repeat-x; }
.sheet__top { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 14px 16px; border-radius: 14px 14px 0 0; background: #ff5736; }
.is-right .sheet__top { background: #52aae8; }
.hist__item--year:nth-child(4n+3) .sheet__top { background: #7ad068; }
.hist__item--year:nth-child(4n) .sheet__top { background: #8763be; }
.sheet__label { font: 400 44px/1.1 'Cabin Sketch', Arial, sans-serif; color: #fff; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.sheet__text { padding: 22px 26px 26px; font: 400 16px/1.7 'Open Sans', Arial, sans-serif; color: #3c4741; }
.sheet__text p { margin: 0 0 10px; }
.sheet__text strong { color: #ff5736; }
.sheet__text i { color: #8763be; }
/* a photo of the year, glued under its text like a snapshot (2026-11-09: 1919, 1929) */
.sheet__photo { margin: -4px 26px 28px; padding: 8px 8px 10px; background: #fff; box-shadow: 0 12px 24px -14px rgba(60, 40, 20, .6), 0 0 0 1px #f0e8dc; transform: rotate(-1.5deg); }
.is-right .sheet__photo { transform: rotate(1.5deg); }
.sheet__photo img { display: block; width: 100%; height: auto; filter: sepia(.35); transition: filter 1.2s; }
.sheet__photo:hover img { filter: none; }

/* ---------- The note: the first Casa dei Bambini ---------- */
.hist__item--note { padding: 30px 0 70px; }
.hist__item--note .hist__dot { top: 0; }
.note { position: relative; display: flex; align-items: center; gap: 30px; max-width: 900px; margin: 0 auto; padding: 30px 34px; border-radius: 30px; background: #fffdf6; box-shadow: 0 26px 44px -26px rgba(60, 40, 20, .55); opacity: 0; transform: scale(.9); transition: opacity .6s, transform .8s cubic-bezier(.34, 1.4, .64, 1); }
.is-in .note { opacity: 1; transform: none; }
.note__house { position: relative; flex: none; width: 240px; height: 206px; background: url('../images/montessorihouse.svg') no-repeat center bottom / contain; clip-path: inset(100% 0 0 0); }
.is-in .note__house { animation: hist-build 2.4s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
.note__fan { position: absolute; left: 58%; top: 52.3%; width: 6.43%; height: 7.83%; background: url('../images/fan.svg') no-repeat center / contain; animation: hist-spin 1.4s linear infinite; }
.note__smoke { position: absolute; left: 62%; top: 2%; }
.note__smoke i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(190, 200, 210, .9); opacity: 0; animation: hist-puff 3s ease-out infinite; }
.note__smoke i:nth-child(2) { animation-delay: 1s; } .note__smoke i:nth-child(3) { animation-delay: 2s; }
.note__text { margin: 0; font: 400 30px/1.3 'Cabin Sketch', Arial, sans-serif; color: #3c4741; }
/* the real building of the first Casa dei Bambini instead of the drawn house (2026-11-09) */
.hist__photo--note { --r: -10deg; flex: none; width: 320px; opacity: 0; transform: translateY(-200px) rotate(-10deg); }
.is-in .hist__photo--note { animation: hist-drop 1.3s cubic-bezier(.3, .7, .4, 1) .2s forwards, hist-sway 6s ease-in-out 1.5s infinite alternate; }

/* ---------- The three freedoms: balloons ---------- */
.hist__item--freedoms { padding: 10px 0 60px; }
.free { display: flex; justify-content: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.free__balloon { position: relative; width: 190px; height: 330px; opacity: 0; transform: translateY(260px); }
.is-in .free__balloon { animation: hist-rise 1.6s cubic-bezier(.2, .8, .3, 1) forwards, hist-bob 5s ease-in-out 1.6s infinite alternate; animation-delay: calc(var(--k) * .2s), calc(1.6s + var(--k) * -1.4s); }
.free__body { position: absolute; left: 50%; top: 0; display: flex; align-items: center; justify-content: center; width: 180px; height: 216px; margin-left: -90px; padding: 22px; box-sizing: border-box; border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%; background: radial-gradient(ellipse at 34% 28%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%), var(--c); box-shadow: inset -14px -20px 30px rgba(0, 0, 0, .16), 0 24px 30px -22px rgba(0, 0, 0, .45); color: #fff; font: 400 25px/1.15 'Neucha', Arial, sans-serif; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.free__body::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom: 13px solid var(--c); filter: brightness(.85); transform: rotate(180deg); }
.free__balloon:hover .free__body { transform: translateY(-10px) scale(1.06) rotate(-3deg); }
.free__string { position: absolute; left: 50%; top: 226px; width: 20px; height: 104px; margin-left: -10px; fill: none; stroke: #6b5a48; stroke-width: 2; opacity: .7; transform-origin: 50% 0; animation: hist-string 4s ease-in-out infinite alternate; }
.free__balloon.is-blue { --c: #52aae8; }
.free__balloon.is-green { --c: #7ad068; }
.free__balloon.is-red { --c: #ff5736; }
.free__balloon.is-yellow { --c: #ffc800; }
.free__balloon.is-purple { --c: #8763be; }
.free__balloon.is-orange { --c: #ff7b05; }

/* ---------- Maria Montessori says her words ---------- */
.hist__item--quote { padding: 20px 0 70px; }
.quote { display: flex; align-items: center; justify-content: center; gap: 40px; margin: 0; }
/* (the photo of Maria with the children is shown big: at a small size nothing in it could be made out) */
.hist__photo--quote { flex: none; width: 500px; transform: translateY(-260px) rotate(12deg); opacity: 0; }
.quote__bubble { position: relative; max-width: 520px; margin: 0; padding: 30px 36px; border-radius: 36px; background: #fff; box-shadow: 0 24px 40px -24px rgba(60, 40, 20, .55); font: 400 34px/1.3 'Cabin Sketch', Arial, sans-serif; color: #8763be; opacity: 0; transform: scale(.6); transform-origin: 0 60%; transition: opacity .4s 1s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1s; }
.quote__bubble::before { content: ''; position: absolute; left: -26px; top: 50%; margin-top: -18px; border: 18px solid transparent; border-right: 30px solid #fff; border-left: 0; }
.is-in .quote__bubble { opacity: 1; transform: none; }
.quote__bubble p { margin: 0; font: inherit; color: inherit; }
.quote__bubble footer { margin-top: 14px; font: 700 15px/1 'Open Sans', sans-serif; color: #ff5736; letter-spacing: .08em; text-transform: uppercase; }
.quote__bubble .w { display: inline-block; opacity: 0; transform: translateY(14px) rotate(4deg); transition: opacity .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(1.4s + var(--w) * .12s); }
.is-in .quote__bubble .w { opacity: 1; transform: none; }

@keyframes hist-drop { 0% { opacity: 1; transform: translateY(-260px) rotate(var(--r, -14deg)); } 60% { transform: translateY(14px) rotate(4deg); } 80% { transform: translateY(-6px) rotate(-2deg); } 100% { opacity: 1; transform: translateY(0) rotate(-2deg); } }
@keyframes hist-sway { from { transform: rotate(-2deg); } to { transform: rotate(1.5deg); } }
@keyframes hist-pin { from { transform: scale(0) translateY(-20px); } to { transform: scale(1); } }
@keyframes hist-sheet { 0% { opacity: 0; transform: translateY(-120px) rotate(var(--r0)); } 30% { opacity: 1; } 65% { transform: translateY(10px) rotate(calc(var(--r1) * -2)); } 85% { transform: translateY(-4px) rotate(var(--r1)); } 100% { opacity: 1; transform: translateY(0) rotate(var(--r1)); } }
@keyframes hist-sheet-sway { from { opacity: 1; transform: rotate(var(--r1)); } to { opacity: 1; transform: rotate(calc(var(--r1) * -.6)); } }
@keyframes hist-build { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hist-spin { to { transform: rotate(360deg); } }
@keyframes hist-puff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(30px, -70px) scale(2.2); opacity: 0; } }
@keyframes hist-rise { 0% { opacity: 0; transform: translateY(260px) rotate(4deg); } 30% { opacity: 1; } 80% { transform: translateY(-12px) rotate(-1deg); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes hist-bob { from { opacity: 1; transform: translateY(0) rotate(-2deg); } to { opacity: 1; transform: translateY(-16px) rotate(2deg); } }
@keyframes hist-string { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

@media only screen and (max-width: 1100px) {
	.hist__lead { gap: 30px; }
	.hist__photo--lead { width: 240px; }
	.hist__lead-title { font-size: 30px; }
	.free { gap: 10px; }
	.hist__photo--quote { width: 420px; }
	.quote__bubble { font-size: 30px; }
}
@media only screen and (max-width: 768px) {
	.hist__lead { flex-direction: column; padding: 20px 0 40px; text-align: center; }
	.hist__photo--lead { width: 70%; max-width: 280px; }
	.hist__lead-title { font-size: 25px; }
	.odo--big .odo__col { width: 54px; height: 78px; }
	.odo--big .odo__col > span { font-size: 66px; line-height: 78px; transform: translateY(calc(var(--d, 0) * -78px)); }
	/* the line runs down the left edge, the sheets beside it */
	.hist__line { left: calc(-50% + 25px); }
	.hist__dot { left: 25px; }
	.hist__item--year, .hist__item--year.is-left, .hist__item--year.is-right { width: auto; margin: 0 !important; padding: 0 0 40px 42px; }
	.hist__item--year.is-left .hist__dot, .hist__item--year.is-right .hist__dot { left: 25px; }
	.sheet__text { padding: 18px 18px 20px; font-size: 15px; }
	.sheet__label { font-size: 34px; }
	.note { flex-direction: column; padding: 22px; margin-left: 30px; text-align: center; }
	.note__house { width: 200px; height: 172px; }
	.hist__photo--note { width: 100%; max-width: 320px; box-sizing: border-box; }
	.note__text { font-size: 23px; }
	.sheet__photo { margin: -4px 18px 22px; }
	.free { flex-direction: column; align-items: center; gap: 0; padding-left: 30px; }
	.free__balloon { height: 260px; }
	.free__string { height: 34px; }
	.quote { flex-direction: column; gap: 30px; padding-left: 30px; }
	.hist__photo--quote { width: 100%; max-width: 460px; box-sizing: border-box; }
	.quote__bubble { font-size: 26px; padding: 22px; transform-origin: 50% 0; }
	.quote__bubble::before { left: 50%; top: -26px; margin: 0 0 0 -18px; border: 18px solid transparent; border-bottom: 30px solid #fff; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hist *, .hist *::before { animation: none !important; transition: none !important; }
	.sheet, .free__balloon, .hist__photo--lead, .hist__photo--quote, .hist__photo--note, .note, .quote__bubble, .quote__bubble .w, .hist__lead-title { opacity: 1 !important; transform: none !important; }
	.note__house { clip-path: none; }
	.hist__pin, .hist__dot { transform: none; }
}