/* Assessment layer: one light-blue middle canvas with subtle moving water light. */
.title-page{
  background:var(--deep);
}

main>.section:not(.contact){
  border-top:1px solid transparent;
  border-image:linear-gradient(to right,transparent 20%,rgba(0,51,102,.24) 38%,rgba(0,51,102,.24) 62%,transparent 80%) 1;
  background-color:#e3f3f9;
  background-image:
    radial-gradient(ellipse at 12% 26%,rgba(255,255,255,.72) 0,rgba(255,255,255,.28) 18%,transparent 42%),
    radial-gradient(ellipse at 86% 72%,rgba(38,169,224,.13) 0,rgba(38,169,224,.05) 24%,transparent 50%),
    linear-gradient(118deg,rgba(255,255,255,.18) 12%,rgba(112,207,231,.1) 34%,rgba(255,255,255,.34) 52%,rgba(38,169,224,.08) 70%,rgba(255,255,255,.18) 88%);
  background-size:85% 150%,75% 135%,190% 190%;
  background-position:-12% 8%,112% 90%,0% 50%;
  animation:water-light-shift 18s ease-in-out infinite alternate;
}

main>.section:not(.contact):nth-of-type(even){
  animation-direction:alternate-reverse;
  animation-duration:22s;
}

.contact.section{
  padding:clamp(86px,10vw,145px) 0;
  background:var(--deep);
}

.contact .contact-panel{
  background:transparent;
}

@keyframes water-light-shift{
  from{background-position:-12% 8%,112% 90%,0% 50%}
  to{background-position:18% 24%,82% 70%,100% 48%}
}

@media(prefers-reduced-motion:reduce){
  main>.section:not(.contact){animation:none}
}