/* ============================================================
   Adriatic sea background
   ------------------------------------------------------------
   A single fixed layer that sits behind all page content. The
   hero, content cards and footer are opaque and paint over it,
   so the water shows only in the light gaps between sections —
   exactly where the flat mist background used to be.

   Three translucent ripple textures are stacked over a soft
   pale-blue gradient. They drift horizontally on their own and
   shift vertically with scroll (see sea.js), evoking the calm
   movement of the sea. Colours stay inside the site's existing
   pale-blue palette so dark navy headings remain fully readable,
   and everything is GPU-cheap: no images, just inline SVG tiles.
   ============================================================ */

.sea-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  /* Calm water gradient — a whisper deeper than the old flat mist. */
  background:linear-gradient(180deg,#eef4fa 0%,#e7f0f9 46%,#dcebf6 78%,#d5e6f4 100%);
}

/* Each ripple band fills the viewport and tiles infinitely, so any
   position offset from the drift / scroll motion always stays covered. */
.sea-bg span{
  position:absolute;
  inset:0;
  background-repeat:repeat;
  background-position:0 0;
}

/* Back layer — broad, faint swells. */
.sea-bg .l1{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='320'%20viewBox='0%200%201440%20320'%3E%3Cg%20fill='none'%20stroke='rgba(122,167,208,0.55)'%20stroke-width='2'%3E%3Cpath%20d='M0,150%20Q180,120,360,150%20T720,150%20T1080,150%20T1440,150'/%3E%3Cpath%20d='M0,250%20Q120,232,240,250%20T480,250%20T720,250%20T960,250%20T1200,250%20T1440,250'%20stroke='rgba(150,190,224,0.45)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:1440px auto;
  opacity:.5;
}

/* Mid layer — medium ripples. */
.sea-bg .l2{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1000'%20height='240'%20viewBox='0%200%201000%20240'%3E%3Cg%20fill='none'%20stroke='rgba(96,150,197,0.5)'%20stroke-width='1.6'%3E%3Cpath%20d='M0,90%20Q125,66,250,90%20T500,90%20T750,90%20T1000,90'/%3E%3Cpath%20d='M0,170%20Q125,150,250,170%20T500,170%20T750,170%20T1000,170'%20stroke='rgba(130,178,216,0.42)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:1000px auto;
  opacity:.55;
}

/* Front layer — fine, crisper ripples. */
.sea-bg .l3{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='760'%20height='180'%20viewBox='0%200%20760%20180'%3E%3Cg%20fill='none'%20stroke='rgba(80,140,190,0.5)'%20stroke-width='1.4'%3E%3Cpath%20d='M0,70%20Q95,52,190,70%20T380,70%20T570,70%20T760,70'/%3E%3Cpath%20d='M0,130%20Q47.5,118,95,130%20T190,130%20T285,130%20T380,130%20T475,130%20T570,130%20T665,130%20T760,130'%20stroke='rgba(110,165,208,0.4)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:760px auto;
  opacity:.45;
}

/* A soft glint of light near the top, to read as sunlit water. */
.sea-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 60% at 50% -8%,rgba(255,255,255,.55),transparent 60%);
  pointer-events:none;
}

/* Respect users who prefer less motion: the waves stay, but still. */
@media (prefers-reduced-motion:reduce){
  .sea-bg span{animation:none}
}