/* ============================================================
   Athra art — the surface system

   Measured off elevenlabs.io, not guessed:
   - their orbs are abstract gradient fields, NOT photographs
   - each one is a DIFFERENT hue family; the set is what reads as a system
   - grain runs at opacity .5 with mix-blend-overlay. this is the whole trick.
     a gradient at .05 grain reads as a flat CSS fill. at .5 it reads as a
     material. earlier attempts here failed on exactly that number.
   - nothing is blurred. filter:none everywhere.

   Rules that hold:
   - art lives INSIDE containers as brand imagery, never as page chrome
   - page, cards and controls stay clean white
   - no hue between 250 and 310 (purple/indigo) anywhere, ever
   ============================================================ */

.art{ position:relative; overflow:hidden; isolation:isolate; background:#fff; }
.art > *{ position:relative; z-index:4; }

/* the gradient field */
.art i.f{ position:absolute; inset:0; z-index:0; }

/* coarse grain — the measured elevenlabs value */
.art::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-size:128px 128px; background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* fine grain — adds tooth at close range so small surfaces do not go flat */
.art::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.2; mix-blend-mode:multiply;
  background-size:38px 38px; background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* ---------- the families ----------
   Six hues. Use DIFFERENT ones on different surfaces — that variety is what
   makes a set read as a system rather than a repeated wallpaper. */

/* blossom · white into rose. hue ~345, nowhere near purple. */
.art--blossom i.f{ background:
  radial-gradient(120% 95% at 24% 16%, #fff 0%, transparent 56%),
  radial-gradient(95% 82% at 80% 32%, #f2b6c6 0%, transparent 62%),
  radial-gradient(130% 120% at 58% 112%, #b8607a 0%, transparent 70%),
  linear-gradient(150deg,#fdf2f4,#e094aa); }

/* ember · the amber family the brand already uses */
.art--ember i.f{ background:
  radial-gradient(120% 95% at 22% 18%, #f9d3b2 0%, transparent 58%),
  radial-gradient(95% 80% at 82% 30%, #d3602c 0%, transparent 62%),
  radial-gradient(130% 120% at 60% 110%, #6d2408 0%, transparent 70%),
  linear-gradient(150deg,#f6e6d8,#c2551f); }

/* slate · cool and quiet */
.art--slate i.f{ background:
  radial-gradient(115% 95% at 20% 22%, #e6eff6 0%, transparent 58%),
  radial-gradient(100% 90% at 84% 40%, #4d7ea8 0%, transparent 64%),
  radial-gradient(130% 120% at 55% 112%, #16303f 0%, transparent 70%),
  linear-gradient(150deg,#eef3f7,#345b78); }

/* moss · shares a hue with the Live state */
.art--moss i.f{ background:
  radial-gradient(115% 95% at 24% 20%, #f1f6ea 0%, transparent 56%),
  radial-gradient(100% 88% at 80% 38%, #5c8248 0%, transparent 64%),
  radial-gradient(130% 118% at 58% 110%, #1d3320 0%, transparent 70%),
  linear-gradient(150deg,#f0f4ea,#3d6236); }

/* graphite · no hue at all */
.art--graphite i.f{ background:
  radial-gradient(110% 90% at 26% 20%, #fff 0%, transparent 55%),
  radial-gradient(100% 85% at 78% 74%, #2a2c31 0%, transparent 66%),
  linear-gradient(145deg,#eceef0,#6f7378); }

/* dusk · warm meeting cool, the most distinctive of the set */
.art--dusk i.f{ background:
  radial-gradient(110% 92% at 18% 24%, #ffdcc0 0%, transparent 55%),
  radial-gradient(105% 95% at 86% 66%, #3a5f7d 0%, transparent 64%),
  linear-gradient(140deg,#fbe6d6,#7c6a76 55%,#26384a); }

/* ---------- treatments ---------- */
/* swept treatment removed: a conic gradient always converges to a visible
   point at its centre. .art--swept is kept as a no-op so existing markup
   keeps working and simply gets the plain radial field. */

/* ---------- shapes ---------- */
.art--hero  { min-height:340px; border-radius:18px; }
.art--panel { height:100%; min-height:520px; }
.art--strip { height:104px; border-radius:14px 14px 0 0; }
.art--orb   { border-radius:999px; aspect-ratio:1; }
.art--avatar{ width:38px; height:38px; border-radius:999px; flex:0 0 auto;
              display:grid; place-items:center; font-size:13px; font-weight:600; color:#fff;
              text-shadow:0 1px 2px rgba(0,0,0,.35); }
.art--avatar::before{ opacity:.14; }

/* ---------- pale ----------
   Large surfaces that sit behind body copy need the field pulled back so text
   stays readable. Small surfaces keep full strength. */
.art--pale i.f{ opacity:.34; }
.art--soft i.f{ opacity:.6; }

/* ---------- rules ----------
   NOT a grid. A repeating tile reads as graph paper. elevenlabs runs a couple of
   rules at the container edges and marks the crossings. Everything else is empty. */
.rules{ position:relative; background:#fff; }
.rules::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(15,15,16,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,15,16,.055) 1px, transparent 1px);
  background-repeat:no-repeat,no-repeat;
  background-position:var(--rule-l,64px) 0, var(--rule-r,calc(100% - 64px)) 0;
  background-size:1px 100%,1px 100%;
}
.rule-h{ position:relative; }
.rule-h::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(15,15,16,.055); pointer-events:none; }

/* card, measured off kendo.ai: 1px inset ring, no drop shadow */
.card-k{ background:#fff; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }

/* ---------- drift ---------- */
.art--drift i.f{ animation:art-drift 40s cubic-bezier(.37,0,.63,1) infinite alternate; }
@keyframes art-drift{
  from{ transform:scale(1.04) translate3d(-1%,-.6%,0); }
  to  { transform:scale(1.1)  translate3d(1.2%,.9%,0); }
}
@media (prefers-reduced-motion:reduce){ .art--drift i.f{ animation:none; } }