/* ============================================================
   art.css — original decorative artwork: gradient blobs, dot
   grids, pattern overlays. All self-contained (no external
   images). Reads tokens only. Purely presentational.
   ============================================================ */

/* ---- soft dotted grid (data-uri, brand blue) ---- */
:root {
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%231f8268' fill-opacity='0.12'/%3E%3C/svg%3E");
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%231f8268' stroke-opacity='0.05'/%3E%3C/svg%3E");
}

/* ---- HERO: layered gradient blobs + dots ---- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; background-image: var(--dots);
  opacity: .7; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: -220px;
  background: radial-gradient(circle at center, rgba(31,130,104,.18), transparent 62%);
  border-radius: 50%; pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

/* blob behind hero art */
.hero__art::before {
  content: ""; position: absolute; inset: -8% -6%;
  background: conic-gradient(from 120deg, #e0f3ec, #f9f4ff, #fff9db, #bde9dd, #e0f3ec);
  border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%;
  filter: blur(6px); z-index: 0;
  animation: blob 16s ease-in-out infinite;
}
.hero__art svg, .hero__art .hero__float { position: relative; z-index: 1; }
@keyframes blob {
  0%,100% { border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%; }
  50%     { border-radius: 55% 45% 42% 58% / 45% 55% 48% 52%; }
}

/* ---- Section soft-tint gets a faint grid ---- */
.section--soft { position: relative; }
.section--soft::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grid);
  opacity: .6; pointer-events: none;
}
.section--soft .container { position: relative; z-index: 1; }

/* ---- decorative floating orbs for CTA bands ---- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(31,130,104,.15), transparent 65%);
  border-radius: 50%;
}

/* ---- AUTH visual: geometric pattern overlay ---- */
.auth-visual { position: relative; overflow: hidden; }
.auth-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10) 0, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0, transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E");
  pointer-events: none;
}
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual::after {
  content: ""; position: absolute; width: 360px; height: 360px; left: -120px; bottom: -140px;
  border: 40px solid rgba(255,255,255,.06); border-radius: 50%;
}

/* ---- DASHBOARD welcome card: pattern + orb ---- */
.welcome-card { position: relative; overflow: hidden; }
.welcome-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='4' cy='4' r='2' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E");
  pointer-events: none;
}
.welcome-card::after {
  content: ""; position: absolute; right: -30px; top: -50px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); border-radius: 50%;
}
.welcome-card > * { position: relative; z-index: 1; }

/* ---- news / illustration cards: gradient scenes ---- */
.illus-scene { width: 100%; height: 200px; display: block; }
.stat__icon, .cat-card__icon { position: relative; }

/* dashboard stat icon subtle ring */
.stat__icon::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid currentColor;
  opacity: .12; border-radius: inherit;
}