/* Sea edge (includes/sea-edge.php): a tiny living wave on the bottom edge of every blue hero band.
   The strip sits INSIDE the band, on its last pixels, and draws the colour of the section below with a wavy top edge,
   so the blue reads as the sea surface with small crests facing down. Only transform is animated. */
.yns-sea {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--yns-sea-edge, 100%);
	height: var(--yns-sea-h, 16px);
	margin-top: calc(var(--yns-sea-h, 16px) * -1);
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.yns-sea svg {
	position: absolute;
	top: 0;
	left: calc(var(--yns-sea-l, 280px) * -1);
	height: calc(100% + 6px);
	display: block;
	overflow: visible;
}
.yns-sea__a, .yns-sea__b, .yns-sea__ga, .yns-sea__gb { will-change: transform; }
/* The surface slides one period (280px) in 7s, the ripple the other way (180px) in 10s; each layer also lifts and
   drops on its own uneven rhythm, so crests never pass at the same place twice in a row. */
.yns-sea__a { animation: yns-sea-a 7s linear infinite; }
.yns-sea__b { animation: yns-sea-b 10s linear infinite; }
.yns-sea__ga { animation: yns-sea-lift-a 5.3s ease-in-out infinite; }
.yns-sea__gb { animation: yns-sea-lift-b 7.9s ease-in-out infinite; }
.yns-sea__bob { position: absolute; inset: 0; animation: yns-sea-bob 6.1s ease-in-out infinite; }

@keyframes yns-sea-a { to { transform: translate3d(-280px, 0, 0); } }
@keyframes yns-sea-b { from { transform: translate3d(-180px, 0, 0); } to { transform: none; } }
@keyframes yns-sea-lift-a { 0%, 100% { transform: translateY(0); } 23% { transform: translateY(-1.4px); } 41% { transform: translateY(.4px); } 67% { transform: translateY(-.9px); } 84% { transform: translateY(.6px); } }
@keyframes yns-sea-lift-b { 0%, 100% { transform: translateY(0); } 31% { transform: translateY(1.2px); } 58% { transform: translateY(-1.3px); } 77% { transform: translateY(.3px); } }
@keyframes yns-sea-bob { 0%, 100% { transform: translateY(0); } 37% { transform: translateY(-1.2px); } 72% { transform: translateY(-.3px); } }

/* Where the blue ends inside the section instead of at its bottom. */
#hero { --yns-sea-edge: var(--ynm-band, 60%); --yns-sea-below: #FFFFFC; }
#about-hero { --yns-sea-edge: 72%; --yns-sea-below: #FFFFFC; }
@media (max-width: 767px) { #about-hero { --yns-sea-edge: 80%; } }

@media (prefers-reduced-motion: reduce) {
	.yns-sea__a, .yns-sea__b, .yns-sea__ga, .yns-sea__gb, .yns-sea__bob { animation: none; }
}