/* Homepage footer: sunset scenery and a separate, slowly sailing regatta. */
.regatta-footer {
  --boat-width:clamp(130px,16vw,240px);
  position:relative;isolation:isolate;display:block;overflow:hidden;
  width:100%;height:clamp(320px,32vw,400px);margin:-70px 0 0;padding:0;
  border:0;background:transparent url('../img/footer-seascape.png') center bottom/cover no-repeat;
}
.regatta-footer::before {
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
}
.regatta-footer__scene {position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.regatta-footer__sailing {
  position:absolute;bottom:8%;left:calc(-1 * var(--boat-width));width:var(--boat-width);
  animation:regatta-sail-across 65s linear infinite;animation-delay:-12s;will-change:transform;
}
.regatta-footer__boat {
  display:block;width:80%;height:auto;
  filter:drop-shadow(0 8px 7px rgba(0,8,20,.4));
  animation:regatta-gentle-bob 5s ease-in-out infinite;transform-origin:50% 90%;
}
.regatta-footer__credit {
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:22px 24px 18px;text-align:center;color:#f4e2bf;
  font:10px/1.6 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 2px 8px #000;
}
@keyframes regatta-sail-across {
  from {transform:translateX(0);}
  to {transform:translateX(calc(100vw + var(--boat-width)));}
}
@keyframes regatta-gentle-bob {
  0%,100% {transform:translateY(0) rotate(-1deg);}
  50% {transform:translateY(-5px) rotate(1deg);}
}
@media(max-width:680px) {
  .regatta-footer {height:200px;margin-top:20px;--boat-width:140px;background-position:64% bottom;}
  .regatta-footer__sailing {bottom:13%;animation-duration:48s;animation-delay:-10s;}
  .regatta-footer__credit {padding:20px 18px;font-size:9px;letter-spacing:.08em;}
}
@media(prefers-reduced-motion:reduce) {
  .regatta-footer__sailing {animation:none;left:16%;transform:none;will-change:auto;}
  .regatta-footer__boat {animation:none;}
}


.regatta-footer__credit{flex-direction:column;gap:3px}