.header-block .logo { width: 210px; }
.header-block { transition: box-shadow .35s ease, background-color .35s ease; }
.header-block.scrolled { box-shadow: 0 6px 24px #0000000b; }
.s1, .s6 { background-repeat: no-repeat; }
.motion-visible.s1 { animation: hero-drift 26s ease-in-out infinite alternate; }
.motion-visible.s6 { animation: ocean-drift 32s ease-in-out infinite alternate; }
.motion-visible .circles .circle { animation: circle-breathe 8s ease-in-out infinite; }
.s4 .bg-imgs { overflow: hidden; clip-path: inset(0); contain: paint; }
.s4 .bg-img { display: block; opacity: 0; transform: scale(1.025); transition: opacity 1.8s cubic-bezier(.22,.45,.25,1), transform 2.6s cubic-bezier(.22,.45,.25,1); }
.s4 .bg-img.active { display: block; opacity: 1; transform: scale(1); transition-delay: .25s; }
.motion-visible .circles .circle:nth-child(2) { animation-delay: .15s; }
.motion-visible .circles .circle:nth-child(3) { animation-delay: .3s; }
.motion-visible .circles .circle:nth-child(4) { animation-delay: .45s; }
.motion-visible .circles .circle:nth-child(5) { animation-delay: .6s; }
.s4 .inner-box li { transition: color .25s, border-color .25s, background-color .25s, transform .25s; }
@media (hover: hover) {
  .s4 .inner-box li:hover { transform: translateX(4px); }
  .footer-block input[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #25a4da26; }
}
.footer-block input[type=submit] { transition: background-color .25s, transform .25s, box-shadow .25s; }
@keyframes hero-drift { from { background-position: 50% 50%; } to { background-position: 50% 46%; } }
@keyframes ocean-drift { from { background-position: 50% 50%; } to { background-position: 52% 48%; } }
@keyframes circle-breathe { 0%, 50%, 100% { transform: scale(1); opacity: 1; } 25% { transform: scale(.8); opacity: .55; } }
@media (max-width: 1280px) { .header-block__mobile .logo { width: 170px; max-width: 52%; } }
@media (max-width: 767px) {
  @keyframes hero-drift { from { background-position: 28% 50%; } to { background-position: 30% 48%; } }
  @keyframes ocean-drift { from { background-position: 58% 50%; } to { background-position: 60% 48%; } }
}
@media (prefers-reduced-motion: reduce) {
  .motion-visible.s1, .motion-visible.s6, .motion-visible .circles .circle { animation: none; }
  .s4 .inner-box li:hover, .footer-block input[type=submit]:hover, .s4 .bg-img { transform: none; }
  .s4 .bg-img, .s4 .bg-img.active { transition: none; transition-delay: 0s; }
}