/* Full-bleed hack so it spans the viewport even inside Divi containers */
.edb-banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  --banner-h: 550px;
  height: var(--banner-h);
}
/* “Cut” overlay paints the page background over the lower part of the banner */
.edb-banner__cut{
  position:absolute; left:0; bottom:-1px;  /* -1px hides any seam */
  display:block; width:100%; height:65px;           /* match the SVG height */
  max-width:none; pointer-events:none; overflow:hidden;
}
.edb-banner__image {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.edb-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top:0;
  will-change: transform;
}

@media (max-width: 640px){ 
  .edb-banner{
    height: 400px;
    min-height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: scroll;
  }
}

/* Decorative waves */
.edb-banner__waves{
  position:absolute; left:0; bottom:13px; display:block; pointer-events:none; z-index: 3; overflow:hidden;
}

/* Default wave colors (overridden per page by shortcode styles) */
.edb-banner{ --wave1:#ef4444; --wave2:#fb7185; }


/* ≤ 800px: stop shrinking; center a fixed-800px SVG and crop sides */
@media (max-width: 800px){
  .edb-banner__waves, .edb-banner__cut{
    /* wrapper still full width, but crops overflow */
    overflow: hidden;
    width:100%; 
  }
  /* Re-target the SVG element explicitly if you have a wrapper element.
     If your markup is exactly as above, the selector below targets the same element.
     To be precise, use a nested wrapper, or this works with :where trick: */
  .edb-banner__waves:where(svg){
    width: 800px !important;    /* stop shrinking below 800 */
    max-width: none !important;
    height: 59px;              /* keep fixed height */
  }

  /* Re-target the SVG element explicitly if you have a wrapper element.
     If your markup is exactly as above, the selector below targets the same element.
     To be precise, use a nested wrapper, or this works with :where trick: */
  .edb-banner__cut:where(svg){
    width: 800px !important;    /* stop shrinking below 800 */
    max-width: none !important;
    height: 65px;              /* keep fixed height */
  }


}

/*

  Banner Icons

*/


/* Each icon has a wrapper we can parallax without fighting the inner animation */
.edb-iconwrap{
  position:absolute; z-index:1; /* under the cut (z:2), over the image (z:0) */
  transform: translate(var(--dx,0px), var(--dy,0px)); /* user offsets */
  will-change: transform;
}

/* Base positions (you can tweak these “initial” anchors) */
.edb-icon--l1{ left:22px;  bottom:26px; }
.edb-icon--l2{ left:116px;  bottom:68px; }
.edb-icon--r1{ right:152px; bottom:46px; }
.edb-icon--r2{ right:42px; bottom:88px; }

@media (max-width: 640px){ 
  
  .edb-icon--l1{ left:22px;  top: 38px; display: none; }
  .edb-icon--l2{ left:22px;  bottom:58px; }
  .edb-icon--r1{ right:32px; bottom:75px; }
  .edb-icon--r2{ right:152px; bottom: 58px; display: none; }

}

/* The actual icon image (animation lives here) */
.edb-banner__icon{
  display:block; width: var(--size, 96px); height:auto;
  pointer-events:none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  transform-origin:center;
}

/* Responsive scale of default size (user overrides still apply) */
@media (max-width: 980px){ .edb-banner__icon{ width: calc(var(--size,96px) * .85); } }
@media (max-width: 640px){ .edb-banner__icon{ width: calc(var(--size,96px) * .62); } }

/* Respect reduced-motion for all animations */
@media (prefers-reduced-motion: no-preference){

  /* ---- Base animations (set a per-type default duration via --dur) ---- */
  .anim-wobble { --dur: 4s; animation: edb-wobble var(--dur) ease-in-out infinite; }
  .anim-float  { --dur: 4s; animation: edb-float  var(--dur) ease-in-out infinite; }
  .anim-bob    { --dur: 4s; animation: edb-bob    var(--dur) ease-in-out infinite; }
  .anim-pulse  { --dur: 4s; animation: edb-pulse  var(--dur) ease-in-out infinite; }
  .anim-sway   { --dur: 4s; animation: edb-sway   var(--dur) ease-in-out infinite; }
  .anim-jelly  { --dur: 4s; animation: edb-jelly  var(--dur) ease-in-out infinite; }

  /* Keep existing */
  .anim-spin   { animation: edb-spin 12s linear infinite; }   /* unchanged speed */
  .anim-shake  { animation: edb-shake 2.4s ease-in-out infinite; } /* unchanged */

}

/* ---- Keyframes ---- */
@keyframes edb-spin   { to { transform: rotate(360deg); } }

@keyframes edb-wobble {
  0%,100% { transform: rotate(0) translateY(0); }
  25%     { transform: rotate(-10deg) translateY(-10px); }
  50%     { transform: rotate( 5deg) translateY(0); }
  75%     { transform: rotate(-8deg) translateY(10px); }
}

@keyframes edb-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}

@keyframes edb-bob {
  0%,100% { transform: translateY(0); }
  30%     { transform: translateY(-20px); }
  60%     { transform: translateY(-4px); }
}

@keyframes edb-pulse {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.2); }
}

@keyframes edb-sway {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(24px); }
}

@keyframes edb-jelly {
  0%,100% { transform: scale(1,1); }
  30%     { transform: scale(1.14,0.88); }
  60%     { transform: scale(0.88,1.09); }
}

@keyframes edb-shake {
  0%,100% { transform: translateX(0) rotate(0) }
  20%     { transform: translateX(-3px) rotate(-5deg) }
  40%     { transform: translateX( 3px) rotate( 5deg) }
  60%     { transform: translateX(-1px) rotate(-.6deg) }
  80%     { transform: translateX( 1px) rotate( .6deg) }
}