/* ================================================================
   AMBIENT — persistent world layer + soft arc-to-arc blending.
   Every arc's colour wash lives in an ::before that fades at both
   edges, so backgrounds cross-dissolve instead of hard-cutting.
   ================================================================ */

/* ---- persistent starfield + drifting nebulae (always behind everything) ---- */
#sky{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--void)}
#sky::before{content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(1px 1px at 12% 18%,#fff,transparent),
    radial-gradient(1px 1px at 68% 8%,#cfe4ff,transparent),
    radial-gradient(1px 1px at 34% 62%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 82% 44%,#dce9ff,transparent),
    radial-gradient(1px 1px at 52% 84%,#fff,transparent),
    radial-gradient(1px 1px at 90% 72%,#bcd8ff,transparent),
    radial-gradient(1.4px 1.4px at 22% 92%,#fff,transparent),
    radial-gradient(1px 1px at 6% 48%,#e6f0ff,transparent);
  background-size:340px 340px;
  animation:twinkle 9s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.22}}
.neb{position:fixed;z-index:-2;width:52vw;height:52vw;border-radius:50%;
  filter:blur(110px);opacity:.16;pointer-events:none}
.neb.a{top:-16vw;left:-12vw;background:var(--sys-violet);animation:drift 34s ease-in-out infinite alternate}
.neb.b{bottom:-20vw;right:-14vw;background:var(--sys-cyan);animation:drift 44s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(7vw,5vw) scale(1.18)}}

/* ---- arc wash: fades in and out at the section edges ---- */
.arc{position:relative;isolation:isolate;padding:96px 0}
.arc::before{
  content:"";position:absolute;inset:-14% 0;z-index:-1;pointer-events:none;
  background:var(--wash,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
}
.arc > .wrap{position:relative;z-index:1}

/* each arc supplies its own wash; edges dissolve into the starfield */
#status  {--wash:radial-gradient(900px 520px at 20% 10%,rgba(160,107,255,.16),transparent 65%),
                 radial-gradient(900px 520px at 85% 80%,rgba(53,224,255,.13),transparent 65%)}
#skills  {--wash:radial-gradient(1100px 620px at 30% 30%,rgba(61,220,151,.13),transparent 68%),
                 linear-gradient(160deg,rgba(120,96,48,.16),rgba(10,14,10,.5))}
#dungeons{--wash:radial-gradient(1000px 560px at 70% 20%,rgba(80,190,255,.20),transparent 66%),
                 linear-gradient(200deg,rgba(20,60,110,.28),transparent 70%)}
#voyage  {--wash:radial-gradient(1000px 560px at 78% 16%,rgba(255,154,61,.20),transparent 66%),
                 linear-gradient(180deg,rgba(60,34,12,.42),rgba(12,26,44,.5))}
#pastlife{--wash:linear-gradient(180deg,rgba(12,12,12,.7),rgba(30,30,30,.35))}
#titles  {--wash:radial-gradient(900px 620px at 50% 6%,rgba(240,194,75,.22),transparent 64%),
                 linear-gradient(180deg,rgba(40,28,6,.4),transparent 72%)}
#transmit{--wash:radial-gradient(760px 620px at 50% 46%,rgba(160,107,255,.24),transparent 62%),
                 radial-gradient(1000px 500px at 50% 100%,rgba(53,224,255,.14),transparent 70%)}


/* ================================================================
   PERF BUDGET
   Blur + large composite layers are the expensive part; drop them
   where they cost most and buy nothing.
   ================================================================ */
@media(max-width:900px){
  .neb{filter:blur(70px);width:70vw;height:70vw}
  #sky::before{animation:none}
  .panel,#chat{backdrop-filter:none}          /* backdrop-filter is the #1 mobile cost */
  .arc{padding:64px 0}
}
@media(max-width:640px){
  .neb.b{display:none}                        /* one nebula is enough on a phone */
  .arc::before{inset:-8% 0}
}
/* coarse pointer = touch: hover-only flourishes never fire, so skip their cost */
@media(hover:none){
  .stele::before,.mpanel::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  #sky::before,.neb{animation:none}
}