/* ==========================================================================
   Geedlee wave band
   A full-width tinted band with a big sweeping wave along the top and bottom.
   Used to give a section its own space without boxing it in.

   Usage:  add class "gwave" (plus a colour variant) to a <section>, and drop
           <div class="gwave-bg">…svg top…<i></i>…svg bottom…</div> inside it
           as the first child. Colour comes from --gw.
   ========================================================================== */

.gwave{position:relative;isolation:isolate;
  padding:40px 0 44px;margin:30px 0 20px;
  --gw:#EFF6F4;}

/* colour variants, all drawn from the Geedlee palette */
.gwave.gw-mint     {--gw:#EFF6F4;}   /* eucalyptus, the default */
.gwave.gw-lavender {--gw:#F3EFFC;}   /* soft purple */
.gwave.gw-cream    {--gw:#FDF7EA;}   /* butter */
.gwave.gw-sky      {--gw:#EFF4FC;}   /* pale blue */
.gwave.gw-blush    {--gw:#FCF1F3;}   /* warm pink */

/* Span the full viewport regardless of the section's own padding or max-width.
   The old left:50% + translateX(-50%) centred on the SECTION, so any section
   with its own horizontal padding (Story Packs, Our Story) pushed the band
   sideways and it no longer lined up with the page. */
.gwave-bg{position:absolute;top:0;z-index:-1;pointer-events:none;
  left:calc(50% - 50vw);right:auto;
  width:100vw;max-width:100vw;height:100%;
  display:flex;flex-direction:column;}
.gwave-bg svg{width:100%;height:132px;display:block;flex:none;}
.gwave-bg svg path{fill:var(--gw);}
.gwave-bg i{flex:1;background:var(--gw);display:block;}

/* keep the content clear of the curves */
.gwave > .wrap,
.gwave > .nh-wrap,
.gwave > .gwave-in{position:relative;padding-top:26px;padding-bottom:30px;}

@media(max-width:820px){
  .gwave{padding:18px 0 22px;margin:22px 0 14px;}
  .gwave-bg svg{height:74px;}
  .gwave > .wrap,
  .gwave > .nh-wrap,
  .gwave > .gwave-in{padding-top:16px;padding-bottom:20px;}
}

/* --------------------------------------------------------------------------
   Living waves
   The two curves drift very slowly in opposite directions, so the band
   breathes rather than sits still. Each SVG is drawn double width and shifted
   by exactly half, which makes the loop seamless. Transform only, so it stays
   on the compositor and costs nothing on scroll.
   -------------------------------------------------------------------------- */
@keyframes gwDriftA{
  0%   {transform:translate3d(0,0,0);}
  50%  {transform:translate3d(-25%,2px,0);}
  100% {transform:translate3d(-50%,0,0);}
}
@keyframes gwDriftB{
  0%   {transform:translate3d(-50%,0,0);}
  50%  {transform:translate3d(-25%,-2px,0);}
  100% {transform:translate3d(0,0,0);}
}

.gwave-bg{overflow:hidden;}
.gwave-bg svg{width:200%;will-change:transform;}
.gwave-bg svg:first-of-type{animation:gwDriftA 26s linear infinite;}
.gwave-bg svg:last-of-type {animation:gwDriftB 32s linear infinite;}

@media(prefers-reduced-motion:reduce){
  .gwave-bg svg{animation:none !important;width:100%;}
}