/* Base */
html, body {
  height: 100%;
  margin: 0;
}

.hero{
  min-height:100vh;
  background:url("/images/lake.webp") center/cover no-repeat;
  position:relative;
  overflow:hidden;
}

/* Canoe overlay */
.canoeWrap{
  position:absolute;
  left:50%;
  top:72%;
  transform:translate(-40%,-60%);
  width:min(520px,55vw);
}

.canoe{
  width:100%;
  display:block;
  animation:bob 5.5s ease-in-out infinite;
}

@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%{ transform:translateY(-10px) rotate(1deg); }
}

/* Ripples */
.ripple{
  position:absolute;
  left:50%;
  top:78%;
  width:55%;
  aspect-ratio: 2.2/1;
  border:2px solid rgba(255,255,255,.35);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;
  animation:ripple 4.5s ease-out infinite;
}

.r2{ animation-delay:1.5s; }
.r3{ animation-delay:3s; }

@keyframes ripple{
  0%{ opacity:.55; transform:translate(-50%,-50%) scale(.7); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.35); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .canoe,.ripple{ animation:none; }
  .ripple{ opacity:0; }
}