/* =========================================================
   CrossMerg — Part 18: Full-View Diagonal Bands (UNDERLAY)
   - Under-content decorative bands (transparent)
   - Full-bleed (viewport) width under sections
   - 2 diagonal geometries + solid or multicolor modes
   - Optional wave texture + motion
   ========================================================= */

/* Attach this to any section that should host bands */
.cm-section--has-band{
  position: relative;

  /* Prevent horizontal scrollbar from full-bleed band */
  overflow-x: hidden;
  overflow-y: hidden;

  isolation: isolate;          /* predictable z-index stacking */
}

/* Base band layer (FULL-VIEW WIDTH) */
.cm-band{
  position: absolute;
  top: 0;
  bottom: 0;

  /* Full viewport width, centered under the section */
  left: 50%;
  width: 100vw;   /* fallback */
  width: 100dvw;  /* avoids scrollbar-width overflow in modern browsers */

  /* position tuning (negative pulls up) */
  --cm-band-y: 0%;

  transform: translateX(-50%) translateY(var(--cm-band-y));

  z-index: 0;                  /* under content */
  pointer-events: none;

  /* default tuning knobs */
  --cm-band-opacity: 1;        /* overall alpha lives in your rgba() by default */
  --cm-band-blur: 0px;         /* optional softening */
  --cm-band-color: rgba(62,121,209,.16);

  /* multicolor defaults (override per band / presets) */
  --cm-band-g1: rgba(62,121,209,.18);
  --cm-band-g2: rgba(62,209,150,.14);
  --cm-band-g3: rgba(123,92,255,.12);

  filter: blur(var(--cm-band-blur));
  opacity: var(--cm-band-opacity);
}

/* Ensure your real content sits above the band */
.cm-section--has-band > .container,
.cm-section--has-band > .cm-container,
.cm-section--has-band > .cm-inner{
  position: relative;
  z-index: 1;
}

/* =========================================================
   Diagonal Geometry (tunable)
   ========================================================= */

/* A) TOP BAND — Top-right going DOWN to the left (~ 1/4) */
.cm-band--diag-top{
  --cm-band-hL: 28%;      /* LEFT depth (lower) */
  --cm-band-hR: 12%;      /* RIGHT depth (higher) */
}

.cm-band--diag-top::before{
  content:"";
  position:absolute;
  inset: 0;

  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% var(--cm-band-hR),
    0%   var(--cm-band-hL)
  );

  background: var(--cm-band-fill, var(--cm-band-color));
}

/* B) BOTTOM BAND — Bottom-left going UP (~ 2/3) */
.cm-band--diag-bottom{
  --cm-band-topL: 34%;    /* LEFT top edge (higher) */
  --cm-band-topR: 68%;    /* RIGHT top edge (lower) */
}

.cm-band--diag-bottom::before{
  content:"";
  position:absolute;
  inset: 0;

  clip-path: polygon(
    0%   var(--cm-band-topL),
    100% var(--cm-band-topR),
    100% 100%,
    0%   100%
  );

  background: var(--cm-band-fill, var(--cm-band-color));
}

/* =========================================================
   Color Modes
   ========================================================= */

/* SOLID */
.cm-band--solid{
  --cm-band-fill: var(--cm-band-color);
}

/* MULTICOLOR (gradient) */
.cm-band--multi{
  --cm-band-angle: 120deg; /* LEFT → RIGHT across the diagonal */
  --cm-band-fill: linear-gradient(
    var(--cm-band-angle),
    var(--cm-band-g1) 0%,
    var(--cm-band-g2) 45%,
    var(--cm-band-g3) 100%
  );
}

/* =========================================================
   Named Color Presets (opt-in)
   - Use alongside .cm-band--multi
   ========================================================= */

.cm-band--primary-to-danger{
  /* Left side (hL) → Right side (hR) */
  --cm-band-angle: 120deg;
  --cm-band-g1: rgba(62,121,209,.18);  /* primary */
  --cm-band-g2: rgba(62,121,209,.10);  /* blend */
  --cm-band-g3: rgba(220,53,69,.14);   /* danger */
}

.cm-band--calm-to-accent{
  /* Calm blue → soft accent violet/teal */
  --cm-band-angle: 120deg;
  --cm-band-g1: rgba(62,121,209,.14);  /* calm primary */
  --cm-band-g2: rgba(123,92,255,.10);  /* accent blend */
  --cm-band-g3: rgba(62,209,150,.10);  /* success accent */
}

/* =========================================================
   Texture + Motion System (opt-in)
   - New usage (recommended):
     cm-band--tex + ONE skin:
       cm-band--tex-wave | cm-band--tex-squares | cm-band--tex-lava
     + optionally ONE motion:
       cm-band--motion-drift | cm-band--motion-float | cm-band--motion-pulse

   - Backward compatible:
     cm-band--wave     == cm-band--tex + cm-band--tex-wave
     cm-band--motion   == cm-band--motion-drift
   ========================================================= */

/* Base texture overlay (shared by all skins) */
.cm-band--tex::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index: 0;

  opacity: .55;
  mix-blend-mode: overlay;

  transform: translate3d(0,0,0);
}

/* -------------------------
   Texture skins (pick ONE)
   ------------------------- */

/* Wave skin (your current one, normalized) */
.cm-band--tex-wave::after{
  background-image:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,.18) 0px,
      rgba(255,255,255,.18) 2px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 18px
    );
}

/* Squares / grid shimmer */
.cm-band--tex-squares::after{
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, rgba(255,255,255,0) 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, rgba(255,255,255,0) 1px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  opacity: .40; /* grid usually looks better a bit lighter */
}

/* Lava lamp style (CSS approximation: blobby gradients + gooey overlay) */
.cm-band--tex-lava::after{
  background-image:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
  background-size: 140% 140%;
  background-position: 0% 0%;
  opacity: .55;
  mix-blend-mode: overlay;
  filter: blur(2px) saturate(1.1);
}

/* ---------------------------------------------------------
   Clip the texture to the same diagonal as the band geometry
   (pseudo-elements can't inherit clip-path reliably)
   --------------------------------------------------------- */
.cm-band--diag-top.cm-band--tex::after,
.cm-band--diag-top.cm-band--wave::after{
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% var(--cm-band-hR),
    0%   var(--cm-band-hL)
  );
}

.cm-band--diag-bottom.cm-band--tex::after,
.cm-band--diag-bottom.cm-band--wave::after{
  clip-path: polygon(
    0%   var(--cm-band-topL),
    100% var(--cm-band-topR),
    100% 100%,
    0%   100%
  );
}

/* --------------------------
   Motion behaviors (pick ONE)
   -------------------------- */
.cm-band--motion-drift::after{
  animation: cmBandDrift 14s linear infinite;
}

@keyframes cmBandDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-12%, 10%, 0) scale(1); }
}

.cm-band--motion-float::after{
  animation: cmBandFloat 10s ease-in-out infinite;
}

@keyframes cmBandFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-4%, 3%, 0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

.cm-band--motion-pulse::after{
  animation: cmBandPulse 6s ease-in-out infinite;
}

@keyframes cmBandPulse{
  0%   { opacity: .35; transform: translate3d(0,0,0) scale(1); }
  50%  { opacity: .60; transform: translate3d(-2%, 1%, 0) scale(1.04); }
  100% { opacity: .35; transform: translate3d(0,0,0) scale(1); }
}

/* ---------------------------------------------------------
   Backward-compatible aliases
   --------------------------------------------------------- */

/* .cm-band--wave behaves like: .cm-band--tex + .cm-band--tex-wave */
.cm-band--wave::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index: 0;
  opacity: .55;
  mix-blend-mode: overlay;
  transform: translate3d(0,0,0);
  background-image:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,.18) 0px,
      rgba(255,255,255,.18) 2px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 18px
    );
}

/* .cm-band--motion behaves like drift */
.cm-band--wave.cm-band--motion::after{
  animation: cmBandDrift 14s linear infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cm-band--motion-drift::after,
  .cm-band--motion-float::after,
  .cm-band--motion-pulse::after,
  .cm-band--wave.cm-band--motion::after{
    animation: none !important;
  }
}


/* =========================================================
   Responsive tuning defaults (optional global)
   - Override per-section with inline vars when needed
   ========================================================= */
@media (max-width: 1024px){
  .cm-band{
    --cm-band-hL: 32%;
    --cm-band-hR: 16%;
    --cm-band-topL: 40%;
    --cm-band-topR: 74%;
  }
}

@media (max-width: 640px){
  .cm-band{
    --cm-band-hL: 38%;
    --cm-band-hR: 22%;
    --cm-band-topL: 48%;
    --cm-band-topR: 82%;
  }
}