/* ============================================================
   EnCO 🤖 — per-project theme
   Deep violet on near-black plum. Built on robexia.css —
   we remap the cyan brand tokens to violet so every shared
   primitive (buttons, badges, eyebrow, chrome) turns purple.
   ============================================================ */

:root {
  /* near-black plum backgrounds */
  --bg:          #0c0815;
  --bg-2:        #110b1e;
  --surface:     #18112a;
  --surface-2:   #201736;
  --surface-3:   #2a1f45;

  /* lines (cool violet) */
  --line:        rgba(170,140,255,0.10);
  --line-2:      rgba(170,140,255,0.18);
  --line-cyan:   rgba(150,110,255,0.34);   /* = accent line */

  /* text */
  --text:        #efe9fb;
  --text-dim:    #b6a8d4;
  --text-mute:   #7a6c98;

  /* VIOLET brand — remaps the cyan tokens robexia.css references */
  --cyan:        #8b5cf6;
  --cyan-bright: #c4b5fd;
  --cyan-deep:   #6d28d9;
  --cyan-ink:    #1e1138;
  --glow:        rgba(139,92,246,0.50);
  --glow-soft:   rgba(139,92,246,0.16);

  /* readable violet aliases */
  --violet:        #8b5cf6;
  --violet-bright: #c4b5fd;
  --violet-deep:   #6d28d9;
  --magenta:       #c084fc;

  /* chrome → cool violet-white */
  --chrome-1:    #f6f2ff;
  --chrome-2:    #cebdf9;
  --chrome-3:    #9a7ee0;

  /* codec / format brand colors */
  --c-x264:   #7c9cff;
  --c-x265:   #b07cff;
  --c-mp4:    #5ad1ff;
  --c-mkv:    #ff8fb0;
  --c-webm:   #5be3a3;
  --c-gif:    #ffcf5a;
  --c-audio:  #c084fc;
  --c-hevc:   #b07cff;
  --c-av1:    #ff9d5a;
  --c-sub:    #8be0ff;
}

::selection { background: var(--violet); color: #160a2e; }

::-webkit-scrollbar-thumb:hover { background: var(--violet-deep); }

/* static violet-white chrome — no moving shimmer sweep */
.chrome {
  background-image: linear-gradient(176deg,
    var(--chrome-1) 0%, var(--chrome-2) 48%, var(--chrome-3) 100%);
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  animation: none !important;
}

/* ============================================================
   shared atmospheric backdrop
   ============================================================ */
.bg-layers { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.glow {
  position: absolute; border-radius: 50%;
  filter: blur(88px); opacity: .55; will-change: transform;
}
.glow.g1 { width: 58vw; height: 58vw; top: -16vw; right: -8vw;
  background: radial-gradient(circle, rgba(139,92,246,.36), transparent 64%); animation: drift1 18s ease-in-out infinite; }
.glow.g2 { width: 50vw; height: 50vw; bottom: -12vw; left: -12vw;
  background: radial-gradient(circle, rgba(192,132,252,.22), transparent 64%); animation: drift2 22s ease-in-out infinite; }
.glow.g3 { width: 40vw; height: 40vw; top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(99,70,210,.18), transparent 66%); animation: drift1 25s ease-in-out infinite reverse; }

@keyframes drift1 { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-4%,5%) } }
@keyframes drift2 { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(5%,-4%) } }

.grain { position: fixed; inset: -60%; z-index: 70; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(2) infinite; will-change: transform; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 52%, rgba(6,3,12,.74)); }

.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  background: linear-gradient(90deg, var(--violet-bright), var(--violet));
  transform-origin: right center; transform: scaleX(0);
  box-shadow: 0 0 14px var(--glow);
}

/* shared chip icon sizing */
.pf-ic { display: grid; place-items: center; }
.pf-ic svg { width: 100%; height: 100%; }