/* ════════════════════════════════════════════════════════════════════════════
 * BACKGROUND
 * Wave gradient, mesh, grain, blobs, grid, scroll-bar, entry-sweep
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ──────────────────────────  BACKGROUND  ────────────────────────── */
/* Layer 1 — slow parme→violet wave gradient (the signature) */
.wave-bg{position:fixed;inset:-8%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(60% 50% at 25% 30%, rgba(184,175,232,.32), transparent 62%),
    radial-gradient(55% 55% at 75% 70%, rgba(124,58,237,.45), transparent 65%),
    radial-gradient(70% 60% at 50% 90%, rgba(110,62,232,.40), transparent 65%);
  background-color:var(--base);
  background-size:220% 220%, 240% 240%, 200% 220%;
  background-repeat:no-repeat;
  background-position:0% 50%, 100% 50%, 50% 0%;
  animation:wave-shift 13s ease-in-out infinite, wave-rot 22s ease-in-out infinite, hue-cycle 14s ease-in-out infinite;
  will-change:background-position, transform, filter;
}
.wave-bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(168,85,247,.22), transparent 65%),
    radial-gradient(45% 35% at 20% 80%, rgba(184,175,232,.20), transparent 65%);
  background-size:260% 260%, 220% 220%;
  background-repeat:no-repeat;
  background-position:0% 0%, 100% 100%;
  mix-blend-mode:screen;
  animation:wave-shift 17s ease-in-out -3s infinite reverse;
  will-change:background-position;
}
.wave-bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(168,85,247,.22), transparent 65%),
    radial-gradient(45% 35% at 20% 80%, rgba(184,175,232,.20), transparent 65%);
  background-size:260% 260%, 220% 220%;
  background-repeat:no-repeat;
  background-position:0% 0%, 100% 100%;
  mix-blend-mode:screen;
  animation:wave-shift 17s ease-in-out -3s infinite reverse;
  will-change:background-position;
}
/* Layer 2 — mouse-tracked accent (more subtle now) */
.mesh-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at var(--mx,30%) var(--my,20%), rgba(168,85,247,.25), transparent 50%),
    radial-gradient(circle at calc(100% - var(--mx,30%)) 80%, rgba(255,95,31,.15), transparent 55%);
  transition:background .4s cubic-bezier(.16,1,.3,1);
  mix-blend-mode:screen;
}
/* Layer 3 — animated film grain across whole page (slightly stronger) */
.grain-bg{position:fixed;inset:-4%;z-index:-1;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-anim 8s steps(10) infinite;
}
/* Layer 3b — fine dot pattern for additional texture in empty spaces */
.grain-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(184,175,232,.07) 1px, transparent 1.5px);
  background-size:36px 36px;
  mix-blend-mode:overlay;
  opacity:.6;
  animation:grain-anim 14s steps(8) infinite reverse;
}
/* Layer 4 — drifting violet blobs */
.blob{position:fixed;border-radius:50%;filter:blur(100px);opacity:.5;animation:drift 24s cubic-bezier(.16,1,.3,1) infinite;z-index:-1;pointer-events:none;}
.blob-1{top:25%;left:-15%;width:540px;height:540px;background:var(--violet);}
.blob-2{bottom:-10%;right:-15%;width:480px;height:480px;background:radial-gradient(circle,var(--magenta) 0%,transparent 70%);animation-delay:-9s;}
.blob-3{top:55%;left:50%;width:320px;height:320px;background:radial-gradient(circle,var(--periwinkle) 0%,transparent 70%);animation-delay:-15s;animation-duration:32s;opacity:.3;}

/* baseline 12-column grid overlay (brutalist signature) — slightly more visible */
.grid-overlay{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.06;
  background-image:linear-gradient(to right,var(--paper) 1px,transparent 1px);
  background-size:calc(100%/12) 100%;}
/* Layer 5 — very faint horizontal scan-line texture across the whole page */
.scan-overlay{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.07;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(184,175,232,.5) 2px,rgba(184,175,232,.5) 3px);
  mix-blend-mode:overlay;}

/* glass primitives */
.glass{background:rgba(255,255,255,.04);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--rule);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 32px rgba(0,0,0,.4);}
.glass-strong{background:rgba(5,5,6,.55);backdrop-filter:blur(40px) saturate(160%);-webkit-backdrop-filter:blur(40px) saturate(160%);border:1px solid var(--rule-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 48px rgba(0,0,0,.6);}

/* scroll progress bar */
.scroll-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--parme),var(--periwinkle),var(--indigo),var(--violet),var(--parme));background-size:300% 100%;animation:shimmer 6s ease-in-out infinite;z-index:100;width:0;transition:width .1s linear;box-shadow:0 0 12px var(--accent-glow);}

/* page-load entrance sweep — fires once */
.entry-sweep{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(184,175,232,.18) 45%,rgba(124,58,237,.25) 50%,rgba(184,175,232,.18) 55%,transparent);animation:sweep 1.8s cubic-bezier(.16,1,.3,1) .2s both;}

main{position:relative;z-index:1;}