/* ==========================================================================
   accents.css — the colour field: the hero blob's palette as a CSS surface.
   Loaded by Base.astro on every page. The WebGL blob is for the hero only.
   ========================================================================== */

/* ---------- field ---------- */
.field { position: relative; isolation: isolate; border-radius: 28px; overflow: hidden; background: #d6dfff; }
.field::before { content: ""; position: absolute; inset: -15%; z-index: -2; background:
  radial-gradient(38% 34% at 50% 58%, rgba(255, 255, 255, .95) 0%, transparent 72%),
  radial-gradient(52% 46% at 14% 18%, var(--f1) 0%, transparent 70%),
  radial-gradient(48% 44% at 84% 24%, var(--f2) 0%, transparent 70%),
  radial-gradient(56% 50% at 58% 92%, var(--f3) 0%, transparent 70%);
  filter: blur(18px); }
.field::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/nnnoise-2.svg") 50% / 260px; opacity: .3; mix-blend-mode: soft-light; }
.field--blue { --f1: rgba(0, 61, 255, .92); --f2: rgba(255, 65, 106, .85); --f3: rgba(120, 102, 204, .8); }
.field--pink { --f1: rgba(255, 65, 106, .9); --f2: rgba(0, 61, 255, .8); --f3: rgba(176, 194, 255, .95); }
.field--violet { --f1: rgba(120, 102, 204, .95); --f2: rgba(0, 61, 255, .8); --f3: rgba(255, 140, 170, .85); }
.field > * { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .field::before { animation: field-drift 18s ease-in-out infinite alternate; }
  @keyframes field-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-4%, 3%) rotate(6deg); } }
}

/* section-scale field, minimal: a white ground with one large soft glow high on one side and a
   fainter second glow low on the other (the "core glow" idea), faint grain, fading into the page. An accent, not a wash. */
.field--section { position: absolute; inset: 0; z-index: 0; border-radius: 0; background: #fff; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.field--section::before { inset: -20%; filter: blur(80px); opacity: .5; transform: none; background:
  radial-gradient(38% 30% at 84% 18%, var(--f1) 0%, transparent 70%),
  radial-gradient(34% 26% at 12% 78%, var(--f3) 0%, transparent 70%); }
.field--section::after { opacity: .22; background-size: 340px; }
.field--section.field--blue { --f1: rgba(0, 61, 255, .55); --f3: rgba(255, 65, 106, .28); }
.field--section.field--pink { --f1: rgba(255, 65, 106, .45); --f3: rgba(0, 61, 255, .3); }
.field--section.field--violet { --f1: rgba(120, 102, 204, .55); --f3: rgba(0, 61, 255, .28); }
@media (prefers-reduced-motion: no-preference) { .field--section::before { animation: field-drift 40s ease-in-out infinite alternate; } }