/* =========================================================================
   Diverse Commerce — decorative background animations (dc-animations.css)
   =========================================================================
   Purely additive layer: does not modify or override any rule in style.css.
   Every element here is aria-hidden, pointer-events:none, and sits behind
   existing section content (inserted as the first child of each <section>,
   the same stacking pattern hero.php/operation-showcase.php already use).
   Organized in one commented block per homepage section, in page order.
   ========================================================================= */

/* ---------- Shared primitives (reused across every section below) ---------- */

.dc-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.dc-bg * {
  position: absolute;
}

/* Sections that don't already clip/position their own decoration
   (hero.php and operation-showcase.php already have these). */
#problems,
#how-it-works,
#comparison,
#timeline,
#comparison-table,
#who-its-for,
.site-footer {
  position: relative;
  overflow: hidden;
}

.dc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-purple);
  opacity: 0.14;
  animation: dc-float 12s ease-in-out infinite;
}

.dc-icon svg {
  width: 100%;
  height: 100%;
}

.dc-icon-lime {
  color: var(--brand-lime);
}

.dc-icon-light {
  color: rgba(255, 255, 255, 0.5);
}

/* Large, static (non-animated) icon silhouette — same visual language as
   the existing .cta-deco icons in final-cta.php, extended to every section
   so each has one clearly-recognizable "real" icon, not just faint floats. */
.dc-icon-static {
  color: var(--brand-purple);
  opacity: 0.05;
}

.dc-icon-static-light {
  color: rgba(255, 255, 255, 0.06);
}

.dc-icon-static-lime {
  color: var(--brand-lime);
  opacity: 0.07;
}

.dc-icon-static svg {
  width: 100%;
  height: 100%;
}

.dc-particle {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: var(--brand-purple);
  opacity: 0.3;
  animation: dc-float-sm 9s ease-in-out infinite;
}

.dc-particle-lime {
  background-color: var(--brand-lime);
}

.dc-particle-light {
  background-color: rgba(255, 255, 255, 0.6);
}

.dc-blob {
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.5;
}

.dc-dot-grid {
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle, rgba(103, 33, 223, 0.55) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%);
}

.dc-dot-grid-light {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
}

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

@keyframes dc-float-sm {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes dc-drift-x {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(12px);
  }
}

@keyframes dc-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dc-rotate-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes dc-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.06);
  }
}

/* Scroll-triggered "draw in" — dc-animations.js adds .dc-in-view once. */
.dc-draw {
  stroke-dasharray: var(--dc-dash, 400);
  stroke-dashoffset: var(--dc-dash, 400);
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dc-draw.dc-in-view {
  stroke-dashoffset: 0;
}

.dc-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.dc-in-view .dc-bar {
  transform: scaleY(1);
}

/* =========================================================================
   Hero (#top) — additive to the existing grid + glow decoration
   ========================================================================= */
.dc-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--brand-lime);
  padding: 10px;
}

.dc-hero-chart {
  opacity: 0.14;
}

/* =========================================================================
   Problems (#problems, white background)
   ========================================================================= */
#problems .dc-icon {
  color: var(--brand-purple);
  opacity: 0.1;
}

/* =========================================================================
   Business model (#how-it-works, off-white)
   ========================================================================= */
#how-it-works .dc-icon {
  opacity: 0.1;
}

#how-it-works .dc-blob {
  background: radial-gradient(circle, rgba(103, 33, 223, 0.35), transparent 70%);
}

/* =========================================================================
   Margin / "how the store makes money" (#how-it-earns, dark)
   ========================================================================= */
.dc-margin-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 6;
}

.dc-margin-ring-value {
  fill: none;
  stroke: var(--brand-lime);
  stroke-width: 6;
  stroke-linecap: round;
}

/* =========================================================================
   Ownership (#ownership, purple)
   ========================================================================= */
.dc-ownership-ring {
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  animation: dc-rotate 40s linear infinite;
}

.dc-ownership-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--brand-lime);
  opacity: 0.6;
}

/* =========================================================================
   Comparison (#comparison, off-white) — minimal, blobs only
   ========================================================================= */
/* White-based: the band above it is dark and the one below is off-white, so
   this one has to hold its own tone to stay separable. */
#comparison {
  background: radial-gradient(ellipse 55% 50% at 85% 0%, rgba(103, 33, 223, 0.05), transparent 60%),
    radial-gradient(ellipse 45% 45% at 0% 100%, rgba(197, 244, 61, 0.06), transparent 60%),
    var(--brand-white);
}

#comparison .dc-blob {
  background: radial-gradient(circle, rgba(103, 33, 223, 0.25), transparent 70%);
}

/* =========================================================================
   Honest section (#the-honest-part, dark, already has a glow)
   ========================================================================= */
.dc-honest-particle {
  animation-duration: 14s;
}

/* =========================================================================
   Timeline (#timeline, white) — process path behind the 3 month cards
   ========================================================================= */
#timeline {
  background: radial-gradient(ellipse 55% 45% at 15% 0%, rgba(103, 33, 223, 0.05), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(197, 244, 61, 0.06), transparent 60%),
    var(--brand-white);
}

.dc-timeline-path {
  opacity: 0.16;
}

.dc-timeline-path .dc-draw {
  stroke: var(--brand-purple);
  stroke-width: 2;
  fill: none;
}

/* =========================================================================
   Comparison table (#comparison-table, off-white) — dotted grid only
   ========================================================================= */
#comparison-table .dc-dot-grid {
  opacity: 0.07;
}

/* =========================================================================
   Pricing (purple, already has glow + animated-gradient + noise)
   ========================================================================= */
.dc-pricing-icon {
  opacity: 0.12;
}

/* =========================================================================
   Audience / "who it's for" (off-white)
   ========================================================================= */
#who-its-for {
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(103, 33, 223, 0.06), transparent 65%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(197, 244, 61, 0.06), transparent 65%),
    var(--brand-off-white);
}

.dc-audience-icon {
  opacity: 0.1;
}

.icon-card-audience {
  background: linear-gradient(160deg, var(--brand-white) 55%, var(--brand-off-white));
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.4s ease;
}

.icon-card-audience:hover {
  background: linear-gradient(160deg, var(--brand-white) 40%, rgba(103, 33, 223, 0.06));
}

.dc-audience-line {
  stroke: var(--brand-purple);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0.18;
}

.dc-audience-node {
  fill: var(--brand-purple);
  opacity: 0.22;
}

.icon-card-audience:hover {
  box-shadow: 0 24px 48px -18px rgba(103, 33, 223, 0.35), 0 0 0 1px rgba(197, 244, 61, 0.15) inset;
}

.icon-card-audience:hover .icon-chip {
  transform: scale(1.1) rotate(-6deg);
}

/* Large ghost icon that reveals in the corner on hover — a small
   "background illustration" echoing the card's own icon. */
.icon-card-illustration {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 96px;
  height: 96px;
  pointer-events: none;
  color: var(--brand-purple);
  opacity: 0;
  transform: scale(0.8) rotate(-10deg);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.icon-card-illustration svg {
  width: 100%;
  height: 100%;
}

.icon-card-audience:hover .icon-card-illustration {
  opacity: 0.08;
  transform: scale(1) rotate(0deg);
}

/* =========================================================================
   Final CTA (already has glow + gradient + deco icons)
   ========================================================================= */
.dc-cta-particle {
  animation-name: dc-drift-x;
  animation-duration: 11s;
}

.dc-cta-pulse-ring {
  border-radius: 999px;
  border: 1px solid rgba(197, 244, 61, 0.35);
  animation: dc-pulse 3.2s ease-in-out infinite;
}

/* =========================================================================
   Footer (dark) — very subtle
   ========================================================================= */
.site-footer .dc-dot-grid {
  opacity: 0.06;
}

.dc-footer-particle {
  opacity: 0.18;
  animation-duration: 16s;
}

/* =========================================================================
   Mobile: reduce decoration significantly (< 768px)
   =========================================================================
   Keep at most one very low-motion element per section; drop icons, rings,
   parallax-heavy pieces, and multi-particle clusters entirely. */
@media (max-width: 767px) {
  .dc-icon,
  .dc-icon-static,
  .dc-hero-chart,
  .dc-margin-ring,
  .dc-ownership-ring,
  .dc-timeline-path,
  .dc-audience-line,
  .dc-audience-node,
  .dc-cta-pulse-ring,
  .dc-particle:nth-of-type(n + 3) {
    display: none;
  }

  .dc-blob {
    filter: blur(36px);
  }
}

/* =========================================================================
   Reduced motion — belt-and-suspenders with style.css's global rule
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .dc-icon,
  .dc-particle,
  .dc-ownership-ring,
  .dc-cta-pulse-ring,
  .dc-blob {
    animation: none !important;
  }

  .dc-draw {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .dc-bar {
    transform: scaleY(1) !important;
    transition: none !important;
  }
}

/* =========================================================================
   Moving vector fields (.dcv) — the animated background layer
   One aria-hidden SVG per band, emitted by includes/vectors.php. Stroke-only
   brand shapes: dashed rings that rotate (which reads as the dashes travelling
   round), trend lines whose dashes march, chips and dots that drift and pulse.
   Everything animates transform / opacity / stroke-dashoffset only.
   ========================================================================= */
.dcv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.dcv svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Section content sits above every decoration layer. Without this, a
   positioned .dcv/.dc-bg paints over static text in the normal flow. */
.section > .container,
.hero > .container {
  position: relative;
  z-index: 1;
}

.dcv-ring {
  fill: none;
  stroke: rgba(103, 33, 223, 0.17);
  stroke-width: 1.6;
  stroke-dasharray: 7 14;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.dcv-ring-soft {
  stroke: rgba(103, 33, 223, 0.1);
  stroke-dasharray: 3 10;
}

.dcv-trend,
.dcv-wave {
  fill: none;
  stroke: rgba(103, 33, 223, 0.26);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16 12;
}

.dcv-wave {
  stroke: rgba(103, 33, 223, 0.14);
  stroke-dasharray: 10 14;
}

.dcv-chip {
  fill: none;
  stroke: rgba(103, 33, 223, 0.22);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.dcv-chip-lime {
  stroke: rgba(178, 224, 44, 0.55);
}

.dcv-dot {
  fill: rgba(103, 33, 223, 0.3);
  /* Scales about its own centre rather than the viewBox origin. */
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.dcv-dot-lime {
  fill: rgba(178, 224, 44, 0.6);
}

/* Dark bands: the same field, restated in white and lime. */
.dcv-light .dcv-ring {
  stroke: rgba(255, 255, 255, 0.14);
}

.dcv-light .dcv-ring-soft {
  stroke: rgba(255, 255, 255, 0.08);
}

/* No trend line on the dark bands: in lime it fought with the content, and
   the ring and wave carry the field on their own. */
.dcv-light .dcv-trend {
  display: none;
}

.dcv-light .dcv-wave {
  stroke: rgba(255, 255, 255, 0.12);
}

.dcv-light .dcv-chip {
  stroke: rgba(255, 255, 255, 0.2);
}

.dcv-light .dcv-chip-lime {
  stroke: rgba(197, 244, 61, 0.45);
}

.dcv-light .dcv-dot {
  fill: rgba(255, 255, 255, 0.35);
}

.dcv-light .dcv-dot-lime {
  fill: rgba(197, 244, 61, 0.6);
}

.dcv-spin {
  animation: dcv-spin 54s linear infinite;
}

.dcv-spin-rev {
  animation: dcv-spin 38s linear infinite reverse;
}

.dcv-march {
  animation: dcv-march 6s linear infinite;
}

.dcv-drift {
  animation: dcv-drift 13s ease-in-out infinite;
}

.dcv-pulse {
  animation: dcv-pulse 7s ease-in-out infinite;
}

@keyframes dcv-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dcv-march {
  to {
    stroke-dashoffset: -56;
  }
}

@keyframes dcv-drift {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -26px;
    rotate: 8deg;
  }
}

@keyframes dcv-pulse {
  0%,
  100% {
    opacity: 0.25;
    scale: 0.85;
  }
  50% {
    opacity: 0.9;
    scale: 1.15;
  }
}

/* Decorative motion is dropped entirely, in line with the rest of this file. */
@media (prefers-reduced-motion: reduce) {
  .dcv-spin,
  .dcv-spin-rev,
  .dcv-march,
  .dcv-drift,
  .dcv-pulse {
    animation: none !important;
  }
}

/* Narrow screens keep the shapes but not the motion — the field is cropped
   hard by "slice" there, so movement mostly reads as flicker at the edges. */
@media (max-width: 767px) {
  .dcv-drift,
  .dcv-pulse {
    animation: none !important;
  }
}