/* "Защо Монтесори" as the sea of the home page (parts/why.php): the heading on the waves with the dolphin jumping
   over it, the reasons rising like bubbles in the deep water among the fish and the octopus, the photos in portholes,
   the numbered points on the sea floor in open shells, with the crab, the starfish and the snail on the sand. */

.sea { position: relative; margin-top: 20px; overflow: hidden; --run: calc(100vw + 320px); }
.bg .sea__title, .bg .sea__deca-title { font-family: 'Neucha', Arial, sans-serif; }

/* ---------- The surface ---------- */
.sea__surface { position: relative; padding: 80px 0 170px; background: linear-gradient(#8fdcf3, #52c6e8 55%); }
.sea__title { position: relative; z-index: 3; margin: 0 auto; font: 400 48px/1.2 'Cabin Sketch', Arial, sans-serif; text-align: center; color: #fff; text-shadow: 0 3px 12px rgba(0, 80, 140, .35); opacity: 0; transform: translateY(30px); transition: opacity .8s, transform 1s cubic-bezier(.34, 1.4, .64, 1); }
.sea__title.is-in { opacity: 1; transform: none; animation: sea-float 4s ease-in-out 1s infinite alternate; }
@keyframes sea-float { from { transform: none; } to { transform: translateY(-6px) rotate(.6deg); } }
.sea__wave { position: absolute; left: 0; width: calc(100% + 2216px); height: 120px; background: url('../images/wave.svg') repeat-x 0 0 / 2216px 120px; animation: sea-wave 18s linear infinite; pointer-events: none; }
.sea__wave--a { z-index: 2; bottom: 34px; opacity: .45; animation-duration: 26s; animation-direction: reverse; }
.sea__wave--b { z-index: 4; bottom: -36px; }
@keyframes sea-wave { to { transform: translateX(-2216px); } }
/* the fish swim the way they look (the yellow one and the school right, the striped one and the angler left); they
   glide by transform across the whole width (--run), which stays smooth where moving `left` would not */
.sea__fish { position: absolute; z-index: 3; pointer-events: none; }
.sea__fish--1 { bottom: 70px; left: -140px; width: 110px; height: 80px; background: url('../images/fish-1.svg') no-repeat center / contain; animation: sea-right 16s linear infinite, sea-bob 2.4s ease-in-out infinite alternate; }
.sea__fish--2 { bottom: 40px; left: 100%; width: 120px; height: 94px; background: url('../images/fish-2.svg') no-repeat center / contain; animation: sea-left 21s linear -8s infinite, sea-bob 2.8s ease-in-out infinite alternate; }
@keyframes sea-right { from { transform: translateX(0); } to { transform: translateX(var(--run)); } }
@keyframes sea-left { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--run))); } }
@keyframes sea-bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
/* the dolphin (it looks right) comes up from under the front wave, leaps over the heading from left to right along
   one smooth arc with its nose ahead, and dives back under the wave, where the water splashes; both ends of the arc
   are under the water: the front wave (z-index 4) and the deep water (z-index 3, after it) hide it there */
.sea__dolphin-arc { position: absolute; z-index: 3; left: 50%; bottom: 158px; width: 0; height: 0; pointer-events: none; }
.sea__dolphin { position: absolute; left: 0; top: 0; width: 172px; height: 96px; background: url('../images/dolphin.svg') no-repeat center / contain; offset-path: path('M -400 230 Q 0 -454 400 230'); offset-anchor: center; offset-rotate: auto; animation: sea-leap 9s cubic-bezier(.3, .55, .7, .45) infinite; }
@keyframes sea-leap { 0% { offset-distance: 0%; } 52%, 100% { offset-distance: 100%; } }
.sea__splash { position: absolute; z-index: 5; left: calc(50% + 320px); bottom: 20px; pointer-events: none; }
.sea__splash i { position: absolute; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #e9f6ff; opacity: 0; animation: sea-drop 9s ease-out infinite; }
.sea__splash i:nth-child(1) { --dx: -40px; } .sea__splash i:nth-child(2) { --dx: -14px; } .sea__splash i:nth-child(3) { --dx: 14px; } .sea__splash i:nth-child(4) { --dx: 40px; }
@keyframes sea-drop { 0%, 45% { opacity: 0; transform: translate(0, 0); } 47% { opacity: 1; } 54% { transform: translate(calc(var(--dx) * .7), -54px); } 61%, 100% { opacity: 0; transform: translate(var(--dx), 14px); } }

/* ---------- The deep water ---------- */
.sea__deep { position: relative; z-index: 3; padding: 70px 0 0; background: url('../images/underwater-top.svg') repeat-x center top / 2216px 60px, linear-gradient(#52c6e8 0, #52c6e8 30px, #1576c9 31px, #0f64b3 45%, #0b4f91); }
.sea__deep::before { content: ''; position: absolute; inset: 60px 0 0; background: url('../images/ocean-background.svg') repeat-y center top / 1920px 1080px; opacity: .55; pointer-events: none; }
.sea__deep .kit-bubbles { position: absolute; inset: 0; z-index: 0; }
.sea__school { position: absolute; z-index: 0; top: 160px; left: -200px; width: 190px; height: 122px; background: url('../images/fish-4.svg') no-repeat center / contain; opacity: .8; animation: sea-right 34s linear infinite, sea-bob 3s ease-in-out infinite alternate; pointer-events: none; }
.sea__angler { position: absolute; z-index: 0; top: 55%; left: 100%; width: 170px; height: 84px; background: url('../images/fish-3.svg') no-repeat center / contain; animation: sea-left 46s linear -20s infinite, sea-bob 3.6s ease-in-out infinite alternate; pointer-events: none; }

/* the reasons: each one rises like a bubble and settles */
.sea__reasons { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding-top: 30px; }
.sea__col { margin: 0; padding: 0; list-style: none; }
.reason { position: relative; margin: 0 0 18px; padding: 18px 24px 18px 70px; border-radius: 24px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 30px -18px rgba(0, 20, 60, .6); opacity: 0; transform: translateY(60px) scale(.94); transition: transform .3s; }
.reason.is-in { animation: sea-rise 1.1s cubic-bezier(.3, .8, .4, 1) calc(var(--k) * .12s) forwards; }
@keyframes sea-rise { 0% { opacity: 0; transform: translateY(60px) scale(.94); } 50% { opacity: 1; transform: translateY(-6px) scale(1.01); } 75% { transform: translateY(3px) scale(.995); } 100% { opacity: 1; transform: none; } }
.reason p { margin: 0; font-size: 16px; line-height: 1.65; color: #3c4741; }
/* a pearl with a ring in the reason's colour: it pops in (scale) and shines under the pointer (transform, a
   transition both ways), two separate properties, so the hover never takes the pearl's coming-in away */
.reason__pearl { position: absolute; left: 20px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #eef3fa 30%, #c9d6e6 75%, #b2c2d6); box-shadow: 0 0 0 4px var(--c), 0 4px 8px rgba(0, 30, 70, .35); scale: 0; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) calc(.5s + var(--k) * .12s), transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .5s; }
.reason.is-in .reason__pearl { scale: 1; }
.reason:hover .reason__pearl { transform: scale(1.22) rotate(20deg); filter: brightness(1.12); }

/* the photos in portholes, the octopus dancing between them */
.sea__ports { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 50px 40px 30px; }
.port { position: relative; flex: none; width: 300px; height: 300px; margin: 0; padding: 0; border-radius: 50%; overflow: hidden; border: 16px solid #e0b94e; box-shadow: 0 0 0 4px #b48a2c, 0 20px 40px -14px rgba(0, 10, 40, .7), inset 0 0 0 4px #b48a2c; opacity: 0; transform: scale(.6) rotate(-30deg); transition: opacity .8s, transform 1.2s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(var(--k) * .25s); }
.port.is-in { opacity: 1; transform: none; animation: sea-port 3.4s ease-in-out 1.4s infinite alternate; }
@keyframes sea-port { from { translate: 0 0; } to { translate: 0 12px; } }
.port img { display: block; width: 100%; height: 100%; object-fit: cover; }
.port::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.sea__octopus { position: absolute; z-index: 1; left: 50%; top: 50%; width: 220px; height: 166px; margin: -70px 0 0 -110px; background: url('../images/octopus.svg') no-repeat center / contain; transform-origin: 50% 80%; animation: sea-dance 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sea-dance { 0%, 100% { transform: translateY(0) skewX(0) scale(1, 1); } 25% { transform: translateY(-12px) skewX(-6deg) scale(1.04, .97); } 50% { transform: translateY(-26px) skewX(0) scale(.96, 1.05); } 75% { transform: translateY(-12px) skewX(6deg) scale(1.04, .97); } }

/* ---------- The sea floor: the numbered points in open shells ---------- */
.sea__floor { position: relative; padding: 60px 0 0; background: url('../images/underwater-background.svg') no-repeat center bottom 90px / 1360px 500px; }
.sea__deca-title { position: relative; z-index: 1; margin: 0 auto 40px; font: 400 36px/1.25 'Cabin Sketch', Arial, sans-serif; text-align: center; color: #fff; opacity: 0; transform: translateY(20px); transition: opacity .8s, transform .8s; }
.sea__deca-title.is-in { opacity: 1; transform: none; }
.sea__deca { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 30px; margin: 0 auto; padding: 0; list-style: none; }
.shell { position: relative; padding: 22px 24px 22px 104px; border-radius: 24px; background: #fff; box-shadow: 0 18px 30px -18px rgba(0, 20, 60, .6); opacity: 0; transform: translateY(40px); transition: opacity .7s calc(var(--k) * .15s), transform .9s cubic-bezier(.34, 1.3, .64, 1) calc(var(--k) * .15s); }
.shell.is-in { opacity: 1; transform: none; }
.shell p { margin: 0; font-size: 16px; line-height: 1.65; color: #3c4741; }
/* the shell opens (scale) and its pearl carries the number; under the pointer it rocks (transform, a transition) */
.shell__clam { position: absolute; left: 10px; top: -20px; width: 84px; height: 63px; background: url('../images/clamshell.svg') no-repeat center / contain; transform-origin: 50% 90%; scale: .3 .1; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .5s; }
.shell.is-in .shell__clam { animation: sea-open .9s cubic-bezier(.34, 1.56, .64, 1) calc(.35s + var(--k) * .15s) forwards; }
@keyframes sea-open { 0% { scale: .3 .1; } 60% { scale: 1.08 1.12; } 100% { scale: 1; } }
.shell__clam b { position: absolute; left: 50%; top: 66%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; color: #0f64b3; font: 700 15px/1 'Open Sans', Arial, sans-serif; }
.shell:hover .shell__clam { transform: scale(1.12) rotate(-8deg); filter: brightness(1.1); }

/* the sand with its creatures */
.sea__sand { position: relative; height: 150px; margin-top: 70px; }
.sea__sand::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 110px; border-radius: 50% 50% 0 0 / 60px 60px 0 0; background: #f0d8a6; box-shadow: inset 0 10px 0 #f7e6c2; }
.sea__star { position: absolute; z-index: 1; left: 12%; bottom: 40px; width: 92px; height: 88px; background: url('../images/star.svg') no-repeat center / contain; animation: sea-star 9s ease-in-out infinite; }
@keyframes sea-star { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg) scale(1.06); } }
.sea__crab { position: absolute; z-index: 1; left: 30%; bottom: 46px; width: 96px; height: 99px; background: url('../images/crab.svg') no-repeat center / contain; animation: sea-side 9s ease-in-out infinite alternate, sea-step .32s ease-in-out infinite alternate; }
@keyframes sea-side { from { left: 26%; } to { left: 58%; } }
@keyframes sea-step { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
.sea__snail { position: absolute; z-index: 1; right: 10%; bottom: 44px; width: 90px; height: 60px; background: url('../images/snail.svg') no-repeat center / contain; transform-origin: 30% 100%; animation: sea-squash 1.2s ease-in-out infinite; }
@keyframes sea-squash { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.07, .94); } }

/* ---------- Smaller screens ---------- */
@media only screen and (max-width: 1100px) {
	.port { width: 240px; height: 240px; }
	.sea__octopus { width: 170px; height: 128px; margin-left: -85px; }
	.sea__deca { gap: 40px 20px; }
}
@media only screen and (max-width: 768px) {
	.sea__surface { padding: 60px 0 150px; }
	.sea__title { font-size: 34px; }
	/* a smaller dolphin and a narrower leap that stays on the screen */
	.sea__dolphin-arc { bottom: 100px; }
	.sea__dolphin { width: 104px; height: 58px; offset-path: path('M -150 140 Q 0 -330 150 140'); }
	.sea__splash { display: none; }
	.sea__reasons, .sea__deca { grid-template-columns: 1fr; }
	.reason { padding: 16px 18px 16px 62px; }
	.reason__pearl { left: 16px; width: 30px; height: 30px; }
	.sea__ports { flex-direction: column; gap: 150px; padding: 40px 0 20px; }
	.port { width: 230px; height: 230px; }
	.sea__octopus { top: 50%; margin-top: -80px; }
	/* (their own "margin: 0 auto" took away the side room the .wrapper gives on a phone: the cards touched the edges) */
	.sea__deca-title { font-size: 28px; margin: 0 20px 40px; }
	.sea__deca { margin: 0 20px; }
	.shell { padding: 52px 18px 20px; }
	.shell__clam { left: 50%; margin-left: -42px; top: -30px; }
	.sea__floor { background-size: 900px 331px; }
	/* the crab walks a shorter way: on a phone it walked into the snail */
	.sea__crab { width: 74px; height: 76px; animation-name: sea-side-m, sea-step; }
	@keyframes sea-side-m { from { left: 30%; } to { left: 50%; } }
	.sea__star { left: 6%; width: 70px; height: 67px; }
	.sea__snail { right: 4%; width: 72px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.sea *, .sea *::before, .sea *::after { animation: none !important; transition: none !important; }
	.sea__title, .reason, .port, .shell, .sea__deca-title { opacity: 1 !important; transform: none !important; }
	.reason__pearl, .shell__clam { scale: 1 !important; transform: none !important; }
	.sea__dolphin, .sea__splash, .sea__fish, .sea__school, .sea__angler { display: none; }
}