/* עוגן מדיה: a cross-section of the sea. A boat rides the swell; its brass anchor drops on the chain through the light into the deep. */
.ns-sig--anchor { --sig-bg: #0c2d48; --sig-fg: #fff; min-height: clamp(38rem, 90svh, 56rem); align-items: start; padding-block: clamp(11rem, 31svh, 17rem) 3.5rem; background: radial-gradient(circle at 82% 92%, #fffbeb 3.2rem, transparent 3.3rem) 0 0 / 100% 15.5% no-repeat, linear-gradient(#fbbf24, #fef3c7 15%, #0e6d8a 16%, #0c4a6e 36%, #0c2d48 62%, #06182a) #0c2d48; }
.ns-sig--anchor .ns-sig__title { max-width: 60%; font-size: clamp(3.4rem, 8.6vw, 8rem); font-weight: 700; letter-spacing: -.02em; text-shadow: 0 .04em 0 #06182a; }
.ns-sig--anchor .ns-sig__tagline { font-size: clamp(1.2rem, 2.3vw, 1.75rem); }

.an-w { position: absolute; left: 0; width: 200%; animation: an-roll 16s linear infinite; }
.an-1 { top: 11%; height: 7%; fill: #22a7c4; animation-duration: 21s; }
.an-2 { top: 13%; height: 7%; fill: #0e7490; animation-direction: reverse; animation-duration: 15s; }
.an-3 { top: 15.5%; height: 12%; fill: url(#anF); stroke: #cffafe; stroke-opacity: .8; stroke-width: 2; animation-duration: 11s; }
.an-3 use { vector-effect: non-scaling-stroke; }
@keyframes an-roll { to { transform: translateX(-50%); } }

.an-col { position: absolute; inset-block: 0; inset-inline-end: 8%; width: clamp(13rem, 23vw, 21rem); }
.an-under { clip-path: inset(17.6% -100vw 0); }
.an-boat { position: absolute; left: 48%; top: 19%; width: 88%; translate: 0 -100%; transform-origin: 30% 80%; animation: an-bob 5.5s ease-in-out infinite alternate; }
@keyframes an-bob { from { transform: rotate(-2.6deg) translateY(.2rem); } to { transform: rotate(2.4deg) translateY(-.5rem); } }
.an-rays { position: absolute; top: 16%; left: -60%; width: 220%; height: 84%; filter: blur(7px); mix-blend-mode: screen; transform-origin: 50% 0; animation: an-rays 9s ease-in-out infinite alternate; }
@keyframes an-rays { from { transform: rotate(-3deg); opacity: .75; } to { transform: rotate(3deg); opacity: 1; } }
.an-drop { position: absolute; bottom: .9rem; left: 0; width: 100%; overflow: visible; animation: an-drop 2.9s cubic-bezier(.34, .02, .52, 1) both; }
@keyframes an-drop { from { transform: translateY(-78svh); } 86% { transform: translateY(.6rem); } }
.an-sway { transform-origin: 200px -800px; transform-box: view-box; animation: an-sway 8s 3s ease-in-out infinite alternate; }
@keyframes an-sway { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
.an-sand { position: absolute; bottom: 1rem; left: 50%; }
.an-sand i { position: absolute; bottom: 0; left: -7rem; width: 14rem; height: 5rem; border-radius: 50%; background: #1c4a66; opacity: 0; animation: an-puff 1.5s 2.4s ease-out forwards; }
.an-sand i:nth-child(2) { left: -13rem; animation-delay: 2.45s; }
.an-sand i:nth-child(3) { left: -1rem; animation-delay: 2.5s; }
@keyframes an-puff { from { opacity: .85; transform: scale(.2) translateY(2rem); } to { opacity: 0; transform: scale(1.3) translateY(-2rem); } }
.an-bub i { position: absolute; bottom: 6%; left: calc(50% + var(--x, 0px)); width: .7rem; aspect-ratio: 1; border: 2px solid #bae6fd; border-radius: 50%; opacity: 0; animation: an-up 6s ease-in infinite; }
.an-bub i:nth-child(2n) { --x: 26px; width: .4rem; animation-delay: -1.4s; animation-duration: 7.3s; }
.an-bub i:nth-child(3n) { --x: -30px; animation-delay: -3.2s; }
.an-bub i:nth-child(4n) { --x: 52px; width: .95rem; animation-delay: -4.6s; animation-duration: 8.2s; }
.an-bub i:nth-child(5) { --x: -56px; animation-delay: -2.2s; }
.an-bub i:nth-child(7) { --x: 12px; animation-delay: -5.4s; }
@keyframes an-up { from { transform: none; opacity: 0; } 12% { opacity: .85; } 92% { opacity: .5; } to { transform: translateY(-70svh) translateX(14px); opacity: 0; } }
.an-fish { position: absolute; inset-block-end: 11%; inset-inline-start: 7%; width: clamp(9rem, 20vw, 18rem); fill: #1b6a8c; animation: an-fish 15s ease-in-out infinite alternate; }
@keyframes an-fish { from { transform: translateX(2rem) translateY(.5rem); } to { transform: translateX(-11rem) translateY(-.7rem); } }
.an-floor { position: absolute; inset: auto 0 0; width: 100%; height: 5.5rem; }

@media (max-width: 767px) {
	.ns-sig--anchor { min-height: min(44rem, 92svh); padding-block-start: clamp(9rem, 26svh, 12rem); }
	.ns-sig--anchor .ns-sig__title { max-width: none; font-size: 15vw; }
	.an-col { inset-inline-end: 0; width: 10.8rem; }
	.an-fish { inset-inline-start: 34%; }
	.an-rays { left: -70%; width: 200%; opacity: .6; }
}

/* touches: a small anchor before section titles; a card that settles a little, as on a swell */
body.ns-sig-anchor .ns-cat-block__head .ns-section-title::before { content: "\2693\FE0E" / ""; margin-inline-end: .4em; color: #d97706; }
body.ns-sig-anchor .ns-fc { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
body.ns-sig-anchor .ns-fc:hover { transform: translateY(5px) rotate(-.5deg); }
body.ns-sig-anchor .ns-footer { border-block-start: 6px solid #0e7490; }