/* ==========================================================================
   CommerceClarity — Brand Gradients
   Animated radial-gradient compositions lifted from the official brand
   motion specs (Gradient 1/2/3). These are the signature hero/background
   surfaces of the brand. Use mostly as backgrounds — never behind small
   body copy without a protection layer.

   Usage:
     <div class="cc-gradient cc-gradient-1"></div>
     <div class="cc-gradient cc-gradient-2"></div>
     <div class="cc-gradient cc-gradient-3"></div>

   Notes:
   - Each gradient owns its own @property declarations, so they can coexist
     if you give each instance a unique class/selector. The simplified
     versions below are safe to compose.
   - The noise overlay (::after with mix-blend-mode: overlay) is intentional.
     On brand it gives the gradient a soft film-grain texture. Omit only on
     tiny preview tiles where the noise becomes distracting.
   ========================================================================== */

/* ---------- Gradient 1: "Hero" — Blue base, teal + coral + rose + navy ---------- */
@keyframes cc-gradient-1-anim {
  0%   { --g1-x0: 50%; --g1-y0: 20%; --g1-x1: 65%; --g1-y1: 80%;
         --g1-x2: 20%; --g1-y2: 40%; --g1-x3: 85%; --g1-y3: 60%;
         --g1-x4: 12%; --g1-y4: 96%; --g1-x5: 88%; --g1-y5: 10%;
         --g1-x6:  5%; --g1-y6: 100%; --g1-x7: 75%; --g1-y7:  0%; }
  50%  { --g1-x0: 70%; --g1-y0: 25%; --g1-x1: 35%; --g1-y1: 80%;
         --g1-x2: 40%; --g1-y2: 25%; --g1-x3: 65%; --g1-y3: 80%;
         --g1-x4: 11%; --g1-y4: 50%; --g1-x5: 88%; --g1-y5: 57%;
         --g1-x6:  0%; --g1-y6:  0%; --g1-x7:100%; --g1-y7:100%; }
  100% { --g1-x0: 80%; --g1-y0: 55%; --g1-x1: 15%; --g1-y1: 50%;
         --g1-x2: 65%; --g1-y2: 25%; --g1-x3: 35%; --g1-y3: 80%;
         --g1-x4: 28%; --g1-y4: 25%; --g1-x5: 64%; --g1-y5: 81%;
         --g1-x6:100%; --g1-y6: 19%; --g1-x7:  0%; --g1-y7:100%; }
}
@property --g1-x0 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --g1-y0 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --g1-x1 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }
@property --g1-y1 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --g1-x2 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --g1-y2 { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --g1-x3 { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
@property --g1-y3 { syntax: '<percentage>'; inherits: false; initial-value: 60%; }
@property --g1-x4 { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --g1-y4 { syntax: '<percentage>'; inherits: false; initial-value: 96%; }
@property --g1-x5 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --g1-y5 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --g1-x6 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --g1-y6 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --g1-x7 { syntax: '<percentage>'; inherits: false; initial-value: 75%; }
@property --g1-y7 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.cc-gradient-1 {
  position: relative;
  background-color: hsl(220, 73%, 40%);
  background-image:
    radial-gradient(circle at var(--g1-x0) var(--g1-y0), hsla(20, 79%, 67%, 0.55)  5%, transparent 80%),
    radial-gradient(circle at var(--g1-x1) var(--g1-y1), hsla(180, 87%, 28%, 0.95) 10%, transparent 80%),
    radial-gradient(circle at var(--g1-x2) var(--g1-y2), hsla(340, 67%, 53%, 0.95) 10%, transparent 60%),
    radial-gradient(circle at var(--g1-x3) var(--g1-y3), hsla(220, 74%, 40%, 1)    10%, transparent 60%),
    radial-gradient(circle at var(--g1-x4) var(--g1-y4), hsla(20, 79%, 67%, 1)     10%, transparent 60%),
    radial-gradient(circle at var(--g1-x5) var(--g1-y5), hsla(200, 87%, 29%, 1)    10%, transparent 60%),
    radial-gradient(circle at var(--g1-x6) var(--g1-y6), hsla(340, 68%, 54%, 1)     0%, transparent 100%),
    radial-gradient(circle at var(--g1-x7) var(--g1-y7), hsla(220, 74%, 41%, 1)     0%, transparent 60%);
  animation: cc-gradient-1-anim 10s linear infinite alternate;
}

/* ---------- Gradient 2: "Warm" — Butter base, coral + sky accents ---------- */
@keyframes cc-gradient-2-anim {
  0%   { --g2-x0: 32%;  --g2-y0: 99%;  --g2-x1: 53%; --g2-y1: 79%;
         --g2-x2: 18%;  --g2-y2: -21%; --g2-x3: 84%; --g2-y3: 47%; }
  50%  { --g2-x0:124%;  --g2-y0: 29%;  --g2-x1:103%; --g2-y1: 81%;
         --g2-x2: -3%;  --g2-y2:112%;  --g2-x3:  0%; --g2-y3: 76%; }
  100% { --g2-x0: 26%;  --g2-y0: 43%;  --g2-x1: 26%; --g2-y1: -7%;
         --g2-x2:104%;  --g2-y2:109%;  --g2-x3: 76%; --g2-y3: 11%; }
}
@property --g2-x0 { syntax: '<percentage>'; inherits: false; initial-value: 32%; }
@property --g2-y0 { syntax: '<percentage>'; inherits: false; initial-value: 99%; }
@property --g2-x1 { syntax: '<percentage>'; inherits: false; initial-value: 53%; }
@property --g2-y1 { syntax: '<percentage>'; inherits: false; initial-value: 79%; }
@property --g2-x2 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --g2-y2 { syntax: '<percentage>'; inherits: false; initial-value: -21%; }
@property --g2-x3 { syntax: '<percentage>'; inherits: false; initial-value: 84%; }
@property --g2-y3 { syntax: '<percentage>'; inherits: false; initial-value: 47%; }

.cc-gradient-2 {
  position: relative;
  background-color: hsl(40, 90%, 79%);
  background-image:
    radial-gradient(circle at var(--g2-x0) var(--g2-y0), hsla(60, 78%, 67%, 0.9)   0%, transparent 60%),
    radial-gradient(circle at var(--g2-x1) var(--g2-y1), hsla(20, 80%, 67%, 0.9)   6%, transparent 80%),
    radial-gradient(circle at var(--g2-x2) var(--g2-y2), hsla(200, 89%, 79%, 1)    0%, transparent 80%),
    radial-gradient(circle at var(--g2-x3) var(--g2-y3), hsla(60, 80%, 67%, 1)     6%, transparent 80%);
  animation: cc-gradient-2-anim 12s linear infinite alternate;
}

/* ---------- Gradient 3: "Cool" — Deep blue base, lilac + pink + fuchsia ---------- */
@keyframes cc-gradient-3-anim {
  0%   { --g3-x0:109%; --g3-y0: 68%; --g3-x1: 55%; --g3-y1:108%; --g3-x2:  5%; --g3-y2: 54%; }
  50%  { --g3-x0: 41%; --g3-y0:  6%; --g3-x1: 59%; --g3-y1: 44%; --g3-x2: 19%; --g3-y2: 93%; }
  100% { --g3-x0: 41%; --g3-y0:  6%; --g3-x1:  8%; --g3-y1:  7%; --g3-x2: 55%; --g3-y2: 44%; }
}
@property --g3-x0 { syntax: '<percentage>'; inherits: false; initial-value: 109%; }
@property --g3-y0 { syntax: '<percentage>'; inherits: false; initial-value: 68%; }
@property --g3-x1 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --g3-y1 { syntax: '<percentage>'; inherits: false; initial-value: 108%; }
@property --g3-x2 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --g3-y2 { syntax: '<percentage>'; inherits: false; initial-value: 54%; }

.cc-gradient-3 {
  position: relative;
  background-color: hsl(220, 68%, 54%);
  background-image:
    radial-gradient(circle at var(--g3-x0) var(--g3-y0), hsla(340, 90%, 79%, 1) 0%, transparent 80%),
    radial-gradient(circle at var(--g3-x1) var(--g3-y1), hsla(240, 90%, 79%, 1) 5%, transparent 80%),
    radial-gradient(circle at var(--g3-x2) var(--g3-y2), hsla(320, 90%, 79%, 1) 0%, transparent 50%);
  animation: cc-gradient-3-anim 14s linear infinite alternate;
}

/* ---------- Static (non-animated) gradient fallbacks ---------- */
.cc-gradient-1-static {
  background:
    radial-gradient(circle at 12% 96%, hsla(20, 79%, 67%, 1) 10%, transparent 60%),
    radial-gradient(circle at 88% 10%, hsla(200, 87%, 29%, 1) 10%, transparent 60%),
    radial-gradient(circle at 65% 80%, hsla(180, 87%, 28%, 1) 10%, transparent 80%),
    radial-gradient(circle at 20% 40%, hsla(340, 67%, 53%, 0.9) 10%, transparent 60%),
    hsl(220, 73%, 40%);
}
.cc-gradient-2-static {
  background:
    radial-gradient(circle at 53% 79%, hsla(20, 80%, 67%, 0.9) 6%, transparent 80%),
    radial-gradient(circle at 18% -21%, hsla(200, 89%, 79%, 1) 0%, transparent 80%),
    radial-gradient(circle at 84% 47%, hsla(60, 80%, 67%, 1) 6%, transparent 80%),
    hsl(40, 90%, 79%);
}
.cc-gradient-3-static {
  background:
    radial-gradient(circle at 109% 68%, hsla(340, 90%, 79%, 1) 0%, transparent 80%),
    radial-gradient(circle at 55% 108%, hsla(240, 90%, 79%, 1) 5%, transparent 80%),
    radial-gradient(circle at 5% 54%, hsla(320, 90%, 79%, 1) 0%, transparent 50%),
    hsl(220, 68%, 54%);
}

/* ---------- Protection gradient (for legible type on gradient art) ---------- */
.cc-protect-bottom::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  /* Legibility scrim for white type on gradient art. Kept low, steep and light
     so it protects the bottom text row without reading as a dark "shadow" band
     when the gradient is frozen to a flat frame in the exported PDF. */
  background: linear-gradient(to top, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.18) 32%, rgba(10, 10, 11, 0) 100%);
  pointer-events: none;
}
.cc-protect-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0));
  pointer-events: none;
}

/* ---------- Base box ----------
   The documented compose usage is `<div class="cc-gradient cc-gradient-1">`,
   used as a background that fills a positioned parent. This base class gives
   that element its box: without it the div collapses to height 0 and the
   gradient never paints. Declared last so it wins `position` over the
   `.cc-gradient-N` rules above. (Using `.cc-gradient-1` alone as a sized
   block — e.g. with an explicit height — is unaffected.) */
.cc-gradient { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cc-gradient-1, .cc-gradient-2, .cc-gradient-3 { animation: none; }
}